1. create an image slider on the home page where each slide linked to an internal page
2. limit the number of slides to 4 regardless of the number of internal pages
3. show the images in random order
4. Use the standard CMSMS resources without loading additional modules
5. KISS principle for client to add pages and images
My solution was the following MenuManager template:
Code: Select all
{strip}
{* Get a list of the page images *}
{if $count gt 0}
{foreach from=$nodelist item=item}
{if !empty($item->image)}
{append var=one value=$item->image index='url'}
{append var=one value=$item->alias index='alias'}
{assign var='oneitem' value=$one}
{/if}
{if !empty($oneitem)}
{append var='images' value=$oneitem}
{assign var='oneitem' value=''}
{/if}
{/foreach}
{* if we have images ... *}
{if !empty($images)}
{* maximum number of images to show in the rotator *}
{assign var=num value=4}
{assign var=slidenum = 0}
{* if sort the images randomly - php return true or false *}
{if shuffle($images)}
{* slider/rotator html code here *}
<div class="camera_wrap camera_white_skin" >
{foreach from=$images item='image'}
{if $num eq $slidenum}
{break}
{/if}
<div data-src="{$image.url}" data-link="{cms_selflink href=$image.alias}" data-portrait='true' class="rotator-img" >
<div class="fadeIn camera_effected btn-learn row " >
<div class="span2 offset8">
<a class="btn btn-tlalred btn-rotator span2 offset8" href="{cms_selflink href=$image.alias}" >
Learn more <i class="icon-forward icon-white"></i>
</a>
</div>
</div>
</div>
{assign var=slidenum value=$slidenum+1}
{/foreach}
</div>
{/if}
{/if}
{/if}
{/strip}
It firstly scans through the available pages. This can be all or limited in the MenuManager tag.
Next, only if there is a page image, ie the page image field on the Options tab in Content Page Edit, it grabs the url and the page alias.
When there is an array of pages with images, it uses the PHP function 'shuffle' to randomize the order. This either returns true or false. When true, it assigns the maximum number of slides to show. In the above example, 4.
Then it's simply a matter of adding your slider code. This example uses the jquery.camera.js script from http://www.pixedelic.com/plugins/camera/ for responsive images with HTML5 and the site was built with CMSMS in combination with Twitter Bootstrap, http://twitter.github.com/bootstrap/index.html.
psy
