Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-09T11:07:27.293Z
Answers.Text: Thanks André, seems obvious now I see it. As I'd forgot to put in the for loop. Appreciate the help.
Answers.UserDisplayName: mention79
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-09T10:59:35.367Z
Answers.LastActivityDate: 2017-06-09T10:59:35.367Z
Answers.UserDisplayName: André Elvan
Body: <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>
  
Tags: <matrix><plugin-imager>
Title: Matrix gallery with Imager plugin
ThreadText: # 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](https://github.com/aelvan/Imager-Craft) 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 %}
      <img class="img-responsive"
           src="{{ transformedImages[1].url }}"
           sizes="50vw"
           srcset="{{ craft.imager.srcset(transformedImages) }}"
           alt="{{ image.title }}">
      {% 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
              }
          ) %}
          <img class="img-responsive"
               src="{{ transformedImages[1].url }}"
               sizes="50vw"
               srcset="{{ craft.imager.srcset(transformedImages) }}"
               alt="{{ image.title }}">
      {% endfor %}
  
      {% endswitch %}
  {% endfor %}
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks username_1, seems obvious now I see it. As I'd forgot to put in the for loop. Appreciate the help.  
  
  ---
  
  