DEV Community

Grant Smith
Grant Smith

Posted on

1

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?

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay