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've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

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

Random HeaderPhoto on every page


Go to End


5 Posts   3234 Views

Avatar
Griffin

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

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

nr2 (In the Page.ss): (inline css)

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

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

Avatar
bummzack

Community Member, 904 Posts

9 October 2009 at 6:44pm

Hi

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>   

Avatar
Griffin

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

Update:
Works like a charm, thanks

Avatar
dconel

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?

Avatar
dconel

Community Member, 21 Posts

5 March 2010 at 11:39pm

I've placed the code in mysite/code.page.php & Themes/themename/templates/page.ss

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