Creating dynamic layouts with Jekyll
How we used YAML front-matter to massively change the layout for different posts on our agency’s new website
Jekyll-created websites are typically simple and their layouts, predictable. I want to show you how I created a pseudo-dynamic layout for case-studies, on TMW's new website, using some YAML front-matter and a little magic..*
At TMW, the work we do comes in all shapes and sizes. Traditional templates would not suffice, because the work we do is extremely varied and the layouts needed to reflect that. We decided, at a very early stage, that each case study should change based on the project and particular type of content. This presented an interesting challenge for me because Jekyll does not cater for that functionality, so I had to get a little creative…
YAML front-matter, a for-loop and lots of modules
After a few iterations, I settled on a robust, if unorthodox solution that used YAML front-matter (in each case study’s markdown), a simple for-loop (in the case study layout) and lots of modules for each section of the case study page.
YAML front-matter
Amongst other things, the partials YAML array was added to the YAML front-matter for each case study (you can see it at the bottom of the embed below). Each item in that array had to specify a name, this name corresponded to the name of the partial/module that was going to be used.
The for-loop
The loop in question was added to the work layout file in the _layouts directory. It might look a bit nuts — and it is — but please bear with me.. The nature of how Jekyll compiles it’s files meant I had to account for all possible properties for each module that was used in the YAML.
The loop iterated through the partials array, used the name property to include a different module, like so: include {{item.name}}.html. These were then passed to the included module using the subsequent parameters on the include tag. Even if the property was not needed in that module, it still needed to be passed down.
Very quickly, I discovered that the properties of the partials array needed to share the same properties so that my for-loop didn’t get totally out of control.
The modules
Creating modules for this page was nothing out of the ordinary, below you can see one of them. You should also be able to tell that some of the values are optional (e.g {% if include.spaced %}), this meant that I was able to customise the modules even further by adding/removing classes and content and giving the page even more of a unique feel. Examples of this was the optional addition to contain images in the section-image module to a thin column equal to the width of .l-container or a slightly wider version using .l-container--wide. This was used to great effect on the Lynx Bigger Issues case study.
Colour schemes
Another aspect to the case studies, was that they each have their own colour scheme. This is usually governed by the assets or brand for that particular case study and was controlled by some more YAML front-matter.
The YAML set primary, secondary and text colours that were then added to a small inline <style> block that changed styles for some aspects of the page.
All of this allowed for massive customisation on our new website, see a selection of case studies below:
👋
As you can see, there are some incredible things that can be done with Jekyll. If you have any comments or feedback, please let me know.
P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the 💚 button) so other people can see it!. Don’t forget to follow the Interactive team on Medium and on Twitter (@TMWInteractive).
*No magic was used.
