Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-07T21:15:12.200Z
Answers.Text: 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.
Answers.UserDisplayName: Jon Livingston
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-17T00:54:36.413Z
Answers.Text: I amended my original answer with some more details for you.
Answers.UserDisplayName: andrew.welch
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-07T20:40:20.690Z
Answers.LastActivityDate: 2018-03-17T16:03:33.923Z
Answers.LastEditDate: 2018-03-17T16:03:33.923Z
Answers.UserDisplayName: andrew.welch
Body: <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>
  
Tags: <craft3><image-transforms><responsive-images><plugin-imageoptimize>
Title: Using ImageOptimize, how do you loop through photos?
ThreadText: # 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 %}        
  
      <picture>
          <source srcset="{{ optimizedImages.srcsetWebP() }}" 
              sizes="100vw"
              type="image/webp" />
  
          <img src="{{ optimizedImages.src() }}"
              srcset="{{ optimizedImages.srcset() }}"
              sizes="100vw" />
      </picture>
  
  ```
  
  **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](https://github.com/nystudio107/craft-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() %}
      <img src="{{ heroImage.url }}">
  {% 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() %}
      <img src="{{ heroImage.optimizedImages.src() }}" srcset="{{ heroImage.optimizedImages.srcset() }}">
  {% 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.  
  
  ---
  
  