Gallery and Bootstrap Rows and Columns

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
atdesign
Forum Members
Forum Members
Posts: 38
Joined: Fri Feb 24, 2012 12:57 pm

Gallery and Bootstrap Rows and Columns

Post 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.
Rinker
Forum Members
Forum Members
Posts: 65
Joined: Fri May 27, 2011 9:37 am

Re: Gallery and Bootstrap Rows and Columns

Post by Rinker »

Yes you can do that!

Tip use the smarty @iteration or @index in the foreach loop.
atdesign
Forum Members
Forum Members
Posts: 38
Joined: Fri Feb 24, 2012 12:57 pm

Re: Gallery and Bootstrap Rows and Columns

Post 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">&nbsp;</div>
</div>
</div>
This will be super helpful in other modules as well.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Gallery and Bootstrap Rows and Columns

Post by velden »

Consider adding a check for 'div by 3 and NOT last' else you could end up having one additional, empty row.
atdesign
Forum Members
Forum Members
Posts: 38
Joined: Fri Feb 24, 2012 12:57 pm

Re: Gallery and Bootstrap Rows and Columns

Post 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?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Gallery and Bootstrap Rows and Columns

Post 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}
https://www.smarty.net/docs/en/language ... perty.last
atdesign
Forum Members
Forum Members
Posts: 38
Joined: Fri Feb 24, 2012 12:57 pm

Re: Gallery and Bootstrap Rows and Columns

Post by atdesign »

Thanks velden!
Post Reply

Return to “Modules/Add-Ons”