Working with banners

Most of the sites I work on are for corporate/business clients and there is not typically a lot of fancy motion graphics going on. I do like to ensure there is some dynamic element going on, just to provide a bit of interest and one of the simplest ways to achieve this is by some variation of the random/rotating banners scenario. Of course this could equally apply to other parts of the page, not just banner graphics.

Over the course of a few projects, trawling the SS forums and hacking together my own interpretations, I have ended up with a few different ways of doing this in SilverStripe.

A random rotating banner

This function gets a set of random banners from a specified folder - in this case BannerImages
function RandomBanners(){ return DataObject::get('Image', 'ClassName <> "Folder" AND ParentID = (SELECT ID FROM File WHERE ClassName = "Folder" AND Name = "BannerImages")','RAND()','','5'); } 

In the template I then cycle through each of the images in the folder marking up the HTML as required by the the excellent jQuery cycle plugin (http://malsup.com/jquery/cycle/) which is what I use for the cycling of frames.

<div id="banner" > <div style="display:none" id="bannerimgs"> <% control RandomBanners %> <img src="$URL" alt="" width="930" height="200"/ > <% end_control %> </div> </div> 

Note that I hide the banner images until jQuery loads, to get around having all the images display at once right at the start. I then initialise the jQuery Cycle plugin mentioned above inside the innit() function of the Page_Controller:
Requirements::customScript(" jQuery(document).ready(function(){ jQuery('#bannerimgs').cycle({ delay: 5000, speed: 2000 }); jQuery('#bannerimgs').show(); });" );

You should now have a lovely rotating banner using random images from a folder.

A single random Banner

You may also want to only have a single banner without the jQuery rotation but still randomly picked. To achieve this forst create a new function to just grab a single image:
function OneRandomBanner(){ return DataObject::get('Image', 'ClassName <> "Folder" AND ParentID = (SELECT ID FROM File WHERE ClassName = "Folder" AND Name = "BannerImages")','RAND()','','1'); }

 

Then in the template add the image as a background to the div (note. this will not validate as XHTML):
<div id="banner" style="background-image:url(<% control OneRandomBanner %>$URL<% end_control %>);"></div>

Variations on Image Getter functions

Here are a couple of slightly different way of retrieving the folder.

This function grabs a single image based on it's parent folder's ID:

public function RandomImage(){ return DataObject::get_one("Image","ParentID = 94",false, "RAND()"); }
While this function uses the folders name:
 public function getHomePageImages(){ $img_dir = DataObject::get_one("Folder", "Name = 'HomepageSlide'"); $randImg = ( $img_dir->ID ) ? DataObject::get("Image", "ParentID = $img_dir->ID","RAND()",null,8 ) : false; return $randImg; }
or more usefully you can pass in the folder name:
function getRandomImage($imgdir){ $img_dir = DataObject::get_one("Folder", "Name = \"$imgdir\""); $randImg = ( $img_dir->ID ) ? DataObject::get_one("Image", "ParentID = $img_dir->ID", true, "RAND()" ) : false; return $randImg; } 

Getting the banner from the top level parent

Often you may want to only set the banner for the top level 'section' page and have it passed down to all it's children. The simlest way to do this is by using the level(1) function on the current page and then calling the appropriate function on the top level page like so:
public function GetTopBannerImage(){ return $this->Level(1)->BannerImage(); }

About the Author