Context Aware Layouts
Context-sensitive content rendering is a strategy that recognizes that the same piece of content may need to be presented differently depending on where and how it appears within your site ecosystem. Rather than applying a one-size-fits-all approach, this technique allows your content to adapt intelligently to its surroundings. Whether that's based on page hierarchy or section context. For example, a news article might need a bold, attention-grabbing layout when featured on a landing page, but require a more subdued presentation when it appears in a departmental sidebar or deep within your site's hierarchy.
This contextual awareness in Terminalfour enables you to create more sophisticated and user-focused experiences without duplicating content or creating multiple content types. By implementing context-based layout variations, you can ensure that your content not only maintains its core information but also adapts its presentation to best serve its purpose in each unique location. This approach helps maintain visual hierarchy, improves navigation clarity, and creates a more intuitive user experience by adjusting how content is displayed based on where users encounter it within your site's structure.
Different Layouts Depending on Page Layout
In this example we’ll work with a News Content Type that has two unique layouts. Let’s call them text/promotional-news and text/standard-news.
What we want to do is ensure that we output the text/promotional-news layout whenever we’re on a page using the Page layout named “Landing Page”. If we’re not using the “Landing “Page” Page layout, we should output the text/standard-news layout.
Finding the Page Layout ID
Step one is to get the ID of the “Landing Page” Page layout. We’ll use this when checking which layout should be output in our code. The ID will always remain consistent, but the “Name” of a Page Layout can change. We don’t want out Content Type to break if a user renames the “Landing Page” Page layout to a different name.
Navigate to “Assets > Page Layouts” and filter for your Page layout. Take note of the “id” referenced in the “Page Layout” column.
In this example we’ll use an example ID of 123 but you should replace this with the ID of your Page Layout.
Update News Content Layout
We can now navigate to our News Content Type and update the standard Content layout (generally named text/html).
When a Page/Section that uses this Content Type is being Published or Previewed, the above code will:
- Check if the current Page Layout’s ID matches the ID we passed (123)
- If it does:
- It will embed the alternate layout called
text/promotional-news
- It will embed the alternate layout called
- If it doesn’t:
- It will embed the alternate layout called
text/standard-news
- It will embed the alternate layout called
Different Layouts Depending on Section Level
In this example, we’ll do something very similar. Again, our News Content type has two unique layouts and we’ve called them text/promotional-news and text/standard-news.
This time, our goal is to ensure that we output the text/promotional-news layout whenever we’re on a page that’s either the homepage, or one of its direct children. If we’re not on the Homepage, or on a section directly below the homepage then we’ll output the text/standard-news Content type.
Understanding the sectionLevel Helper
The sectionLevel Helper will return us a number that corresponds to how “deep” a section is within the Site Structure.
For example, the Channel root (or Homepage) of our site will return 1 for the Section Level.
All sections one “level” lower – i.e. Sections that are direct children of the Channel root – will return 2 for the Section Level.
Each of those section’s direct children will return 3 for the Section Level and so on.
Update News Content Layout
We can now navigate to our News Content Type and update the standard Content layout (generally named text/html).
When a Page/Section that uses this Content Type is being Published or Previewed, the above code will:
- Check if the current Section’s “level” is less than or equal to
2- In other words “Is it the homepage, or a direct child of the homepage?”
- If it is:
- It will embed the alternate layout called
text/promotional-news
- It will embed the alternate layout called
- If it isn’t:
- It will embed the alternate layout called
text/standard-news
- It will embed the alternate layout called