Tuesday, November 27, 2007

Changeable headers using the media picker

A project we’re currently working on needs to have interchangeable header images. The theory is to set the header image on the parent page and then unless a template is specified for the page, it should use one of it’s ancestor’s.

Umbraco as a nice control called a “Media Picker” which I felt was perfect for the job as it meant you could easily share header images across the site and it also made sense from a user perspective to have a “Header Images” folder to choose from. The issue from my point of view was how to traverse up the tree until it found a header image to use. Imagine the following site map:

-Home
     -Products
          -Category
               -Product details (Custom header image)

If you’re on the products/category page it should display the header image from Home but when you’re on the product details page it needs to show the specified header image.

So how do you do it? It turns out it’s (fairly) simple using XSLT. The first issue I ran into was getting the URL of the media file from the media picker control, Umbraco offers a useful function to do this for you (well almost!). Using the function umbraco.library:GetMedia you are able to get the details on the file based on the media item id but it includes everything so you then need to use a little XSLT to select the attribute “umbracoFile”:

That should give you something along the lines of “/imgs/somefolder/somefile.jpg”

Now how can you traverse up the tree to get the data? Thanks to Morten Bock/Casey Neehouse for helping me understand this XSLT, but the following code should give you the URL of the nearest media item in the tree:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp " "> ]>

<...>

<xsl:stylesheet 
        version="1.0" 
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
        xmlns:msxml="urn:schemas-microsoft-com:xslt"
        xmlns:umbraco.library="urn:umbraco.library"
        exclude-result-prefixes="msxml umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>

<xsl:template match="/">
    <xsl:choose>
        <xsl:when test="$currentPage/ancestor-or-self::node [string(data[@alias='pageBanner'])!=''][1] /data[@alias='pageBanner'] != ''">
            <xsl:value-of select="umbraco.library:GetMedia($currentPage/ancestor-or-self::node [data[@alias='pageBanner']!=''][1] /data[@alias='pageBanner'],'false')/data [@alias = 'umbracoFile']"/>  
        </xsl:when>
        <xsl:otherwise>
            <!-- The URL of the default banner just incase the user removes the homepage banner (would be better as a parameter) -->
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>

</xsl:stylesheet>

Then add a macro to your project and you’re done :). You can see it in action on the new Lucy Switchgear website if you're interested, it's currently being written so it's bound to be a little rough around the edges but do let me know what you think. Our remit was to improve the CMS they had in place making it easier to manage the site and also sort out a few major issues from a SEO perspective. Although altering the design wasn’t part of the initial brief I think you’ll agree the facelift we’ve given the site is for the better (even if it’s just from a usability point of view).

Changeable headers using the media picker

Useful Links:            Comments [8]  Trackback

Tags: The Site Doctor | Umbraco | Web Development

Thursday, February 28, 2008 2:57:03 PM (GMT Standard Time, UTC+00:00)

Hi

Thanks for the inforative article. Please excuse my XSLT ignorance, but I have tried to implement your code in my site, and instead of displaying the image in my banner, the XSLT is displaying a path to the image - i.e. "/media/2389/header_mid2.jpg". I am gathering the output needs to be placed inside some img tags, which I will attempt to do in the interim.

Otherwise thanks for the article, as this is exactly what my client wanted!

Andrew de Klerk

Friday, February 29, 2008 1:29:14 PM (GMT Standard Time, UTC+00:00)

Hi Andrew,

Sorry yes, this only produces the file path as I then updated a CSS class -an img tag will also work just as well :)

Tim

Tim Gaunt

Monday, May 05, 2008 3:29:31 PM (GMT Daylight Time, UTC+01:00)

Hi Simon,

Thanks for the post, this code does just that :). The select statement selects "ancestor-or-self" so it will navigate up the XML until it finds a value and uses that :)

HTH

Tim

Tim Gaunt

Thursday, June 19, 2008 11:54:00 PM (GMT Daylight Time, UTC+01:00)

thanks for this code......but when i use the default option (otherwise) it give me an error...."Error parsing XSLT file"...why???

lore

Saturday, June 21, 2008 12:23:45 AM (GMT Daylight Time, UTC+01:00)

Hi Lore,

The issue is actually with GetMedia which expects an int. The error is thrown when it tries (and fails) to validate the method.

HTH

Tim

Tim Gaunt

Thursday, May 21, 2009 9:08:37 AM (GMT Daylight Time, UTC+01:00)

Hi Joe,

Are you running on v4? I've heard rumours that it doesn't work on v4. I've not had a chance to look into it yet but will be migrating one of our sites that uses it shortly.

Tim

Tim