<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>

CC BY-SA 3.0
2017-06-16T13:40:53.417Z
Yep worked a treat. Thanks for your help as always :)
mention79
CC BY-SA 3.0
2017-06-16T12:28:26.210Z
2017-06-16T12:28:26.210Z
carlcs
<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>

CC BY-SA 3.0
2017-06-16T12:02:14.773Z
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)
Justin Dekkers
CC BY-SA 3.0
2017-06-16T12:04:35.077Z
No, unfortunately not, but thanks for trying
mention79
<responsive-images><plugin-imager><plugin-focuspoint>
loop through responsive images in matrix with imager plugin
# 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.

I can get it to work using the following code:
{% case "secondaryImage" %}

  
    {% set image = block.image.first() %}
    {% if image | length %}
    
    {% for image in block.image %}
      
        
      
    {% endfor %}
    
    {% endif %}
  


However, I want to output responsive sizes and like to use the Imager-Craft plugin with the 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: 

{% case "secondaryImage" %}

  
    {% 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 %}
    
    {% for image in block.image %}
      
        
      
    {% endfor %}
    
    {% endif %}
  


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) %}

        
    {% endfor %}
{% endif %}

> **Comments:**
> **username_0**: Yep worked a treat. Thanks for your help as always :)  

---

