Conditionally output code every nth entry for Bootstrap grid

Question

I'm building a grid with Twitter Bootstrap. How do I add the closing row </div> tags after every 2 entries?

I need the HTML to look like this:

<div class="row">
  <div class="span6">...</div>
  <div class="span6">...</div>
</div> 
<div class="row">
  <div class="span6">...</div>
</div>

I think I need something like this:

<div class="row">
  {exp:channel:entries channel="channel_name" dynamic="no"}
  <div class="span4">
    ...
  </div>
  <!-- conditional here to close /.row -->
  {/exp:channel:entries}

I think I could use {switch} tag to accomplish this, but I also need a way to close the row if there are an odd number of entries as well. Is there an easy way to do this without using PHP and modulus somehow?

Answer 1

You should put the closing </row> outside your channel entries tag, to be consistent, and use a switch statement to add the middle rows every third entry:

<div class="row">
    {exp:channel:entries channel="channel_name" dynamic="no"}
        <div class="span4">
            ...
        </div>
        {switch='||</div><div class="row">'}
    {/exp:channel:entries}
</div><!-- /row -->

Note that we are using {switch='||</div><div class="row">'} here to show a row every third entry. By placing two pipes (|) at the start of the switch statement, you are essentially switching between:

• Nothing
• Nothing
• </div><div class="row">

This is the easiest way to insert html every nth element - simply by adding extra pipes to your switch statement.

Answer 2

It's a common task to want r rows of x items, and I've sometimes got myself tangled with switch and conditionals etc still finding I end up with empty or unclosed tags. I find the EEGrouper add-on http://devot-ee.com/add-ons/eegrouper is a quick and easy way to handle all cases.

Answer 3

I too might go for the {switch} method. But I would also question if using Bootstrap's CSS classes are the best way to mark up your page.

Have you considered using their LESS classes? You could then possibly keep your EE and HTML as separated from the design as this...

<section id="section-name">
    {exp:channel:entries channel="channel_name" dynamic="no"}
        <article>
            Your stuff goes here
        </article>
    {/exp:channel:entries}
</section>

Then within your stylesheet perhaps something like this...

#section-name {
    article {
        .span(2); // load GS - never used Bootstrap so may be incorrect syntax

        &:nth-child(even):after {
            .clearRow(); // call our clearRow mixin after every 2nd article which emulates ending the row class
        }
    }
}

// Our clear row mixin
.clearRow(){
    content: "";
    display: block;
    clear: left;
}

It may or may not work. But if it does it'd certainly separate your styles from your markup. Something that I dislike about Bootstrap using CSS is it's reliance on obscure classes and unnecessary syntax.

Another small win of this method is that it is marginally less for ExpressionEngine to process and by having the clearRow mixin in LESS you could apply this method on any channel and any template.

Of course it relies on a certain level of browser compliance, which is the trade-off.

Answer 4

I managed to find a simple solution as I wrote the question. This just uses a combination of {switch} and a {if count != total_results} conditional:

<div class="row">
  {exp:channel:entries channel="channel_name" dynamic="no"}
  <div class="span4">
    ...
  </div>
  {if count != total_results}
    {switch='|</div><!-- /row --> <div class="row">'}
  {/if}           
  {/exp:channel:entries}
</div><!-- /row -->

There are many other great add-ons that solve this problem in the answers below. But for me, this out-of-the-box solution is the simplest.

Answer 5

My approach to handling this issue is to use the SurgerEE addon which provides (among many other useful things) modulo operator support via a plugin call, so you can then do something like this:

<div class="row">
{exp:channel:entries channel="channel_name" dynamic="no"}
  <div class="span4">
    ...
  </div>
{if '{exp:surgeree:modulo numerator="{count}" denominator="2"}' == 0 && count == total_results}
  </div><!-- /row -->
  <div class="row">
{/if}           
{/exp:channel:entries}
</div><!--//.row-->

While in general I'd always tend to prefer solutions that don't require third party code, here I think there's a real benefit in the increased readability of your code (both for others and for yourself at a later date). {switch='||</div><div class="row">'} works and is native functionality, but is not hugely intuitive and hard to scan, whereas {exp:surgeree:modulo} is very explicit, and makes it super clear what this code is doing.

Answer 6

I'd like to add that with the Modulus Operator added to EE in 2.7.1 that this can be easily achived now with the following code, based on Bootstrap 3 (example using a Grid fieldtype for the output):

<div class="container">
    <div class="row">
    {gallery}

        {if gallery:index % 3 == 0 OR gallery:index != 0} 
            </div>
            <div class="row">
        {/if}

        <div class="col-sm-4">
            <p>{gallery:title}</p>
        </div>

    {/gallery}
    </div>

This will close the row and make a new one after every 3rd element.

Answer 7

You can do this using Will Hunting and it's mod() function. This will ensure that no blank row is included at the end of the output by checking if the $count variable is equal to total_results, and avoids outputting a blank row div if there are no results.

{exp:will_hunting:solve_pair}
    {$count=0}
    <div class="row">
        {exp:channel:entries channel="channel_name" dynamic="no"}
            {$count=$count+1}
            {!-- we're on the first item, so output our starting row div --}
            {if {$count} == 1}
                <div class="row">
            {/if}
            <div class="span4">
                content
            </div>

            {!-- close the previously open row div if this is a multiple
                 of 3, or if it is the last result --}
            {if mod({$count}, 3) == 0 || {$count} == {total_results} }
                </div>

                {!-- if there are more records left, create a new row div --}
                {if {$count} != {total_results}}
                    <div class="row">
                {/if}
            {/if}
        {/exp:channel:entries}
    </div><!-- /row -->
{/exp:will_hunting:solve_pair}