Doorgaan naar content

Code Rush is een terugkerende podcast over de uitdagingen van front-end design en ontwikkeling in een veranderende industrie.

Render a selection or the most recent post with Antlers

When working with collections like a portfolio or a blog you often want to list one or more posts on the homepage. My friend Philip Thygesen tipped me to use an entries field for this where the you can select an entry. If you don't select one it should fall back to the most recent entry in the collection. In this post I'll explain a quick and easy Antlers technique I started using a while back for incorporating this in my sites. In this post I'll assume you're using the Peak Starter Kit, although it's not needed at all.

Generate the page builder block

Assuming you already generated a a collection by running php please peak:add-collection we can run php please peak:add-block to generate a page builder block. This command will do the following:

  1. Add a set to the replicator in resources/fieldsets/page_builder.yaml.

  2. Create a fieldset in resources/fieldsets/your_block.yaml.

  3. Create a partial in resources/views/page_builder/_your_block.antlers.html.

What we have to do now is edit the fieldset and the page builder block.

Editing the fieldset

So the client wants a selected entry or the most recent entry on the homepage. In order to do that we need an entries field for the client to select an entry. Let's pretend we're working with a projects collection. This could be our fieldset.

1title: Project
2fields:
3 -
4 handle: project
5 field:
6 max_items: 1
7 mode: default
8 create: true
9 collections:
10 - projects
11 display: Project
12 type: entries
13 icon: entries
14 instructions: 'Highlight a project or show the latest.'
15 localizable: true
16 listable: hidden
17 instructions_position: below
18 read_only: false
The page builder block fieldset to select a recent project.

When the client doesn't select a post the partial should fall back to the most recent project. This is where the Antlers runtime parser comes in ❤️.

The Antlers logic

The Antlers runtime parser enables some magnificent ways of manipulating data. In order to fall back to a recent project when the user hasn't selected a project in the fieldset we can set an on the fly template variable called project.

1{{#
2 @name Project
3 @desc The Project page builder block.
4 @set page.page_builder.project
5#}}
6 
7<!-- /page_builder/_project.antlers.html -->
8{{
9 project = block:project
10 ? block:project
11 : { collection:projects sort="date:desc" limit="1" }
12}}
13{{ partial:components/project }}
14<!-- End: /page_builder/_project.antlers.html -->
The antlers code for falling back to the most recent project.

What happens here is that we set a variable called project. By using a ternary operator we can attach data to the variable depending on a condition. If block:project exists it means the user actually selected a project in our scoped project field from the fieldset. In this case we simply attach that post to the variable. If the user didn't select a project we should fetch the most recent collection entry. The actual project will be fed into a reusable component in resources/views/components/_project.antlers.html.

And that's it. A quick and easy technique you can use on almost all your Statamic sites that features collection and a page builder. Let me know what you think.

Using Mapbox to create a custom tiled map in Statamic

  • Mapbox
  • Statamic
  • JS