<p>There is no way to determine if an image should go to the first <code>block.type == 'A'</code> if statement or the second one</p>

<p>you could write something like this:</p>

<pre><code>{% switch block.type %}
    {% case 'A' %}
        {# images for both case a1 + a2. write the loop number into the class name #}
        &lt;li class="cellA{{ loop.index }}"&gt; {# your image #}&lt;/li&gt;
    {% case 'B' %}
        {# images for case b #}
        &lt;li class="cellA1"&gt; {# your image #}&lt;/li&gt;
{% endswitch %}
</code></pre>

<p>That's just one of lots of possibilities</p>

CC BY-SA 4.0
2020-03-04T16:26:40.230Z
2020-03-04T16:26:40.230Z
KSPR
<p>I want to fill in shuffled images into a CSS grid as a project overview. The images come from a matrix and have 4 different formats. So I want to fill in a format A image into the fitting grid cell (callA1, cellA2 ...). With my code, I have the problem, that the loop iterates over all items and fills all the A-sized cells with the same image. I would like to have image1 in cellA1 and image2 in cellA2 and image3 in cellB1 and so on.</p>

<pre><code>{% for allProjects in craft.entries.section(['projekteZitate']).all() %} 
   {% set shuffledProjects = shuffle(allProjects) %}


       {% for block in shuffledProjects.projekteMatrix %}
                    {% if block.type == 'A' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                              &lt;li class="cellA1"&gt; &lt;img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /&gt; &lt;/li&gt;
                              {% endif %}
                    {% endif %} 

                    {% if block.type == 'A' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                              &lt;li class="cellA2"&gt; &lt;img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /&gt;&lt;/li&gt;
                              {% endif %}
                    {% endif %}

                    {% if block.type == 'B' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                              &lt;li class="cellB1"&gt; &lt;img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /&gt;&lt;/li&gt;
                              {% endif %}
                    {% endif %}
        {% endfor %}
{% endfor %}
</code></pre>

CC BY-SA 4.0
2020-03-04T09:37:52.973Z
You have `block.type A` twice. Is that on purpose? Also I would look int to the `switch` syntax. It's more elegant when iterating trough matrix blocks.
KSPR
CC BY-SA 4.0
2020-03-04T14:00:31.913Z
Yes, this part of the layout consists of two images of size A and one size B image. They are put in position by the css grid. I would like to have good control of the positions of the image since this is important to the layout of the site. That is why I would like the pick the images one by one and put them in position.
analog junkie
<matrix><forloop>
Need help with filling matrix images into CSS grid
# Need help with filling matrix images into CSS grid

(Asked by: username_0 on 2020-03-04)

I want to fill in shuffled images into a CSS grid as a project overview. The images come from a matrix and have 4 different formats. So I want to fill in a format A image into the fitting grid cell (callA1, cellA2 ...). With my code, I have the problem, that the loop iterates over all items and fills all the A-sized cells with the same image. I would like to have image1 in cellA1 and image2 in cellA2 and image3 in cellB1 and so on.
{% for allProjects in craft.entries.section(['projekteZitate']).all() %} 
   {% set shuffledProjects = shuffle(allProjects) %}


       {% for block in shuffledProjects.projekteMatrix %}
                    {% if block.type == 'A' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                                
                              {% endif %}
                    {% endif %} 

                    {% if block.type == 'A' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                               
                              {% endif %}
                    {% endif %}

                    {% if block.type == 'B' %}
                         {% set image = block.A.one() %}
                             {% if image %}
                               
                              {% endif %}
                    {% endif %}
        {% endfor %}
{% endfor %}

**Tags:** matrix, forloop
> **Comments:**
> **username_1**: You have `block.type A` twice. Is that on purpose? Also I would look int to the `switch` syntax. It's more elegant when iterating trough matrix blocks.  
> **username_0**: Yes, this part of the layout consists of two images of size A and one size B image. They are put in position by the css grid. I would like to have good control of the positions of the image since this is important to the layout of the site. That is why I would like the pick the images one by one and put them in position.  

---

## 1 answers

### Answer by username_1 on 2020-03-04. Score: 2

There is no way to determine if an image should go to the first block.type == 'A' if statement or the second one
you could write something like this:
{% switch block.type %}
    {% case 'A' %}
        {# images for both case a1 + a2. write the loop number into the class name #}
         {# your image #}
    {% case 'B' %}
        {# images for case b #}
         {# your image #}
{% endswitch %}

That's just one of lots of possibilities


---

