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

Changing background on each page without tons of templates


Go to End
Reply

20 Posts   5374 Views

Avatar
miss_anthropist

22 September 2009 at 5:14am (Last edited: 22 September 2009 5:16am), Community Member, 2 Posts

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
banal

22 September 2009 at 6:57am (Last edited: 22 September 2009 6:58am), Community Member, 901 Posts

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
banal

22 September 2009 at 7:11am (Last edited: 22 September 2009 7:12am), Community Member, 901 Posts

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

22 September 2009 at 8:02am Community Member, 2 Posts

Thank you so much! A lot of this seemed familiar from the [url=http://doc.silverstripe.org/doku.php?id=tutorial:2-extending-a-basic-site]Extending a Basic Site[/url] tutorial; the outline above helps me put all the pieces where they belong.

Avatar
evsoul

21 January 2010 at 9:25pm Community Member, 36 Posts

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

21 January 2010 at 9:49pm Community Member, 36 Posts

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

22 January 2010 at 7:20am Community Member, 271 Posts

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

22 January 2010 at 9:28am Community Member, 36 Posts

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