Forum

Thread tagged as: Gallery

Gallery album images list: Wrap every 4 images in a DIV

I am using the Gallery application and to output the images in an album I have the following layout (example with 9 images):

<div class="row12">
    <div class="col3"><img /></div>
    <div class="col3"><img /></div>
    <div class="col3"><img /></div>
    <div class="col3"><img /></div>
</div>
<div class="row12">
    <div class="col3"><img /></div>
    <div class="col3"><img /></div>
    <div class="col3"><img /></div>
    <div class="col3"><img /></div>
</div>
<div class="row12">
    <div class="col3"><img /></div>
</div>

The number of images is dynamic. They should always be wrapped in a .row12-container in groups of 4. How can I make sure that the images are always wrapped in a .row12-container, even if the number of images is not a multiple of 4?

Currently I have this:

<perch:every nth-child="4n+1">
    <div class="row12">
</perch:every>
<div class="col3">
    <img src="<perch:gallery id="small" />" />
</div>
<perch:every count="4">
    </div>
</perch:every>
<perch:after>
    </div>
</perch:after>

This works perfectly, unless the number of images is a multiple of 4. In that case, there are two closing </div> at the end, because the last image matches both the conditionals at the end ("count = 4" and it's also the last one, so the "after" conidition is also true).

Any pointers?

Louis Bataillard

Louis Bataillard 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Only close the div before opening a new one.

<perch:every nth-child="4n+1">
    <perch:if exists="perch_item_first"><perch:else /></div></perch:if>
    <div class="row12">
</perch:every>
<div class="col3">
    <img src="<perch:gallery id="small" />" />
</div>
<perch:after>
    </div>
</perch:after>

Great, thanks, I was looking for something like "perch_item_first" but couldn't find it.