11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
17.2k stars 493 forks source link

Collection is outputting all data items instead of individual post? #1406

Closed GrantSmithDoddle closed 4 years ago

GrantSmithDoddle commented 4 years ago

I am having an issue where my collection is outputting all data items from the whole collection, rather than the data from an individual post.

My products collection has a carousel of images for each product. Below is my front matter for this.

---
carousel:
  - image: "/assets/img/img-01.jpg"
    imageAlt: "Alt text"
  - image: "/assets/img/img-02.jpg"
    imageAlt: "Alt text"
  - etc etc
---

And I'm using this template to output.

{% set product = collections.products -%}
<div class="product_carousel">
  <div class="product_carousel-product" data-flickity='{ "cellAlign": "left", "contain": true, "autoPlay": false, "freeScroll": true, "contain": true, "prevNextButtons": false, "pageDots": false }'>
    {% for item in product -%}
      {% for carousel in item.data.carousel %}
      <div class="product_carousel_cell">
        <figure class="outer-5by3">
          <img class="inner-5by3" src="{{ carousel.image }}" alt="{{ carousel.imageAlt }}" loading="lazy" />
        </figure>
      </div>
      {% endfor -%}
    {% endfor -%}
  </div>
</div>

For example, say I have the following products, 1, 2 and 3 in my products collection. My template is outputting carousel.image from products 1, 2 and 3 rather than just product 1.

I was expecting only the carousel.image from a single product?

GrantSmithDoddle commented 4 years ago

I realised that the code I'd been using was doing exactly what I was asking, pull all carousel images in.

My issue was then resolved with…

    {% for img in carousel -%}
    <div class="product_carousel_cell">
      <figure class="outer-5by3">
        <img class="inner-5by3" src="{{ img.image }}" alt="{{ img.imageAlt }}" loading="lazy" />
      </figure>
    </div>
    {% endfor -%}