Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-04T16:26:40.230Z
Answers.LastActivityDate: 2020-03-04T16:26:40.230Z
Answers.UserDisplayName: KSPR
Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-04T09:37:52.973Z
Comments.Text: 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.
Comments.UserDisplayName: KSPR
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-04T14:00:31.913Z
Comments.Text: 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.
Comments.UserDisplayName: analog junkie
Tags: <matrix><forloop>
Title: Need help with filling matrix images into CSS grid
ThreadText: # 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 %}
                                <li class="cellA1"> <img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /> </li>
                                {% endif %}
                      {% endif %} 
  
                      {% if block.type == 'A' %}
                           {% set image = block.A.one() %}
                               {% if image %}
                                <li class="cellA2"> <img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /></li>
                                {% endif %}
                      {% endif %}
  
                      {% if block.type == 'B' %}
                           {% set image = block.A.one() %}
                               {% if image %}
                                <li class="cellB1"> <img src="{{ image.getUrl() }}"  alt="{{ image.title }}" /></li>
                                {% 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 #}
          <li class="cellA{{ loop.index }}"> {# your image #}</li>
      {% case 'B' %}
          {# images for case b #}
          <li class="cellA1"> {# your image #}</li>
  {% endswitch %}
  
  ```
  
  That's just one of lots of possibilities
  
  
  ---
  
  