Alternate Content Layouts From List

Empowering content editors by allowing them choose different layouts makes your sites more flexible and easier to manage. Sometimes the same content needs to be displayed differently depending on where it appears on a site. For example, information about an event might need to be shown as a “card” on some pages, a wide banner on others, or with lots of details when it's being promoted.

With Terminalfour, your content editors can pick the best way to show their content without asking for technical help. This gives editors freedom while still keeping the website looking consistent. Instead of being stuck with one layout or having too many complicated choices, editors can pick from a few pre-made designs that work for different situations.

This makes creating content faster and helps editors show information in ways that make more sense and are more engaging for different parts of the site.

Outputting different layouts by list selection

Our goal is to give our users the option to select what variation of our content should be output based on what they choose in a dropdown.

In this guide we’ll use the example of an Event Content Type with the following elements:

This Content type has an element called “Layout to output” that is presenting content editors with a “Select box” where they can choose a single option from the “Event layouts” list.

The “Events layouts” list might look something like this:
List Name: Events layouts
List Entries:

The “Name” is what will be displayed to your Content editors when adding or editing Event content. The “Value” contains the name of the alternate Content Layout we want to include in our Event content. We also make sure the “Standard” output is selected by default.

Note: Ensure your Event Content Type has a corresponding Content layout for each of the options in this List.

Now we can edit our Channel Default layout (usually named text/html) and add the following Handlebars code:

{{#ifSet element="Layout to output"}}
  {{embed layout=(selectedValues element="Layout to output")}}
{{else}}
  {{embed layout="text/standard"}}
{{/ifSet}}

How this works

Our code will first check if the user has selected anything in the “Layout to output” field. Although it’s a required field, it’s still a good idea to ensure our layout handles cases where nothing is selected to ensure the layout is robust and future proof.

If there’s a value selected in the “Layout to output” element, then we’ll use the embed Helper to embed the layout referenced in the value of the list. Be aware that if it were a Checkbox or Multi-Select List then a user may have selected multiple options and this code may not function as expected.

If for any reason there’s no value selected in “Layout to output” then we’ll fall back to output the text/standard element.

Best Practice Advice

While this is a very powerful method to give more control to your users over how content is output, it may not be something you want to allow for all of your users.

Consider making use of the “Conditional elements” feature to only show the “Layout to output” element to users of a certain level (e.g. Moderators and above; or Power Users and above).