Output subset of data in collection

[Grant-Smith-74]

trafficstars

I have a featuredProducts collection, from which I wish to output a carousel of images. My front matter includes the following…

---
carousel:
  - image: '/assets/img/img.jpg'
    imageAlt: 'text'
  - image: '/assets/img/img-02.jpg'
    imageAlt: 'text'
  - image: '/assets/img/img-03.jpg'
    imageAlt: 'text'
  - image: '/assets/img/img-04.jpg'
    imageAlt: 'text'
  - image: '/assets/img/img-05.jpg'
    imageAlt: 'text'
---

And then my partial calls the carousel.

{% set allProductPosts = collections.featuredProduct -%}
{% for item in allProductPosts -%}
  <figure class="outer-5by3">
    <img loading="lazy" class="inner-5by3" src="{{ item.data.carousel.image }}" alt="{{ item.data.carousel.imageAlt }}">
  </figure>
{% endfor -%}

However, the resulting output has empty src and alt attributes? And I do not understand why? My only guess is that it has something to do with how I am trying to loop through the subset of front matter?

Within the same featuredProducts collection, I have a main image defined in the front matter as…

---
img_main:
  image: '/assets/img/img.jpg'
  imageAlt: 'text'
---

With the following template…

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

And this results in the desired output.

<div class="product_carousel_cell">
  <figure class="outer-5by3">
    <img class="inner-5by3" src="/assets/img/img.jpg" alt="text" loading="lazy" />
  </figure>
</div>

Hence why I assumed item.data.carousel.image would work?

[pdehaan]

My guess is that item.data.carousel is an array of images in your frontmatter YAML, and you’re trying to access .image directly instead of something like [0].image. In your second example, the img_main is an object, so it probably works like you were expecting.

[Grant-Smith-74]

item.data.carousel[0].image does indeed output the first image. I was hoping to loop through them though. Perhaps I need to rethink my approach?

[pdehaan]

I was hoping to loop through them though.

You can probably just use another nested {% for card in item.data.carousel %} if you want to loop over your carousel images [since it's an array]. Now you should be able to get the src and alt by accessing {{ card.image }} and {{ card.imageAlt }} within that nested loop.

[Grant-Smith-74]

Brilliant, obviously I wasn't aware you could do that. For anyone researching in future below is now my working carousel partial.

{% set allProductPosts = collections.featuredProduct -%}
<div class="product_carousel">
  <div class="product_carousel_featured" data-flickity='{ "cellAlign": "left", "contain": true, "autoPlay": false, "freeScroll": true, "contain": true, "prevNextButtons": false, "pageDots": false }'>
    {% for item in allProductPosts -%}
    {% 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 class="product_carousel_nav" data-flickity='{ "asNavFor": ".product_carousel_featured", "contain": true, "pageDots": false, "prevNextButtons": false }'>
    {% for item in allProductPosts -%}
    {% for carousel in item.data.carousel %}
    <div class="product_carousel_cell">
      <figure class="outer-5by3">
        <img loading="lazy" class="inner-5by3" src="{{ carousel.image }}" alt="{{ carousel.imageAlt }}">
      </figure>
    </div>
    {% endfor -%}
    {% endfor -%}
  </div>
</div>

Thanks for all the help @pdehaan