<p>So the OptimizedImages field in <a href="https://github.com/nystudio107/craft-imageoptimize" rel="nofollow noreferrer">ImageOptimize</a> is added to your asset as a field (just like Entries can have fields), because it's added to your Asset Volume layout.</p>

<p>So you'd iterate through the images the same way you would iterate through any assets in Craft. I'm a little unclear on what part you're stuck on here? If you could clarify, I could help you more.</p>

<p>So let's say we have an Asset's field with a handle of <code>heroImages</code>, to output all of those images we'd do:</p>

<pre><code>{% for heroImage in entry.heroImages.all() %}
    &lt;img src="{{ heroImage.url }}"&gt;
{% endfor %}
</code></pre>

<p>So then let's say you have an OptimizedImages field with a handle of <code>optimizedImages</code> that's in your Asset Volume's layout, so it becomes a field that's in your Assets. Then we could just do:</p>

<pre><code>{% for heroImage in entry.heroImages.all() %}
    &lt;img src="{{ heroImage.optimizedImages.src() }}" srcset="{{ heroImage.optimizedImages.srcset() }}"&gt;
{% endfor %}
</code></pre>

<p>And it'll output all of the same images as in the previous example, but using an optimized <code>srcset</code> of the images.</p>

CC BY-SA 3.0
2018-03-07T21:15:12.200Z
I know this is basic but I'm confused on how I would iterate through the assets in Craft 3. If I wrap the code above with {% for asset in entry.clientWork %} then it shows the same image multiple times (showing the various sources from the srcset) instead of showing the three images I have for that field just once.
Jon Livingston
CC BY-SA 3.0
2018-03-17T00:54:36.413Z
I amended my original answer with some more details for you.
andrew.welch
CC BY-SA 3.0
2018-03-07T20:40:20.690Z
2018-03-17T16:03:33.923Z
2018-03-17T16:03:33.923Z
andrew.welch
<p>I'm stumped on a basic concept for looping images. I'm using the plugin ImageOptimize with Imgix and Amazon S3. The code below works but only shows one image (when there's more for that field).</p>

<p>For the code below, how are you suppose to loop through the assets without showing the different srcset image sizes?</p>

<pre><code>{% set optimizedImages = entry.clientWork.one().imgixTransforms %}        

    &lt;picture&gt;
        &lt;source srcset="{{ optimizedImages.srcsetWebP() }}" 
            sizes="100vw"
            type="image/webp" /&gt;

        &lt;img src="{{ optimizedImages.src() }}"
            srcset="{{ optimizedImages.srcset() }}"
            sizes="100vw" /&gt;
    &lt;/picture&gt;
</code></pre>

<craft3><image-transforms><responsive-images><plugin-imageoptimize>
Using ImageOptimize, how do you loop through photos?
# Using ImageOptimize, how do you loop through photos?

(Asked by: username_0 on 2018-03-07)

I'm stumped on a basic concept for looping images. I'm using the plugin ImageOptimize with Imgix and Amazon S3. The code below works but only shows one image (when there's more for that field).
For the code below, how are you suppose to loop through the assets without showing the different srcset image sizes?
{% set optimizedImages = entry.clientWork.one().imgixTransforms %}

**Tags:** craft3, image-transforms, responsive-images, plugin-imageoptimize


---

## 1 answers

### Answer by username_1 on 2018-03-07. Score: 3

So the OptimizedImages field in ImageOptimize is added to your asset as a field (just like Entries can have fields), because it's added to your Asset Volume layout.
So you'd iterate through the images the same way you would iterate through any assets in Craft. I'm a little unclear on what part you're stuck on here? If you could clarify, I could help you more.
So let's say we have an Asset's field with a handle of heroImages, to output all of those images we'd do:
{% for heroImage in entry.heroImages.all() %}
    
{% endfor %}

So then let's say you have an OptimizedImages field with a handle of optimizedImages that's in your Asset Volume's layout, so it becomes a field that's in your Assets. Then we could just do:
{% for heroImage in entry.heroImages.all() %}
    
{% endfor %}

And it'll output all of the same images as in the previous example, but using an optimized srcset of the images.

> **Comments:**
> **username_0**: I know this is basic but I'm confused on how I would iterate through the assets in Craft 3. If I wrap the code above with {% for asset in entry.clientWork %} then it shows the same image multiple times (showing the various sources from the srcset) instead of showing the three images I have for that field just once.  
> **username_1**: I amended my original answer with some more details for you.  

---

