RSS Amplifier

Studio 1902 Journal · Jul 15, 2022

Render a selection or the most recent post with Antlers

0
Sign in to vote or save

Rob de Kort · Studio 1902

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.

A rendered code example with Statamic, Tailwind and Alpine

  • Statamic
  • Peak
  • Tailwind CSS
  • Alpine JS

Read the original on 1902.studio

Comments

Nothing yet. Say the first thing.

    Sign in to join the conversation.