Hi

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?

Thanks

Simon

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 :

<?php
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.

Cheers!
Anatol