Jump to:

3444 Posts in 1030 Topics by 871 members

Template Questions

SilverStripe Forums » Template Questions » Is there a way to have a random background image loaded?

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

Page: 1 2
Go to End
Author Topic: 2609 Views
  • evsoul
    Avatar
    Community Member
    36 Posts

    Is there a way to have a random background image loaded? Link to this post

    If I had say 6 big background images is there a way to have the page call to one randomly?
    Also if it's possible, is there also a way to still position it like you would with css?

  • zenmonkey
    Avatar
    Community Member
    528 Posts

    Re: Is there a way to have a random background image loaded? Link to this post

    If you want control over the BG image you could create a DataObject to hold them then write a function to return one at random. Then use inline CSS in your Page.ss to define the background image using the random function you just wrote.

    The other option is to create a function that returns a random number between 1 and 6 in your page_controller class. Then in the head of your Page.ss create an if block that checks the random number.

    <% if RandomNumber == 1 %>
    background-image:url(xxxxx);
    <% else_if RandomNumber ==2 %>
    background-image:url(xxxxx);
    etc.
    <% end_if %>

    Its not pretty but it'll work. No Matter what that bit of CSS will have to be defined in the head instead of an external CSS. I do something similar to change the color of hover text based on product color.

  • evsoul
    Avatar
    Community Member
    36 Posts

    Re: Is there a way to have a random background image loaded? Link to this post

    So then I would want to put this in my head like:

    <head>
    <style>
    <% if RandomNumber == 1 %>
    background-image:url(xxxxx);

    <% else_if RandomNumber ==2 %>
    background-image:url(xxxxx);

    <% else_if RandomNumber ==3 %>
    background-image:url(xxxxx);

    <% else_if RandomNumber ==4 %>
    background-image:url(xxxxx);

    <% else_if RandomNumber ==5 %>
    background-image:url(xxxxx);
    <% end_if %>
    </style>
    </head>

    Is that the right direction? At first I wanted to have a unique image for each page but the server didn't like the code that seemed like it should have worked and I cannot figure out why it wouldn't work..
    see: http://silverstripe.org/template-questions/show/269388?showPost=277639 for what I mean. That would have been preferred but if this generates a nice set of random images then it should be fine.

  • Willr
    Avatar
    Forum Moderator
    5508 Posts

    Re: Is there a way to have a random background image loaded? Link to this post

    Well you could name your images background-1.jpg, background-2.jpg then make a function which returns a random number (1 - 6).

    function RandomBackgroundNumber() {
    return rand(1, 6);
    }

    // in the template
    background: url(../images/background-{$RandomBackgroundNumber}.jpg);
    ...

  • evsoul
    Avatar
    Community Member
    36 Posts

    Re: Is there a way to have a random background image loaded? Link to this post

    Do you mean to use that code instead of the last poster's suggestion?
    Excuse me if I seem incredibly lost! Because I am haha, I know design but not php/programming in the slightest.

    Where would I place that function code?

  • Willr
    Avatar
    Forum Moderator
    5508 Posts

    Re: Is there a way to have a random background image loaded? Link to this post

    Yes instead of. You would put that function code in your mysite/code/Page.php in either the Page class or the Page_Controller class. Both should work fine.

  • evsoul
    Avatar
    Community Member
    36 Posts

    Re: Is there a way to have a random background image loaded? Link to this post

    thank you SO much!
    Hopefully one day I can be as useful to the SilverStripe community as you all have been!

  • evsoul
    Avatar
    Community Member
    36 Posts

    Re: Is there a way to have a random background image loaded? Link to this post

    sorry but I am unable to get the background images to display.
    I put the function in as:

    class Page_Controller extends ContentController {
       
       public function init() {
          parent::init();

          // Note: you should use SS template require tags inside your templates
          // instead of putting Requirements calls here. However these are
          // included so that our older themes still work
          Requirements::themedCSS("layout");
          Requirements::themedCSS("typography");
          Requirements::themedCSS("form");
       }
       
       function RandomBackgroundNumber() {
       return rand(1, 3);
       }

    and the css in Page.ss as:

       <head>
          <% base_tag %>
          $MetaTags
          <!--[if IE 6]>
             <style type="text/css">
                @import url(themes/carreramarble/css/ie6.css);
             </style>
          <![endif]-->
          <!--[if IE 7]>
             <style type="text/css">
                @import url(themes/carreramarble/css/ie7.css);
             </style>
          <![endif]-->
          <style type="text/css">
           body { background: url(../images/background-{$RandomBackgroundNumber}.jpg) 20% 20% no-repeat; }
          </style>
       </head>

    and I named each background image as background-1.jpg background-2.jpg background-3.jpg (only going with 3 backgrounds for now).

    can you spot anything I am doing incorrectly here?

    2609 Views
Page: 1 2
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.