Jump to:

17452 Posts in 4473 Topics by 1971 members


SilverStripe Forums » Archive » How to add 'automatic' images to pages

Our old forums are still available as a read-only archive.

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

Page: 1
Go to End
Author Topic: 1281 Views
  • oneeighty
    Community Member
    2 Posts

    How to add 'automatic' images to pages Link to this post


    We're just building our first SilverStripe site and like most other sites we build at some point there is a requirement to incorporate a background image or content image dependent on the current page - i.e. if we're on page 6 show 6.jpg.

    We have written a very short and simple function which will look to check if an image for the current page exists and show this if available. If an image is not found it will next look for a parent page and finally just pull a default image. It's then called in the template with a simple block of code.

    In Page.php:

    function SmartImage($folder, $filetype) {
          $filename = 'assets/' . $folder . '/' . $this->ID . '.' . $filetype;
          $parent_filename = 'assets/' . $folder . '/' . $parent->ID . '.' . $filetype;
          if (Director::fileExists($filename)) {
             $smartimagepath = $filename;
          } elseif (Director::fileExists($parent_filename)) {
             $smartimagepath = $parent_filename;
          // to do - get top level id
          } else {
             $smartimagepath = '/assets/' . $folder . '/default.' . $filetype;
          $data = array(
             'SmartImagePath' => $smartimagepath
          return $this->customise($data);

    In Page.ss:

    <% control SmartImage(sidebar,jpg) %>
    <img src="$SmartImagePath" alt="" class="sidebar-img" />
    <% end_control %>

    Not sure if this is the best way to achieve this task in SilverStripe but it works for us. However I have a question I hope somebody can answer to further augment the code?

    At the moment the function checks for an image based on the current page id, then the parent page id and then a default. It would be ideal if we could also check for an image matching the ID of the top level parent of the current page - i.e. the section page.

    Does anybody have a suggestion on where we can retrieve this ID from?



  • Anatol
    126 Posts

    Re: How to add 'automatic' images to pages Link to this post

    Hi Simon,

    I would suggest this: in the directory /mysite/code/ add (or edit) the file Page.php; the bold type is important for what you want to achieve :

    class Page extends SiteTree {
       static $db = array(
       static $has_one = array(
          'Photo' => 'Image'
       function getCMSFields() {
          $fields = parent::getCMSFields();
          $fields->addFieldToTab("Root.Content.Image", new ImageField('Photo'));
          return $fields;


    This will add a tab called "Image" to every page where you can choose an image from the 'assets' folder.

    (Of course you can change the names to BackgroundImage or whatever you need.)

    Then in your themes folder e.g. in /themes/mytheme/templates/Layout/Page.ss add the $Photo variable wherever you want the image to appear. E.g:

    <div id="image">$Photo</div>

    Don't forget to run /db/build/?flush=1

    I did not test it in detail but it should work. I hope that's what you are looking for.


Page: 1
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.