Jump to:

3392 Posts in 976 Topics by 852 members

Template Questions

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

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

Page: 1 2 3
Go to End
Author Topic: 4729 Views
  • miss_anthropist
    Avatar
    Community Member
    2 Posts

    Changing background on each page without tons of templates Link to this post

    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.

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Changing background on each page without tons of templates Link to this post

    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.

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Changing background on each page without tons of templates Link to this post

    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.

  • miss_anthropist
    Avatar
    Community Member
    2 Posts

    Re: Changing background on each page without tons of templates Link to this post

    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.

  • evsoul
    Avatar
    Community Member
    36 Posts

    Re: Changing background on each page without tons of templates Link to this post

    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!

  • evsoul
    Avatar
    Community Member
    36 Posts

    Re: Changing background on each page without tons of templates Link to this post

    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

  • Martijn
    Avatar
    Community Member
    271 Posts

    Re: Changing background on each page without tons of templates Link to this post

    You have to add an ImageField in getCMSFields.

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

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

    return $fields;
    }

  • evsoul
    Avatar
    Community Member
    36 Posts

    Re: Changing background on each page without tons of templates Link to this post

    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.

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