CMS Made Simple Forums

Posted: **Fri Sep 13, 2013 11:43 pm**

Cms Version: 1.11.7
Installed Modules:
CMSMailer: 5.2.1
CMSPrinting: 1.0.4
FileManager: 1.4.3
MenuManager: 1.8.5
FormBuilder: 0.7.3
ModuleManager: 1.5.5
News: 2.12.12
Search: 1.7.8
ThemeManager: 1.1.8
TinyMCE: 2.9.12
Gallery: 1.6.1

Bootstrap: 2.3.2

Hello,
I am trying to figure out how to integrate swipebox, http://brutaldesign.github.io/swipebox/ with Gallery. The goal is to allow the website admin to simply upload photos to the Gallery directory so they automatically display using swipebox as the feature for viewing the photos on pc and mobile devices.

I am also using bootstrap 2.3.2 with a fluid, responsive layout. Each row of photos in the Gallery is wrapped in

Code: Select all

<div class="row-fluid"></div>

I don't know how to code the logic in the gallery template to check for # of photo's and then to output a new div class="row-fluid"></div> for every 6 photos returned.

Please advise....

Thanks!

Posted: **Sat Sep 14, 2013 4:50 pm**

I don't know how to code the logic in the gallery template to check for # of photo's and then to output a new div class="row-fluid"></div> for every 6 photos returned.

Give the foreach loop a name, in the example below it's named 'loop'

Then use the mod operator '%' to check if it's the 6th, 12th etc.

The example below should do that (changed it a little, so test it).

Code: Select all

{foreach from=$images item=image name=loop}
  {if $smarty.foreach.loop.index % 6 == 0}
    <div class="row-fluid">
  {/if}
	<div class="img {cycle values="first,second,third,forth, fifth, sixth"}">
<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}{if !empty($image->comment)}<br /><em>{$image->comment|strip_tags|escape:'html'}<em>{/if}" rel="lightbox[{$galleryid}]"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}"/></a>
	</div>
  {if $smarty.foreach.loop.index % 6 == 5 || $smarty.foreach.loop.last}
    </div>
  {/if}
{/foreach}

Explanation:

Code: Select all

  {if $smarty.foreach.loop.index % 6 == 0}
    <div class="row-fluid">
  {/if}

Loop index starts at 0.
0%6==0 so before the first image an opening div tag is created
6%6==0, 12%6==0 etc, so before the 7th, 13th, 19th image a new opening div is created.

Code: Select all

{if $smarty.foreach.loop.index % 6 == 5 || $smarty.foreach.loop.last}
    </div>
  {/if}

5%6==5, 11%6==5, 17%6==5 etc. So after the 6th, 12th, 18th image a closing div is created. Closing div is also created if the last image is just displayed.

Code: Select all

<div class="img {cycle values="first,second,third,forth, fifth, sixth"}">

Bonus: {cycle} cycles through all the values. Don't think you need it, but I did in this example, to be able to set custom margins per 'column'.

Posted: **Sat Sep 14, 2013 10:39 pm**

Thanks velden! That did the trick.

CMS Made Simple Forums

[SOLVED] Integrating Swipebox with CMSMS Gallery

[SOLVED] Integrating Swipebox with CMSMS Gallery

Re: Integrating Swipebox with CMSMS Gallery

Re: Integrating Swipebox with CMSMS Gallery