Looping through an assets field type within a matrix field that's eager loaded

Question

I'm trying to loop through images that are eager-loaded inside matrix block, but I can't get the images inside a matrix field handle to loop and show each individual image.

The loop I have loops the correct amount of times (based on how many images there are in each matrix block), but it just shows the first image of the loop.

Here's the set up:

Section handle: products Matrix field handle: imageTextSections Block type handle: sectionBlock Field handle: sectionBlockImages Field type: Assets

I'm trying to loop through images that are eager-loaded inside matrix block, but I can't get the images inside a matrix field to loop and show each individual image.

The loop I have loops the correct amount of times (based on how many images there are in each matrix block), but it just shows the first image of the loop.

Here's the set up:

Section handle: products

Matrix field handle: imageTextSections

Block type handle: sectionBlock

Field handle: sectionBlockImages

Field type: Assets

{% set blocks = entry.imageTextSections.find({
    with: [
        'sectionBlock:sectionBlockImages'
    ]
}) %}

{% for block in blocks %}
...

{% for images in block.sectionBlockImages %}
    {% set image = block.sectionBlockImages[0] ?? null %}
    <img src="{{ image.url }}">
{% endfor %}

{% endfor %}

I figured that the following would work, but I get an error stating that the AssetFileModel.0 is not defined.

{% for images in block.sectionBlockImages %}
    {% set image = images[0] ?? null %}
    <img src="{{ image.url }}">
{% endfor %}

Any guidance would be greatly appreciated!

Answer 1

Eager loading an Assets field simply means that instead of block.sectionBlockImages returning an ElementCriteriaModel, it'll return an array. This means that you can't do stuff like block.sectionBlockImages.first(), but have to use brackets notation – i.e. block.sectionBlockImages[0] to access the first Asset.

Looping over the field would look exactly the same, though. So you'll need to change this

{% for images in block.sectionBlockImages %}
    {% set image = block.sectionBlockImages[0] ?? null %}
    <img src="{{ image.url }}">
{% endfor %}

to this

{% for image in block.sectionBlockImages %}
    <img src="{{ image.url }}">
{% endfor %}

...and you should be good.