jlacsonph jlacsonph - 1 month ago 8
Twig Question

Make 3 columns per row in twig symfony while looping twig

Please help . I want to appear list of images 3 images per row while loop using twig. How do I that?

here's my code

{% for siteAdministrator in siteAdministrators[5:] %}
{% if loop.index0 is divisibleby(3) %}
<section class="row team-members-row">
<div> array </div>
</section>
{% endif %}
{% endfor %}


UPDATE:
The current result of my code is.. 1 image per row something like this.

// 1st loop
<section class="row team-members-row">
<div class="other-team-members positionrelative floatleft withdropdown">
// image 1
</div>
</section>
// 2nd loop
<section class="row team-members-row">
<div class="other-team-members positionrelative floatleft withdropdown">
// image 2
</div>
</section>
// 3rd loop
<section class="row team-members-row">
<div class="other-team-members positionrelative floatleft withdropdown">
// image 3
</div>
</section>
and so on.. 1 image per row


I want to appear images something like this.

// 1st loop
<section class="row team-members-row">
<div class="other-team-members positionrelative floatleft withdropdown">
// image 1
</div>
<div class="other-team-members positionrelative floatleft withdropdown">
// image 2
</div>
<div class="other-team-members positionrelative floatleft withdropdown">
// image 3
</div>
</section>
// 2nd loop
<section class="row team-members-row">
<div class="other-team-members positionrelative floatleft withdropdown">
// image 4
</div>
<div class="other-team-members positionrelative floatleft withdropdown">
// image 5
</div>
<div class="other-team-members positionrelative floatleft withdropdown">
// image 6
</div>
</section>

Answer

You should embrace in the if statement only the display of the section tag as follow:

{% for siteAdministrator in siteAdministrators[5:] %}
   {% if loop.index0 is divisibleby(3) %}
    <section class="row team-members-row">
{% endif %}
          <div class="other-team-members positionrelative floatleft withdropdown">
          {{siteAdministrator.name}} 
          </div>
   {% if loop.index is divisibleby(3) or loop.last %}
    </section>
   {% endif %}
{% endfor %}

Check the last element for closing the tag.

Here a working example. And this is the output:

<section class="row team-members-row">
    <div class="other-team-members positionrelative floatleft withdropdown">
    image6 
    </div>
        <div class="other-team-members positionrelative floatleft withdropdown">
    image7 
    </div>
        <div class="other-team-members positionrelative floatleft withdropdown">
    image8 
    </div>
</section>
    <section class="row team-members-row">
    <div class="other-team-members positionrelative floatleft withdropdown">
    image9 
    </div>
        <div class="other-team-members positionrelative floatleft withdropdown">
    image10 
    </div>
        <div class="other-team-members positionrelative floatleft withdropdown">
    image11 
    </div>
</section>

Hope this help

Comments