<p>Assuming it's the field portfolioImage that can have multiple assets, try this:</p>

<pre><code>{% for block in entry.portfolio %}
    {% switch block.type %}

    {% case "images" %}

    {% for image in block.portfolioImage %}
        {% set transformedImages = craft.imager.transformImage(image,
            [
                { width: 1200, ratio: 4/3 },
                { width: 992, ratio: 4/3 },
                { width: 768, ratio: 4/3, jpegQuality: 60 },
            ],
            {
                format: 'jpg',
                allowUpscale: false,
                mode: 'crop',
                jpegQuality: 80,
                interlace: true
            }
        ) %}
        &lt;img class="img-responsive"
             src="{{ transformedImages[1].url }}"
             sizes="50vw"
             srcset="{{ craft.imager.srcset(transformedImages) }}"
             alt="{{ image.title }}"&gt;
    {% endfor %}

    {% endswitch %}
{% endfor %}
</code></pre>

CC BY-SA 3.0
2017-06-09T11:07:27.293Z
Thanks André, seems obvious now I see it. As I'd forgot to put in the for loop. Appreciate the help.
mention79
CC BY-SA 3.0
2017-06-09T10:59:35.367Z
2017-06-09T10:59:35.367Z
André Elvan
<p>I have a portfolio page for a client that has a simple two column grid of images. However, I'd like to set it up so that it creates responsive images via the excellent <a href="https://github.com/aelvan/Imager-Craft" rel="nofollow noreferrer">Imager</a> plugin.</p>

<p>I have the following code below so far. However, it's only outputting the first image from the Matrix. So I need it to output all the images the client drops in.</p>

<p>So need a little bit of help to tweak the code to output all images please?</p>

<pre><code>{% for block in entry.portfolio %}
    {% switch block.type %}

    {% case "images" %}
    {% set image = block.portfolioImage.first() %}
    {% set transformedImages = craft.imager.transformImage(image,
      [
          { width: 1200, ratio: 4/3 },
          { width: 992, ratio: 4/3 },
          { width: 768, ratio: 4/3, jpegQuality: 60 },
      ],
      {
          format: 'jpg',
          allowUpscale: false,
          mode: 'crop',
          jpegQuality: 80,

          interlace: true
      }
    ) %}
    {% if image | length %}
    &lt;img class="img-responsive"
         src="{{ transformedImages[1].url }}"
         sizes="50vw"
         srcset="{{ craft.imager.srcset(transformedImages) }}"
         alt="{{ image.title }}"&gt;
    {% endif %}

    {% endswitch %}
{% endfor %}
</code></pre>

<matrix><plugin-imager>
Matrix gallery with Imager plugin
# Matrix gallery with Imager plugin

(Asked by: username_0 on 2017-06-09)

I have a portfolio page for a client that has a simple two column grid of images. However, I'd like to set it up so that it creates responsive images via the excellent Imager plugin.
I have the following code below so far. However, it's only outputting the first image from the Matrix. So I need it to output all the images the client drops in.
So need a little bit of help to tweak the code to output all images please?
{% for block in entry.portfolio %}
    {% switch block.type %}

    {% case "images" %}
    {% set image = block.portfolioImage.first() %}
    {% set transformedImages = craft.imager.transformImage(image,
      [
          { width: 1200, ratio: 4/3 },
          { width: 992, ratio: 4/3 },
          { width: 768, ratio: 4/3, jpegQuality: 60 },
      ],
      {
          format: 'jpg',
          allowUpscale: false,
          mode: 'crop',
          jpegQuality: 80,

          interlace: true
      }
    ) %}
    {% if image | length %}
    
    {% endif %}

    {% endswitch %}
{% endfor %}

**Tags:** matrix, plugin-imager


---

## 1 answers

### Answer by username_1 on 2017-06-09. Score: 2 | Accepted answer

Assuming it's the field portfolioImage that can have multiple assets, try this:
{% for block in entry.portfolio %}
    {% switch block.type %}

    {% case "images" %}

    {% for image in block.portfolioImage %}
        {% set transformedImages = craft.imager.transformImage(image,
            [
                { width: 1200, ratio: 4/3 },
                { width: 992, ratio: 4/3 },
                { width: 768, ratio: 4/3, jpegQuality: 60 },
            ],
            {
                format: 'jpg',
                allowUpscale: false,
                mode: 'crop',
                jpegQuality: 80,
                interlace: true
            }
        ) %}
        
    {% endfor %}

    {% endswitch %}
{% endfor %}

> **Comments:**
> **username_0**: Thanks André, seems obvious now I see it. As I'd forgot to put in the for loop. Appreciate the help.  

---

