• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: Flexible Image Module
PostPosted: Tue Jun 13, 2017 7:36 pm 
Offline
Forum Members
Forum Members

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Flexible Image Module
PostPosted: Tue Jun 13, 2017 8:54 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 2722
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Flexible Image Module
PostPosted: Wed Jun 14, 2017 12:17 am 
Offline
Forum Members
Forum Members

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Flexible Image Module
PostPosted: Wed Jun 14, 2017 10:04 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 2722
Location: The Netherlands
Well, a fellow dev team member pointed me to a somewhat related example on his website:

Code:
    <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>


Quote:
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:
{$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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Flexible Image Module
PostPosted: Wed Jun 14, 2017 10:29 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Mon Jan 29, 2007 4:47 pm
Posts: 1661
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:
{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...).


CMSMS Docs | Before Asking For Help!
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!



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting