Page 1 of 1
Gallery and Bootstrap Rows and Columns
Posted: Wed Nov 15, 2017 10:03 pm
by atdesign
Hello,
Is it possible to edit the templates (in my case the Lightbox) to use rows of 3 columns in the foreach loop?
So something like:
Code: Select all
{loop for every 3 images}
<div class="row">
{foreach from=$images item=image}
<div class="col-md-4">Image Stuff</div>
{/foreach}
</div>
{/loop}
Hope that makes sense. Thanks in advance.
Re: Gallery and Bootstrap Rows and Columns
Posted: Thu Nov 16, 2017 5:29 pm
by Rinker
Yes you can do that!
Tip use the smarty @iteration or @index in the foreach loop.
Re: Gallery and Bootstrap Rows and Columns
Posted: Thu Nov 16, 2017 6:28 pm
by atdesign
Many thanks for the tip @Rinker!
If it helps others, I was able to make it work using this in my Gallery template
Code: Select all
<div class="gallery">
<div class="row img">
{foreach from=$images item=image name='featured'}
<div class="col-md-4">
<a href="{$image->file|escape:'url'|replace:'%2F':'/'}" data-title="{$image->titlename}" data-lightbox="cmsmsgallery{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" class="img-responsive" /></a>
<h2>{$image->titlename}</h2>
<p><strong><em>{$image->fields.credits.value}</em></strong></p>
<p>{$image->comment|strip_tags|escape:'html'}</p>
</div>
{if $smarty.foreach.featured.iteration is div by 3}
</div><div class="row img">
{/if}
{/foreach}
<div class="galleryclear"> </div>
</div>
</div>
This will be super helpful in other modules as well.
Re: Gallery and Bootstrap Rows and Columns
Posted: Fri Nov 17, 2017 4:43 pm
by velden
Consider adding a check for 'div by 3 and NOT last' else you could end up having one additional, empty row.
Re: Gallery and Bootstrap Rows and Columns
Posted: Tue Nov 21, 2017 1:24 pm
by atdesign
velden wrote:Consider adding a check for 'div by 3 and NOT last' else you could end up having one additional, empty row.
Not sure I understand. Could you show me the mark up example?
Re: Gallery and Bootstrap Rows and Columns
Posted: Tue Nov 21, 2017 1:54 pm
by velden
Code: Select all
{if $smarty.foreach.featured.iteration is div by 3 && !$smarty.foreach.featured.last}
</div><div class="row img">
{/if}
or
Code: Select all
{if $image@iteration is div by 3 && !$image@last}
</div><div class="row img">
{/if}
Re: Gallery and Bootstrap Rows and Columns
Posted: Tue Nov 21, 2017 2:27 pm
by atdesign
Thanks velden!