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

CC BY-SA 4.0
2020-01-30T09:37:02.460Z
Thank you so much for your time, that worked perfectly, and I'm a lot less confused now.
Tigertiger
CC BY-SA 4.0
2020-01-28T21:07:59.613Z
2020-01-28T21:07:59.613Z
SamC
<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>

<plugin-imager>
Imager scrset matrix field, art directed content
# 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:

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

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

        
            
            
            
        
    {% 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.  

---

