Question

I am using smarty and bootstrap,

I am building an image gallery so my markup ends up being as posted below.

I know I can loop over my categories as {foreach $categories as $category}{/foreach}
But as you can see by the markup posted below I need to wrap the in groups of four.
That’s the part I don’t know how to do.

Also, note that there may not always be a multiple of four, e.g. there could be 15 categories.

How should I do this?

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail">
                <a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>

        <li class="span3">
            <div class="thumbnail">
                <a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
    </ul>
</div>

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail">
                <a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail">
                <a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>

        <li class="span3">
            <div class="thumbnail">
                <a href="#" class="thumbnail"><img src="http://placehold.it/260x180" alt=""></a>

                <div class="caption">
                    <h3>Thumbnail label</h3>

                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

                    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
                </div>
            </div>
        </li>
    </ul>
</div>

Answer 1

You can use name for the foreach loop and then check the iteration number, something like this:

{foreach from=$array item=var name=myloop}

    {if $smarty.foreach.myloop.iteration % 4 == 1}
        {* this is the first in a group of four *}
    {elseif $smarty.foreach.myloop.iteration % 4 == 0}
        {* this is the last in a group of four *}
    {else}
        {* this is the second or the third *}
    {/if}

{/foreach}

Read through the documentation of foreach for more details. Specifically look at iteration and index.