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?
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.
- Page 11(current)
- 2
- Next 10 entries
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.
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.
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);
...
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?
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.
thank you SO much!
Hopefully one day I can be as useful to the SilverStripe community as you all have been!
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?
- Page 11(current)
- 2
- Next 10 entries