Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Random HeaderPhoto on every page

Go to End

5 Posts   2653 Views


Community Member, 4 Posts

9 October 2009 at 6:42am

Hi community,

Well i've been struggling with Silverstripe for some time now and its all lovely etc.
I wanted a nice function that retreived a random image from a specific ImageFolder.

I've search the forums and found something like this:
In my Page.php (mySite folder) i placed this:

function RandomImage()
	return DataObject::get_one("Image","ParentID = 120",false, "RAND()"); 

This, as far as i know, retrieves an image from the folder with the id '120' (which is the correct folder)

Then the css part, i've tried two things:

nr1 (in the Layout.css file):

#header-photo {
	clear: both;
	height: 200px;
	width: 790px;
	margin: 0 auto;
	/*background: #FFF url(../images/header4.jpg) no-repeat center center;*/
	background: #FFF url($RandomImage()) no-repeat center center;

The one background that is the 'normal' static one which works

This results in a blank space where the image should be.

nr2 (In the (inline css)

<div id="header-photo" style="background-image: url($RandomImage())"></div>	

This results in the same blank space at nr 1, BUT with the following text in it (without || and i did underline it) | ())"> |

Somewhere i am making a mistake (else it would work).
Like i've said i have read the forums but i just cant figure this one out.

Thanks in advance for the help


Community Member, 904 Posts

9 October 2009 at 6:44pm


The SilverStripe template engine doesn't parse CSS files, so you have to put the $RandomImage in the .ss file. If you're using the background only on one element, using inline styles is just fine. For other cases, you can also put a <style> block with additional (dynamic) styles into the html head.

You're on the right track, but your syntax is wrong. To output the image, use:
$RandomImage without the brackets. However, this will output the whole <img> tag which is not what you want for your css. So here's what you should do:

<div id="header-photo" style="background-image: url('$RandomImage.Link')"></div>   


Community Member, 4 Posts

9 October 2009 at 11:30pm

Edited: 10/10/2009 6:14am

I'll give it a try when i get home (at work now).
I'll post the result here

Works like a charm, thanks


Community Member, 21 Posts

16 January 2010 at 8:39am

I want a random header on my pages, but don't know how to use this code. Anyone?


Community Member, 21 Posts

5 March 2010 at 11:39pm

I've placed the code in mysite/ & Themes/themename/templates/

The only thing I don't know is where to place the folder with the image in it.