Examples
NAV IS OUTPUT
PS 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 by Raewyn.
If you're not familiar with Handlebars, you may want to first check out the "Intro to handlebars" page on the docs site.
Used on almost every build
| Programmable Layout | Description | Can be achieved with handlebars |
Requires custom helpers? |
|---|---|---|---|
| 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 |
✅ |
⛔ |
| Pull Content from Selected Layout AKA Column Content |
Uses a Section/Content Link element to select specific items of content to be output. Used to create curated lists of content from other parts of the site: e.g. events or news |
⛔ | ⛔ |
| 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. |
✅ |
⛔ |
| JSON Escaping |
While this programmable layout wasn't directly referenced by Raewyn, my undertsanding is it's used quite heavily with all module implementations (e.g. Course Search, Calendar etc) |
✅ |
✅ |
Used quite frequently
| Programmable Layout | Description | Can be achieved with handlebars |
Requires custom helpers? |
|---|---|---|---|
| Cropping with PXL |
Creates PXL filters on the fly based on where a user has selected for an image to be cropped from (top/middle/bottom) |
⛔ | ⛔ |
| Alternate Content Layout depending on Element |
Outputs a different content layout based on what value a user has selected in a list |
✅ |
⛔ |
| Video Content |
Takes a YouTube or Vimeo Link and returns an iframe |
✅ |
✅ |
| Display default image based on element |
Outputs a predefined image if a list element is selected |
✅ |
⛔ |
| Output Publish URL in preview |
Outputs section name and publish URL in the browser console when in preview |
✅ |
⛔ |
Less common, but used a number of times
| Programmable Layout | Description | Can be achieved with handlebars |
Requires custom helpers? |
|---|---|---|---|
| Display list as html |
Takes the selected values from a list and outputs them as a HTML <ul> |
✅ |
⛔ |
| List media within a category |
User selects a single Media item and this programmable layout creates a gallery of all images from the same category as the selected media item |
⛔ | ⛔ |
| Content Layout depending on Page Layout |
Outputs a different Content Layout depending on the page layout used by the section |
✅ (Only possible from 8.4.0) |
⛔ |