Answers.Body: <p>You’re currently passing in the image model you queried for using <code>first()</code> into the <code>craft.imager.transformImage</code> function, but you actually need to pass in the models that you get when looping through all images added to your block’s field.</p>
  
  <p>There’s no reason to do the <code>first()</code> at all, and it would add additional queries.</p>
  
  <pre><code>{% if block.image|lenght %}
      {% for image in block.image %}
          {% set transformedImages = craft.imager.transformImage(image, transforms, options) %}
  
          &lt;img src="{{ transformedImages[1].url }}"
              sizes="33vw"
              srcset="{{ craft.imager.srcset(transformedImages) }}"&gt;
      {% endfor %}
  {% endif %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-16T13:40:53.417Z
Answers.Text: Yep worked a treat. Thanks for your help as always :)
Answers.UserDisplayName: mention79
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-16T12:28:26.210Z
Answers.LastActivityDate: 2017-06-16T12:28:26.210Z
Answers.UserDisplayName: carlcs
Body: <p>I have a content block in a matrix field where I'm trying to output a loop of three sub images.</p>
  
  <p><a href="https://i.sstatic.net/Zm08k.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Zm08k.png" alt="enter image description here"></a></p>
  
  <p>I can get it to work using the following code:</p>
  
  <pre><code>{% case "secondaryImage" %}
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      {% set image = block.image.first() %}
      {% if image | length %}
      &lt;ul class="clearfix"&gt;
      {% for image in block.image %}
        &lt;li&gt;
          &lt;img class="img-responsive" src="{{ image.getUrl() }}" alt="{{ image.title }}"&gt;
        &lt;/li&gt;
      {% endfor %}
      &lt;/ul&gt;
      {% endif %}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, I want to output responsive sizes and like to use the <a href="https://github.com/aelvan/Imager-Craft" rel="nofollow noreferrer">Imager-Craft</a> plugin with the <a href="https://github.com/smcyr/Craft-FocusPoint" rel="nofollow noreferrer">Craft-FocusPoint</a> plugin for this on my other images which works really well. But, I'm running into an issue whereby it's only outputting the first image three times with the following code: </p>
  
  <p><a href="https://i.sstatic.net/tFk15.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/tFk15.png" alt="enter image description here"></a></p>
  
  <pre><code>{% case "secondaryImage" %}
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      {% set image = block.image.first() %}
      {% set transformedImages = craft.imager.transformImage(image,
        [
            { width: 1440, ratio: 6/4 },
            { width: 1024, ratio: 6/4 },
            { width: 750, ratio: 4/3, jpegQuality: 60 },
        ],
        {
            format: 'jpg',
            allowUpscale: false,
            mode: 'crop',
            jpegQuality: 100,
            position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%',
            interlace: true
        }
      ) %}
      {% if image | length %}
      &lt;ul class="clearfix"&gt;
      {% for image in block.image %}
        &lt;li&gt;
          &lt;img class="img-responsive"
               src="{{ transformedImages[1].url }}"
               sizes="33vw"
               srcset="{{ craft.imager.srcset(transformedImages) }}"
               alt="{{ image.title }}"
               width="100%"&gt;
        &lt;/li&gt;
      {% endfor %}
      &lt;/ul&gt;
      {% endif %}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I think the issue is on the line <code>src="{{ transformedImages[1].url }}"</code> but I can't find what to change it to, to output the different images. The first thing I tried was removing the <code>[1]</code>, but that doesn't work and gives an error of Key "url" for array with keys "0, 1, 2" does not exist.</p>
  
  <p>Hopefully someone can help, otherwise I'll have to take it out of the matrix field and create a field for each image. But would prefer to keep it in the matrix if possible?</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-06-16T12:02:14.773Z
Comments.Text: I should try not to use "image" in your first set as you are using it in your for loop aswell (might already do the trick)
Comments.UserDisplayName: Justin Dekkers
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-06-16T12:04:35.077Z
Comments.Text: No, unfortunately not, but thanks for trying
Comments.UserDisplayName: mention79
Tags: <responsive-images><plugin-imager><plugin-focuspoint>
Title: loop through responsive images in matrix with imager plugin
ThreadText: # loop through responsive images in matrix with imager plugin
  
  (Asked by: username_0 on 2017-06-16)
  
  I have a content block in a matrix field where I'm trying to output a loop of three sub images.
  
  [![enter image description here](https://i.sstatic.net/Zm08k.png)](https://i.sstatic.net/Zm08k.png)
  
  I can get it to work using the following code:
  
  ```
  {% case "secondaryImage" %}
  <div class="container">
    <div class="row">
      {% set image = block.image.first() %}
      {% if image | length %}
      <ul class="clearfix">
      {% for image in block.image %}
        <li>
          <img class="img-responsive" src="{{ image.getUrl() }}" alt="{{ image.title }}">
        </li>
      {% endfor %}
      </ul>
      {% endif %}
    </div>
  </div>
  
  ```
  
  However, I want to output responsive sizes and like to use the [Imager-Craft](https://github.com/aelvan/Imager-Craft) plugin with the [Craft-FocusPoint](https://github.com/smcyr/Craft-FocusPoint) plugin for this on my other images which works really well. But, I'm running into an issue whereby it's only outputting the first image three times with the following code:
  
  [![enter image description here](https://i.sstatic.net/tFk15.png)](https://i.sstatic.net/tFk15.png)
  
  ```
  {% case "secondaryImage" %}
  <div class="container">
    <div class="row">
      {% set image = block.image.first() %}
      {% set transformedImages = craft.imager.transformImage(image,
        [
            { width: 1440, ratio: 6/4 },
            { width: 1024, ratio: 6/4 },
            { width: 750, ratio: 4/3, jpegQuality: 60 },
        ],
        {
            format: 'jpg',
            allowUpscale: false,
            mode: 'crop',
            jpegQuality: 100,
            position: image.focusPctX ~ '% ' ~ image.focusPctY ~ '%',
            interlace: true
        }
      ) %}
      {% if image | length %}
      <ul class="clearfix">
      {% for image in block.image %}
        <li>
          <img class="img-responsive"
               src="{{ transformedImages[1].url }}"
               sizes="33vw"
               srcset="{{ craft.imager.srcset(transformedImages) }}"
               alt="{{ image.title }}"
               width="100%">
        </li>
      {% endfor %}
      </ul>
      {% endif %}
    </div>
  </div>
  
  ```
  
  I think the issue is on the line `src="{{ transformedImages[1].url }}"` but I can't find what to change it to, to output the different images. The first thing I tried was removing the `[1]`, but that doesn't work and gives an error of Key "url" for array with keys "0, 1, 2" does not exist.
  
  Hopefully someone can help, otherwise I'll have to take it out of the matrix field and create a field for each image. But would prefer to keep it in the matrix if possible?
  
  **Tags:** responsive-images, plugin-imager, plugin-focuspoint
  
  > **Comments:**
  > **username_1**: I should try not to use "image" in your first set as you are using it in your for loop aswell (might already do the trick)  
  > **username_0**: No, unfortunately not, but thanks for trying  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2017-06-16. Score: 3 | Accepted answer
  
  You’re currently passing in the image model you queried for using `first()` into the `craft.imager.transformImage` function, but you actually need to pass in the models that you get when looping through all images added to your block’s field.
  
  There’s no reason to do the `first()` at all, and it would add additional queries.
  
  ```
  {% if block.image|lenght %}
      {% for image in block.image %}
          {% set transformedImages = craft.imager.transformImage(image, transforms, options) %}
  
          <img src="{{ transformedImages[1].url }}"
              sizes="33vw"
              srcset="{{ craft.imager.srcset(transformedImages) }}">
      {% endfor %}
  {% endif %}
  
  ```
  
  > **Comments:**
  > **username_0**: Yep worked a treat. Thanks for your help as always :)  
  
  ---
  
  