Answers.Body: <p>It looks like you're looping through <code>block.workImageMobile.all()</code>, and that's not what you want to be doing. </p>
  
  <p>You're only putting in one image into each, right, and they're paired? </p>
  
  <p>So, You want the main for-loop for the blocks, then render the images in each block together "work image 1, work mobile image 1" then move to the next block, and the next image pair. </p>
  
  <pre><code>{% for block in entry.workVisuals.all() %}
      {% if block.type == "imageContent" %}
  
          {% set picDesktop = block.workImage.one() %}
          {% set picMobile = block.workImageMobile.one() %}
  
          {% set imgDesk = craft.imager.transformImage(picDesktop, {
              mode: 'crop',
              width: 1920,
          }) %}
  
          {% set imgMob = craft.imager.transformImage(picMobile, {
              mode: 'crop',
              width: 768,
              height: 1272,
          }) %}
  
          &lt;picture&gt;
              &lt;source media="(max-width: 767px)" srcset="{{ imgMob }}"&gt;
              &lt;source media="(min-width: 768px)" srcset="{{ imgDesk }}"&gt;
              &lt;img src="{{ picDesktop.url }}" alt="{{ pic.title }}"&gt;
          &lt;/picture&gt;
      {% endif %}
  {% endfor %}
  </code></pre>
  
  <p>Also note - on the desktop size, you've got it set to crop, but only have a width set, you might want to add a height to that too. Otherwise, it might be better with a resize function.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-01-30T09:37:02.460Z
Answers.Text: Thank you so much for your time, that worked perfectly, and I'm a lot less confused now.
Answers.UserDisplayName: Tigertiger
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-01-28T21:07:59.613Z
Answers.LastActivityDate: 2020-01-28T21:07:59.613Z
Answers.UserDisplayName: SamC
Body: <p>What I'm trying to achieve: I would like the content editor to upload 2 images to use in a matrix block, one outputs at mobile and the other at desktop (they need to be different images due to art direction from landscape formate to portrait on mobile).</p>
  
  <p>Here is the matrix field setup:
  <a href="https://i.sstatic.net/yWw8n.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/yWw8n.png" alt="enter image description here"></a></p>
  
  <p>Current twig:</p>
  
  <pre><code>{% for block in entry.workVisuals.all() %}
      {% if block.type == "imageContent" %}
  
          {% set relatedAssets = block.workImageMobile.all() %}
            {% for pic in relatedAssets %}
  
              {% set img = craft.imager.transformImage(pic, {
                mode: 'crop',
                width: 1920,
              }) %}
  
              {% set imgMob = craft.imager.transformImage(entry.workImageMobile, {
                  mode: 'crop',
                  width: 768,
                  height: 1272,
              }) %}
  
              &lt;picture&gt;
                &lt;source media="(max-width: 767px)" srcset="{{ imgMob }}"&gt;
                &lt;source media="(min-width: 768px)" srcset="{{ img }}"&gt;
                &lt;img src="{{ img.url }}" alt="{{ pic.title }}"&gt;
              &lt;/picture&gt;
            {% endfor %}
  
        {% endif %}
  </code></pre>
  
  <p>So obviously this is outputting the mobile image for both as asked:</p>
  
  <pre><code>{% set relatedAssets = block.workImageMobile.all() %}
  </code></pre>
  
  <p>What do i need to do to use both in the <code>&lt;picture&gt;</code> tag?</p>
  
Tags: <plugin-imager>
Title: Imager scrset matrix field, art directed content
ThreadText: # Imager scrset matrix field, art directed content
  
  (Asked by: username_0 on 2020-01-28)
  
  What I'm trying to achieve: I would like the content editor to upload 2 images to use in a matrix block, one outputs at mobile and the other at desktop (they need to be different images due to art direction from landscape formate to portrait on mobile).
  
  Here is the matrix field setup:
  [![enter image description here](https://i.sstatic.net/yWw8n.png)](https://i.sstatic.net/yWw8n.png)
  
  Current twig:
  
  ```
  {% for block in entry.workVisuals.all() %}
      {% if block.type == "imageContent" %}
  
          {% set relatedAssets = block.workImageMobile.all() %}
            {% for pic in relatedAssets %}
  
              {% set img = craft.imager.transformImage(pic, {
                mode: 'crop',
                width: 1920,
              }) %}
  
              {% set imgMob = craft.imager.transformImage(entry.workImageMobile, {
                  mode: 'crop',
                  width: 768,
                  height: 1272,
              }) %}
  
              <picture>
                <source media="(max-width: 767px)" srcset="{{ imgMob }}">
                <source media="(min-width: 768px)" srcset="{{ img }}">
                <img src="{{ img.url }}" alt="{{ pic.title }}">
              </picture>
            {% endfor %}
  
        {% endif %}
  
  ```
  
  So obviously this is outputting the mobile image for both as asked:
  
  ```
  {% set relatedAssets = block.workImageMobile.all() %}
  
  ```
  
  What do i need to do to use both in the `<picture>` tag?
  
  **Tags:** plugin-imager
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2020-01-28. Score: 1 | Accepted answer
  
  It looks like you're looping through `block.workImageMobile.all()`, and that's not what you want to be doing.
  
  You're only putting in one image into each, right, and they're paired?
  
  So, You want the main for-loop for the blocks, then render the images in each block together "work image 1, work mobile image 1" then move to the next block, and the next image pair.
  
  ```
  {% for block in entry.workVisuals.all() %}
      {% if block.type == "imageContent" %}
  
          {% set picDesktop = block.workImage.one() %}
          {% set picMobile = block.workImageMobile.one() %}
  
          {% set imgDesk = craft.imager.transformImage(picDesktop, {
              mode: 'crop',
              width: 1920,
          }) %}
  
          {% set imgMob = craft.imager.transformImage(picMobile, {
              mode: 'crop',
              width: 768,
              height: 1272,
          }) %}
  
          <picture>
              <source media="(max-width: 767px)" srcset="{{ imgMob }}">
              <source media="(min-width: 768px)" srcset="{{ imgDesk }}">
              <img src="{{ picDesktop.url }}" alt="{{ pic.title }}">
          </picture>
      {% endif %}
  {% endfor %}
  
  ```
  
  Also note - on the desktop size, you've got it set to crop, but only have a width set, you might want to add a height to that too. Otherwise, it might be better with a resize function.
  
  > **Comments:**
  > **username_0**: Thank you so much for your time, that worked perfectly, and I'm a lot less confused now.  
  
  ---
  
  