What we learned about T4 programmable layouts
See our post on programmable layouts for a more technical look at programmable layouts, but stick around if you’d like more of a high-level overview of what these programmable layouts are, what they do and why we’re using them.
First things first, programmable layouts are a special type of format available in TerminalFour, our content management system. These guys:
And it looks something like this:
It’s alright if that looks a bit overwhelming, but hopefully you’ll get an idea of why we find programmable layouts so useful by the end of this article.
What are programmable layouts?
It’s difficult to talk much about programmable layouts without covering how T4 works. From the perspective of people adding content to T4, they know that every page has what is called, unsurprisingly, a Page Layout. This page layout handles the things that are common to many pages on our website, such as the header, footer and search bar. This is the bread to the sandwich, all setup and ready for whatever (within reason) we want to put in there. Below you can see the top part of the page is handled behind the scenes for the user:
These ingredients are built with Content types, which vary in complexity but here’s an example of one called a Navbox. It has fields to accept a title, background image, and a hyperlink:
The person building the page doesn’t need to know anything about building webpages, they just need to fill out the content item and T4 places that Navbox on the page. So, where does that leave us with these still elusive programmable layouts?
Now, down to programmable layouts
Programmable layouts allow us to change the output based on a range of variables available to us behind the scenes. The how-to isn’t particularly in scope for this article, so lets get down to how they’re used.
Header, footer and other things on every page
For most of our website our header and footer are the same, but there are a few instances where they’re different. In the past we would need to make a whole new page layout just for these pages, for example, with the Graduation and Orientation pages. But with programmable layouts we can tell the header and footer to get the name of their current section, and if it equals Graduation or Orientation, to then apply the appropriate header/footer.
In plain english (sandwich terms), if this is a Graduation page, then use your rye bread header or footer. If it’s Orientation then use your Gluten free header or footer. Anything else gets our house sourdough bread and apply the cheese, mayo and ham slices (content) as needed.
Gallery
Building a gallery was a lot more involved in the older version of T4, but with programmable layouts it is now much easier. What we can do now is upload the set of pictures we want in a gallery and point the content element to that, and it goes about the building of it all. Before, it was confusing and sometimes required the development team getting involved just to get a gallery working right, so this is a marked improvement.
Custom scripts
Just like with the header and footer, we made a new page layout if we needed a specific script, style sheet or otherwise put onto only one or more pages. We can now put a simple statement into T4 that says if the page has a particular title, or is under a specific section, do something special with it.
All in all, programmable layouts offer us options that are often only available to server-side programming in PHP, allowing us developers to cover a much wider range of possibilities with fewer page layouts and content types. This in turn makes things much simpler for our content editors. And at the end of the day if we can make things simpler for the people using T4 to build pages on our site, that’s what we’ll do.