3

I've seen this question get asked a few times, sometimes in different contexts or within different questions pertaining to particular add-ons, but I'm looking for a general solution that can be applied broadly.

With the various frameworks - Zurb Foundation being one of my favorites - or even if you roll your own, there is often a "wrapper" class that plays a role in positioning and sizing of the container elements inside it - such as your columns.

If my three columns are each an entry and I have six entries to display, how do I group my entries into threes with the wrapper class around them with a single loop (entries, matrix or playa)?

1 Answer 1

4

I see this one asked a lot and my solution seems to work very well so I thought I would abstract it and share it.

This is actually a bit easier than you might think, as long as your loop supports the native SWITCH variable - the native channel entries loop does, as does Matrix, Playa, Low Reorder and others, I'm sure.

Switch is a terrific way to insert "something" on an interval basis. All you have to do is get clever about how it's used.

With the above example, my desired final markup might be something like this:

<div class="row">
    <div class="four columns">
        My entry content for column one
    </div>
    <div class="four columns">
        My entry content for column two
    </div>
    <div class="four columns">
        My entry content for column three
    </div>
</div>
<div class="row">
    <div class="four columns">
        My entry content for column four
    </div>
    <div class="four columns">
        My entry content for column five
    </div>
    <div class="four columns">
        My entry content for column six
    </div>
</div>

And so here's how i would do it (commented so you can see what's going on)

{exp:channel:entries channel="columns" limit="6" orderby="date" sort="desc" disable="whatever|not|needed" dynamic="no"}
    {switch="<div class='row'>||"}{!-- open a new row at intervals of three entries --}
    <div class="four columns">
        My entry content for column {count}
    </div>
    {if count != total_results}{switch="||</div>"}{/if}{!-- close the row at intervals of three as long as the current entry is not the last in the loop --}
    {if count == total_results}</div>{/if}{!-- always close the open row after the last entry --}
{/exp:channel:entries}

As indicated, this works within any loop that supports the SWITCH variable - but the variables for count and total results vary according to the loop requirements. Matrix, for example, uses row_count and total_count in place of count and total_results respectively. Playa uses the same as the entries loop, as does low_reorder:entries.

This does NOT, however, compensate for formatting issues that would arise with the framework is the number of items in the loop does not divide evenly. For example, if my entries loop above contained only 5 items, the Zurb Foundation framework would position the fourth item to the left and the fifth item to the far right, since the fifth would now be the last column in its row. At least that's the default behaviour. But you can also use the switch variable to add a class to each column and then target it accordingly with other conditional CSS styling as needed.

Hope this helps!

4
  • Nice one. This is great. After not needing for months at a time, every once in a while I will forgot how to do it and have to fiddle with it. Commented May 13, 2013 at 19:19
  • Nice solution, good to see it here.
    – CreateSean
    Commented May 13, 2013 at 19:51
  • The last part of your answer " {if count != total_results}... " was great - I had a much less elegant solution to close the rows - and I just had an AHA moment. Thanks
    – JKM
    Commented May 14, 2013 at 22:03
  • Glad it helped you out! Commented May 15, 2013 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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