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.

Changing background on each page without tons of templates » Template Questions

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.

Template Questions /

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

Changing background on each page without tons of templates

Go to End


26 Posts   13403 Views

Avatar
miss_anthropist

Community Member, 2 Posts

22 September 2009 at 5:14am

Edited: 22/09/2009 5:16am

I've been working with SilverStripe for a week now and I am very excited about its potential - especially for a non-programmer like me!

I'm working on a site that will have a different background image on every page. Normally my sites with extensive image changes in the design have a header and footer file with a line like this in the header:

<img src=images/header_".$imagename.".png>

Then, on my page, I'd call the image I want:

$imagename = "clouds";

I've been able to work with SilverStripe themes to create templates for sections of a site (i.e. HomePage.ss, AboutUs.ss) with minor changes. This site could have well up to 30 static pages with a different photo on each page. Is there a way I could go about this without creating a template using each image?

If possible, I'd like to add a field in the CMS so my end-user could type in the name of the photo they want on the page.

Avatar
bummzack

Community Member, 904 Posts

22 September 2009 at 6:57am

Edited: 22/09/2009 6:58am

This can be accomplished quite easily:
- Add an image relation to your page ($has_one)
- Add an image upload field in the getCMSFunction, so that users can upload images for the page through the CMS
- In your template, output the image as <img> element (default) or use it's Link attribute for stuff like a dynamic CSS background.

Writing dynamic CSS Styles allows for a lot of customization from within the CMS. I already created websites where the customer can change background-color, image, link color etc. within the CMS.

Avatar
bummzack

Community Member, 904 Posts

22 September 2009 at 7:11am

Edited: 22/09/2009 7:12am

Here's some example code to get you started (since you're not a programmer)

Adding the image to the page class (eg. Page.php), by adding a $has_one relation and altering the getCMSFields method:

static $has_one = array(
	'Background' => 'Image'
);

public function getCMSFields(){
	$fields = parent::getCMSFields();
	// add the upload control for the background image to the cms
	$fields->addFieldToTab('Root.Content.Main', new ImageField('Background'));
	return $fields;
}

In the template (Page.ss), you can then add something like:

<head>
...
<style type="text/css">
	body {
		background: url('$Background.Link') repeat left top;
	}
</style>
...
</head>

This will add the background to your "body" element. Of course you can change the selector to anything you want and/or change the repeating behavior and position of the background image.

Avatar
miss_anthropist

Community Member, 2 Posts

22 September 2009 at 8:02am

Thank you so much! A lot of this seemed familiar from the Extending a Basic Site tutorial; the outline above helps me put all the pieces where they belong.

Avatar
evsoul

Community Member, 36 Posts

21 January 2010 at 9:25pm

i did this and appears to be working but I am not seeing an option in the CMS for adding a background image.. any thoughts? Maybe I'm not looking in the right place but i've looked every where in the cms for each page and see nothing.

sorry for bumping an old thread but it was incredibly relevant!

Avatar
evsoul

Community Member, 36 Posts

21 January 2010 at 9:49pm

this image for example.. i have nothing like this images tab added to my CMS interface.
http://doc.silverstripe.org/lib/exe/fetch.php?cache=cache&w=501&h=178&media=tutorial:photo.png

Avatar
Martijn

Community Member, 271 Posts

22 January 2010 at 7:20am

You have to add an ImageField in getCMSFields.


function getCMSFields() {
      $fields = parent::getCMSFields();

		$fields->addFieldToTab("Root.Content.ImageTab", new ImageField('Image')); 

      return $fields;
   }

Avatar
evsoul

Community Member, 36 Posts

22 January 2010 at 9:28am

I'm super new to php so please excuse how dumb I am when it comes to it.

If I understand correctly then are you saying to place this code:

$fields->addFieldToTab("Root.Content.ImageTab", new ImageField('Image'));

into the big block of getcms like this:

public function getCMSFields(){
$fields = parent::getCMSFields();
// add the upload control for the background image to the cms
$fields->addFieldToTab('Root.Content.Main', new ImageField('Background'));
$fields->addFieldToTab("Root.Content.ImageTab", new ImageField('Image'));
return $fields;
}

Or am I completely off? I tried this example and it didn't add anything to my CMS and I tried ?flush=1 after the admin url.

Go to Top
Go to TopReturn to top