Getting an image from a sub level pages top level parent.

Quite a simple one this time, but something I feel is worth posting up. On a recent project, I needed to add the ability for the site editors to be able attach an image to any page on the site that sits at the root level of the Site Tree. Any children (grandchildren, etc) of these pages however had to also inherit this image.

After a bit of searching, I found you could easily do this using the Level() method. Here is how I went about this: 

page class

class Page extends SiteTree {
    public static $has_one = array(
        'HeaderImage' => 'Image'
    );

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

        $fields->addFieldToTab('Root.Content.Misc', new ImageField('HeaderImage','Image to appear in header'));

        return $fields;
    }
}

Now this relationship has been added, and the new field added to the CMS, run a /dev/build/ and rebuild the database.

your template

Now you can go about attaching images to your top level pages. Once you have done this, you can then get all children of that page to inherit the image by adding the following to your template:

to render a complete image tag:

$Level(1).HeaderImage

to just get the url:

$Level(1).HeaderImage.URL

to render as a background image:

<div style="background-image: url('$Level(1).HeaderImage.URL')">
    ...
</div>

That is pretty much it. Using the Level() method retrieves a full page object for that level, so it is also possible to use methods and variables such as:

• Title
• Link
• URL
• etc...