DEV Community

Grant Smith
Grant Smith

Posted on

Eleventy: Loop through a collection from within a layout?

I have a home page which is made up of sections. Each section is currently pulled into my index.html using partials {% include sections/_section_01.html -%} for example. One of my sections has a bunch of cards which is well suited to be a collection.

How do I loop through a collection from within a section?

I may be going about this all wrong, but here is what I am doing currently.

index.html is using layout: 'layouts/base.liquid'

layouts/base.liquid looks as such…

{% include partials/_head.html %}
{% include partials/_header.html %}

  {% block content %}
    {{ content | safe }}
  {% endblock content %}
  {% block productContent %}{% endblock productContent %}

{% include partials/_footer.html %}

products.liquid is my layout for the cards and looks like this…

{% block productContent %}
<section aria-label="Product overview">
  <div class="container">
    <div class="columns">
      {% for product in collections.products %}
      <div class="col">
        <h2>{{ product.data.title }}</h2>
        {{ product.data.description }}
      </div>
      <div class="col">
        <figure class="image 5by4">
          <img src="assets/img/{{ product.data.img }}" alt="{{ product.data.imgAlt }}" width="648" height="521">
        </figure>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock productContent %}

I've tried including a section on my home page which looks at the correct layout. As per the following…

Index.html
---
layout: 'layouts/base.liquid'
---
    <main role="main">
      {% include sections/_section_01.html -%}
      {% include sections/_section_02.html -%}
      {% include sections/_section_03.html -%}

      {% include sections/_section_04.md -%}

      {% include sections/_section_05.html -%}
      {% include sections/_section_06.html -%}
      {% include sections/_section_07.html -%}
    </main>
_section_04.md
---
layout: "layouts/products.liquid"
---

I know the above isn't correct as it isn't working, is it just not possible or is there a way to loop through a collection from with a layout?

Top comments (0)