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.

Template Questions /

Random HeaderPhoto on every page


Reply


5 Posts   2064 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
banal

Community Member, 901 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.