Jump to:

3432 Posts in 1025 Topics by 865 members

Template Questions

SilverStripe Forums » Template Questions » Random HeaderPhoto on every page

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

Page: 1
Go to End
Author Topic: 1993 Views
  • Griffin
    Avatar
    Community Member
    4 Posts

    Random HeaderPhoto on every page Link to this post

    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

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Random HeaderPhoto on every page Link to this post

    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>

  • Griffin
    Avatar
    Community Member
    4 Posts

    Re: Random HeaderPhoto on every page Link to this post

    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

  • dconel
    Avatar
    Community Member
    21 Posts

    Re: Random HeaderPhoto on every page Link to this post

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

  • dconel
    Avatar
    Community Member
    21 Posts

    Re: Random HeaderPhoto on every page Link to this post

    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.

    1993 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.