0

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!

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}
0

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.

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.