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>{{ }}</h2>
        {{ }}
      <div class="col">
        <figure class="image 5by4">
          <img src="assets/img/{{ }}" alt="{{ }}" width="648" height="521">
      {% endfor %}
{% endblock productContent %}

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

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

      {% include sections/ -%}

      {% include sections/_section_05.html -%}
      {% include sections/_section_06.html -%}
      {% include sections/_section_07.html -%}
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?

Oldest comments (0)