Handlebars Examples

Professional services have a number of common Programmable Layouts and we wanted to understand which of these can be achieved today with handlebars.

The following Programmable Layouts were identified as the most important/commonly used by the Professional Services team.

If you're not familiar with Handlebars, you may want to first quickly skim the "Intro to handlebars" page on the Terminalfour Docs site.

Used on almost every build

Programmable Layout Description Can be achieved
with handlebars
Wrapping Content Type

Allows a sequence of content items of the same type to be wrapped in markup.

Used for sliders, accordions, tabs, card groups and other repeatable items

✅

Example
Canonical URL

Used to output a canonical URL meta tag on the page

✅

Example
Custom page Title

Uses the SectionMetaDescription Content Type to capture a custom title to be output in the <title> tag of the page.

If the custom title isn't present, the section name is used. On fulltext, the Title element of the fulltext content is used.

✅

Example

Used quite frequently

Programmable Layout Description Can be achieved
with handlebars
Alternate Content Layout depending on Element

Outputs a different content layout based on what value a user has selected in a list

✅

Example
Display default image based on element

Outputs a predefined image if a list element is selected

✅

Example
Output Publish URL in preview

Outputs section name and publish URL in the browser console when in preview

✅

Example

Less common, but used a number of times

Programmable Layout Description Can be achieved
with handlebars
Display list as html

Takes the selected values from a list and outputs them as a HTML <ul>

✅

Example