html structure conditional on matrix row counts

Question

I am using zurb foundation and a pixelandtonic matrix field. I want to do a new html row for every 3 matrix rows i.e

  {!-- something needs to wrap round this to say for every 3 rows do a new one of these
 <div class="row">
            {cf_about_us_biographies}
            <div class="four columns">
                <img src="{cf_about_us_bio_photo}">
                <ul class="accordion">
                    <li>
                        <div class="title">
                            <h5>{cf_about_us_bio_name}<br><span>{cf_about_us_bio_title}</span></h5>
                        </div>
                        <div class="content">
                            {cf_about_us_bio_biog}
                        </div>
                    </li>
                </ul>
            </div>
            {/cf_about_us_biographies}
            </div>

My brain is fried, i want someone to help me as what i have been doing is stupid!

Answer 1

Is this not a case for using {switch="||do-thing"}?

{switch='<div class="row">||'}
        {cf_about_us_biographies}
        <div class="four columns">
            <img src="{cf_about_us_bio_photo}">
            <ul class="accordion">
                <li>
                    <div class="title">
                        <h5>{cf_about_us_bio_name}<br><span>{cf_about_us_bio_title}</span></h5>
                    </div>
                    <div class="content">
                        {cf_about_us_bio_biog}
                    </div>
                </li>
            </ul>
        </div>
        {/cf_about_us_biographies}
 {switch='||</div>'}

The issue there though is if you have a number of items that isn't divisible by 3. From memory there's a useful plugin for handling this but I can't recall its name off the top of my head.

Try looking here Output matrix rows in sets of two

Answer 2

@JohnWBaxter and @foamcow - there's actually a solution for that if you don't want to have to do calculations. The basic idea is that you want to close the row, even if the number of entries is not exactly divisible by three. So you need to get a little more clever with the closing. Yes, use switch, but use it conditionally (and contain all the divs within the matrix so you don't have the wrapping markup appearing even if there are no entries):

{matrix_field}
    {switch="<div class='row'>||"}
       YOUR PER ENTRY PARKUP
    {if row_count == total_rows}</div>{/if}
    {if row_count != total_rows}{switch="||</div>"}{/if}
{/matrix_field}

If you only use the switch var as given in the first example/answer, your layout will be thrown off if you don't have a set of entries divisible by exactly 3. With my example, you are fine either way, because the switch interval is applied only when the entry is not the last entry, which when ensures that it applies at the required interval but not for the last one - the last one is applied OUTSIDE of the switch interval because there is always a last entry.

Hope that helps.