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 /

Is there a way to have a random background image loaded?


Go to End
Reply


12 Posts   2684 Views

Avatar
evsoul

Community Member, 36 Posts

26 January 2010 at 3:02pm

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?

Avatar
zenmonkey

Community Member, 528 Posts

29 January 2010 at 7:28am

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.

Avatar
evsoul

Community Member, 36 Posts

29 January 2010 at 11:15am

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.

Avatar
Willr

Forum Moderator, 5513 Posts

29 January 2010 at 12:11pm

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);
...

Avatar
evsoul

Community Member, 36 Posts

29 January 2010 at 12:14pm

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?

Avatar
Willr

Forum Moderator, 5513 Posts

29 January 2010 at 12:19pm

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.

Avatar
evsoul

Community Member, 36 Posts

29 January 2010 at 12:28pm

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

Avatar
evsoul

Community Member, 36 Posts

3 February 2010 at 11:48am

Edited: 03/02/2010 11:50am

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?

Go to Top