SSbits - Home page
Site by Carbon Crayon
Submit a Post >

Tutorials - Big bits of code to help you do more

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();
}
Nick Jacobs avatar

Nick Jacobs

Nick is a freelance designer/developer based in Gisborne, New Zealand

  • Johan
    12/10/2010 8:35pm (4 years ago)

    I placed the first function in "mysite/code/page.php" and when i visit the page i get the following error:

    [User Error] Couldn't run query: SELECT "File"."ClassName", "File"."Created", "File"."LastEdited", "File"."Name", "File"."Title", "File"."Filename", "File"."Content", "File"."Sort", "File"."SortOrder", "File"."ParentID", "File"."OwnerID", "File"."ID", CASE WHEN "File"."ClassName" IS NOT NULL THEN "File"."ClassName" ELSE 'File' END AS "RecordClassName" FROM "File" WHERE ("File"."ClassName" IN ('Image','Image_Cached')) AND (ClassName "Folder" AND ParentID = SELECT ID FROM File WHERE ClassName = "Folder" AND Name = "Headers")) ORDER BY RAND() LIMIT 5 Unknown column 'Folder' in 'where clause'

    Could you please help me?

  • Mark M
    18/10/2010 5:50pm (4 years ago)

    Johan,

    I'm guessing that the "Headers" folder does exist and is in the root of your assets folder and is full of images ?

    I am guessing that this function is looking for them there - so apologies if this isn't the answer you are looking for ;)

    Regards,

    m

  • Jayne
    02/11/2010 3:14am (4 years ago)

    Hi there

    I'm experiencing the exact same problem. I have used this code many times in other sites with no problems, however this is the first time I've used it in SS 2.4.2. Perhaps that has something to do with it?

    Has anyone used this in 2.4.2 with success?

    Many thanks,

    Jayne

  • phawley
    11/11/2010 4:28am (4 years ago)

    Fellas, I was having the same problem, as well, which brought me to this post. What helped me was to swap around single and double quotes in the query.

    So change this:

    'ClassName <>
    "Folder" AND ParentID = (SELECT ID FROM File WHERE ClassName = "Folder"
    AND Name = "BannerImages")'

    to this:

    "ClassName <>
    'Folder' AND ParentID = (SELECT ID FROM File WHERE ClassName = 'Folder'
    AND Name = 'BannerImages')"

  • Peter Thompson
    07/09/2011 4:25am (3 years ago)

    Forgive the stupid question - I'm about 1.5 days into SS - where should the BannerImages folder be located?

  • Taps Cola
    29/09/2011 12:18pm (3 years ago)

    Peter, it must be located in the assets folder.

  • Geek12
    06/06/2012 1:03pm (2 years ago)

    i have tried to follow this code( the random rotating banner) for some weeks now but still cant have my images/banner rotating on my homepage. can some one help pliz!

Post a comment ...

You cannot post comments until you have logged in. Login Here.

Advertisement

Site of the Month

Find SSbits on

Top Contributers

Rank Avatar Name
1 article image Aram Balakjian
2 article image Daniel Hensby
3 article image Marcus Dalgren
4 article image Hamish Campbell
5 article image Ty Barho
6 article image Martijn van Nieuwenhoven
7 article image Darren-Lee
8 article image Roman Schmid
9 article image Matt Clegg
10 article image dalesaurus

View full leaderboard


Advertisement