1

I have images in matrix block I want to display in grid format Each raw will have three column.

Images 1 images 2 image2 Images 4 images4 image 4

I tried to used batch filter but did not work with matrix block.

 {% for block in entry.profilematrix %}
{% switch block.type %}

{% case "profilebuilder" %}

{% set debfilter = block.department %}

        {# use the variable to filter the entries #}

        {% if block.department == craft.request.lastSegment   %}






                 {% for image in block.uploadImageProfile %} 




             {% endfor %}

        {% endif %}

 {% endfor %}

  {% endfor %}
  • Unless you receive a twig error this question has nothing to do with Craft since your html might be broken (you open <divs> but you might not close them properly) so it is related to html/css. You should tell us what your problem is otherwise we have to guess what is wrong. Maybe you could explain your issue a little bit better? What works/what does not work? – Robin Schambach Jan 11 '18 at 16:15
  • thanks for the prompt reply. can you tell me how i can use the batch filter in this line a {% for image in block.uploadImageProfile %} and display images in three clumn in each row. – youme Jan 11 '18 at 16:41
  • There is actually no need for a batch filter if you have good css. As it seems this question is more about css than about Craft. You should ask about how to create a responsive grid without rows. Like that css-tricks.com/things-ive-learned-css-grid-layout/… – Robin Schambach Jan 11 '18 at 19:16
  • Sorted. I used variable to count the matrix blocks in the loop. {% set rows = 0 %} {% if rows == 3 %} </div> <div class="row"> {% set rows = 0 %} {% endif %} only css clound not create the grid – youme Jan 15 '18 at 10:17
1
{% for batch in block.images|batch(3) %}
  <div class="row">
  {% for image in batch %}
    <div class="column">
      <img src="{{ image.url }}" alt="">
    </div>
  {% endfor %}
  </div>
{% endfor %}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.