Creating dynamic layouts with Jekyll
Zander Martineau
241

Thanks for the useful article. I stumbled across it whilst trying to find a way to render includes dynamically with data supplied in the YAML front matter.

I decided to pass a single props variable to the include with the include specific props contained within to avoid having to pass all possible props down to every include .

So I can define the nested include arguments in the markdown like this:

layout: article
title: Approach
blurb: blah blah blah
include:
name: device-slideshow.html
props:
devices:
- name: Fridge #1
icon: icon-signal
text: Connected, last seen 30s ago
- name: Door #2
icon: icon-warning
text: Suspected motor failure
- name: Lawn mower #3
icon: icon-signal
text: Connected, last seen 60s ago

And use it in my article layout like this:

{% if row.include %}
{% include {{ row.include.name }} props=row.include.props %}
{% endif %}

Downside is the device-slideshow.html include has to look for its props within the props object so would have to remember to use that format if re-using directly in another layout but I guess this is the trade-off of not passing down all the props.

<div class="slides">
{% for device in include.props.devices %}
<div class="slide">
<h3>{{ device.name }}</h3>
<span class="icon large {{ device.icon }}"></span>
<p>{{ device.text }}</p>
</div>
{% endfor %}
</div>

Anyway thought it was worth sharing this alteration. Thanks for handy article!

Show your support

Clapping shows how much you appreciated Jon Wyatt’s story.