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!
Flexible Image Module
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.
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.
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.
Thanks!
I would really like the gallery to show 4 columns per row.
Thanks!
Re: Flexible Image Module
Well, a fellow dev team member pointed me to a somewhat related example on his website:
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
<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>
It's for 3 items for row. So change accordingly to get 4 items per row.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 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
Re: Flexible Image Module
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...velden wrote:It's part of the solution as you will need to do some checks and 'math' for the last 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}
"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 Condut | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
DevMoot 2023 in Cynwyd, Wales: I was there!
* by the way: English is NOT my native language (sorry for any mistakes...).
Code of Condut | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
DevMoot 2023 in Cynwyd, Wales: I was there!