CMS Made Simple Forums

Flexible Image Module
Page 1 of 1

Author:  webguru [ Tue Jun 13, 2017 7:36 pm ]
Post subject:  Flexible Image Module

I'm looking for a module that will put a flexible columnar/row layout of images on a page, dynamically, similar to this: ... roster.htm

This widget will work in CMSMS, but if the client wants to add more images, he can't do it himself.

I was hoping it could just pull from whatever images might be in a folder.

Anyone know of one?


Author:  velden [ Tue Jun 13, 2017 8:54 pm ]
Post subject:  Re: Flexible Image Module

Of course this is possible but you need to setup the logic.

Pseudo code:

if count of images is dividable by 4 then it's simple
else if remainder is 3 then last row has 3 images; last one is large
else if remains is 2 then last row has 2 images; both large
else last row has one image; think of a size

hint: you will probably need the modulo operator to make this work.

It doesn't really matter what module you use (LISE, Gallery, ...).

And regardless what module you use I think it's a good idea to use CGSmartImage for the resizing part.

Author:  webguru [ Wed Jun 14, 2017 12:17 am ]
Post subject:  Re: Flexible Image Module

Thanks for the info. The gallery will work, but can you shed some light on the modulo operator?

I would really like the gallery to show 4 columns per row.


Author:  velden [ Wed Jun 14, 2017 10:04 am ]
Post subject:  Re: Flexible Image Module

Well, a fellow dev team member pointed me to a somewhat related example on his website:

    <div class="container">
      {foreach $items as $item}
        {if ($item@index is div by 3) || $item@first}<div class="row">{/if}
          <div class="col-sm-4">.col-sm-4</div>
        {if ($item@iteration is div by 3) || $item@last}</div>{*row close*}{/if}   
        <div class="row">
          <div class="col-sm-12">No Items</div>

Here is the simplest construct I can think of to generate Bootstrap grids in Smarty.

It's pretty simple and it works for any construct. Just adjust for the number of columns you need. This construct takes advantage of the difference between @index and @iteration:

@index is zero based;
@iteration is one based;

Meaning that ($item@iteration is div by 3) will always close row divs opened by ($item@index is div by 3). Then all we have left is to open a row on the 1st cycle and close a row on the last cycle even if incomplete i.e. having only one or two columns.

It's for 3 items for row. So change accordingly to get 4 items per row.
It's part of the solution as you will need to do some checks and 'math' for the last row.

BTW. there are multiple syntaxes for the modulo thing in smarty:

{$item@index is div by 4}
{$item@index % 4 == 0}

For you some relevant checks could be:

{$item@total % 4 == 0} // last column will contain 4 images
{$item@total % 4 == 3} // last column will contain 3 images
{$item@total % 4 == 2} // last column will contain 2 images
{$item@total % 4 == 1} // last column will contain 1 image

obviously $item should be replaces with proper variable name

Author:  Jo Morg [ Wed Jun 14, 2017 10:29 am ]
Post subject:  Re: Flexible Image Module

velden \velden:
It's part of the solution as you will need to do some checks and 'math' for the last row.
Actually there is no need for checks or math for the last row. With this solution the HTML is cleanly closed, no extra divs needed. Just make sure the classes match the number of columns per row...
PS: this is, if you are using a css framework similar to Bootstrap or Foundation of course. Also to know which image is last just check
{if $item@last} ... {/if}

PPS: I missed the bit of the last images having to have different sizes, in that case, yes velden is absolutely right! Sorry about that... :P

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group