How to wrap 3 channel entries with a specific div

Question

I want to wrap a div class = row around every three channels entries. How can I do that?

{exp:channel:entries channel="boite_a_outils" disable="member_data|trackbacks|comments" dynamic="off" orderby="title" sort="asc" {triggers:entries}}
            {if no_results}  <p>Aucun lien relié à cette catégorie.</p>  {/if}
            {if count == 1 OR count == 4}<div class="row">{/if}
            <div class="col-xs-12 col-sm-4 text-center wrap-boite-a-outil">
                <h4>{title}</h4>

                <a href="{lien}" title="{title}" class="button">Lien</a>
            </div>
            {if count == 3 OR count == 6}</div>{/if}
        {/exp:channel:entries}

This is what I have so far, but I don't want this option, I want it to be dynamic. Right now, as you can see in my code, I check count if it's equal to 1 or 4...how can I make this dynamic?

Thx!

Answer 1

You can use the modulus operator, introduced on version 2.9, which returns the remainder of a division.

  {if count = 1}
    <div class="row">
  {/if}
      <div class="col-xs-12 col-sm-4 text-center wrap-boite-a-outil">
          <h4>{title}</h4>
          <a href="{lien}" title="{title}" class="button">Lien</a>
      </div>
  {if count % 3 == 0 AND count != total_results}
    </div>
    <div class="row">
  {/if}
  {if count = total_results}
    </div>
  {/if}

This code will close every third entry with a </div><div class="row">.

Or, if you have to use an older version, try the switch variable:

  {if count = 1}
    <div class="row">
  {/if}
      <div class="col-xs-12 col-sm-4 text-center wrap-boite-a-outil">
          <h4>{title}</h4>
          <a href="{lien}" title="{title}" class="button">Lien</a>
      </div>
  {if count != total_results}
    {switch="||</div><div class='row'>"}
  {/if}
  {if count = total_results}
    </div>
  {/if}

Answer 2

You need to use the

{switch}

tag in your channel entries loop. You use pipes to separate what you want outputted. Here is an example:

{exp:channel:entries channel="boite_a_outils" disable="member_data|trackbacks|comments" dynamic="off" orderby="title" sort="asc" {triggers:entries}}

    {switch="<div class='row'>||"}

        Your entry content stuff here, {title}, {link}, etc...

    {if count != total_results}{switch="||</div>"}{/if}
    {if count == total_results}</div>{/if}

{/exp:channel:entries}

See those pipes in the switch tag? Since they have empty content between them, they output nothing on those loop counts. So for this tag:

{switch="<div class='row'>||"}

it outputs the first time

<div class='row'>

and then blank the second and third, then repeats.

This one:

{if count != total_results}{switch="||</div>"}{/if}

Outputs nothing the first two loops, then

</div>

the third time, then repeats. (The if conditional makes sure we don't double output

</div>

if our last row has three entries).

And lastly,

{if count == total_results}</div>{/if}

This makes sure that if we do end early (only two entries on last row), we still close the tag properly.