Flexible Image Module

General project discussion. NOT for help questions.
Locked
webguru
Forum Members
Forum Members
Posts: 97
Joined: Thu May 08, 2014 6:18 pm

Flexible Image Module

Post by webguru »

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

http://www.projectseven.com/products/to ... 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?

Thanks!
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3268
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Flexible Image Module

Post by velden »

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.
webguru
Forum Members
Forum Members
Posts: 97
Joined: Thu May 08, 2014 6:18 pm

Re: Flexible Image Module

Post by webguru »

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.

Thanks!
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3268
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Flexible Image Module

Post by velden »

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

Code: Select all

    <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}    
      {foreachelse}
        <div class="row">
          <div class="col-sm-12">No Items</div>
        </div>
      {/foreach}
    </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:

Code: Select all

{$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
User avatar
Jo Morg
Dev Team Member
Dev Team Member
Posts: 1792
Joined: Mon Jan 29, 2007 4:47 pm

Re: Flexible Image Module

Post by Jo Morg »

velden wrote: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

Code: Select all

{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
"There are 10 types of people in this world, those who understand binary... and those who don't."
* by the way: English is NOT my native language (sorry for any mistakes...).
Code of Conduit | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge | Yet another blog about CMSMS
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
Locked

Return to “General Discussion”