Looping Through Jekyll Collections

2022-08-12

I recently needed to add a couple new items to my wife’s personal recipe website (cookingwith.casa) which I hadn’t touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each collection by hand on the main homepage¹.

Not so good.

Of course, this wasn’t difficult at all to fix. Now everything is much more “hands free” moving forward. I figured I would share the details here in the hopes that others mind find it useful. Plus, it’s my blog - so I’ll do what I want!

Looping Our Collections

We want Jekyll to make things as streamlined as possible for us. This means that if I decide to add a new collection it will automatically render it along the others on the homepage.

Work smart not hard!

Let’s take a look at the bare-bones collections loop:

{% for collection in site.collections %}
    <!-- Our code goes here -->
{% endfor %}

Then we need to include an if statement to avoid pulling in standard post items (or leave this in if that is desired):

{% for collection in site.collections %}
    {% if collection.label != 'posts' %}
    {% endif %}
{% endfor %}

Now for my specific use case, we want to display each collection label and then list its corresponding items below that label (see the site[collection.label] for reference)

{% for collection in site.collections %}
    {% if collection.label != 'posts' %}
        <h2>{{ collection.label }}</h2>
        <ul class="recipe-list">
        {% for item in site[collection.label] %}
            <li>
                <a href="{{ item.url }}">{{ item.title }}</a>
            </li>
        {% endfor %}
        </ul>
        <hr>
    {% endif %}
{% endfor %}

That’s it! Now if I plan to add any new collections down the line, I just need to include it in the _config.yml file and I’m set. The homepage will take care of the rest once rendered.

Enjoy looping through your Jekyll collections!