0

I have a products 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 partials calls the carousel.

{% for item in collections.products %}
  <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 products 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 product in collections.products -%}
  <figure class="outer-1by1">
    <img class="inner-1by1" src="{{ product.data.img_main.image }}" width="160" height="143" alt="{{ product.data.img_main.imageAlt }}" loading="lazy" />
  </figure>
{% endfor -%}

And this results in the desired output.

<figure class="outer-1by1">
  <img class="inner-1by1" src="/assets/img/img.jpg" width="160" height="143" alt="text" loading="lazy" />
</figure>

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

Grant Smith
  • 321
  • 2
  • 15
  • If you {{ item.data | log }} what do you see in terminal? – Raymond Camden Aug 18 '20 at 17:47
  • Ah cool, wasn't aware of that new feature. Is this the bit you were hoping to see? ```carousel: [{ image: '/assets/img/KB09-01.jpg', imageAlt: 'High temperature KB09 beam style Stirling Engine' }, { image: '/assets/img/KB09-02.jpg', imageAlt: 'Rear view of beam Stirling Engine showing crank' }, { image: '/assets/img/KB09-03.jpg', imageAlt: 'KB09 Stirling engine showing conrod and beam' }, { image: '/assets/img/KB09-04.jpg', imageAlt: 'Front view displacer piston of Stirling engine' }, { image: '/assets/img/KB09-05.jpg', imageAlt: 'Top view of brass heatsink on the Stirling engine' }],``` – Grant Smith Aug 19 '20 at 10:58
  • 1
    So looking at the result, image.data.carousel is an array, NOT an object. So when you did item.data.carousel.image, that wasn't right. I believe you want to actually loop over item.data.cataosel as that is your array of images. – Raymond Camden Aug 19 '20 at 14:54

1 Answers1

0

Got this working by setting two loops, the first loops through the whole collection. The second, the subset of data (the array).

{% set allProductPosts = collections.featuredProduct -%} // First we call all posts in the collection
<div class="product_carousel">
  <div class="product_carousel_featured">
    {% for item in allProductPosts -%} // We then loop through the collection
    {% for carousel in item.data.carousel %} // Then loop through the subset (array) of data
    <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>

Thanks to Raymond Camden for nudging me towards a solution.

Grant Smith
  • 321
  • 2
  • 15