I wrote some Xslt to display a header image for a specific page. If the page does not have one uploaded it searches its parent (to keep a section the same). It continues up the content tree until if find on with a banner image, and it uses it. The root page has the default banner image used throughout the site for in the rare case a page traverses all the way to the root.
I was excited about it and wanted to share, but also looking for feedback. Is there a better/different way to do it? Can this be stramlined?
<xsl:param name ="currentPage" />
<xsl:param name ="alternateText" select="$currentPage/pageTitle" />
Notice the XPath for the src attribute - it does the trick of taking the interiorBannerImage property from either $currentPage, $currentPage's parent or the parent's parent etc. (the key here is the ancestor-or-self:: axis - check it out here).
I've also moved the width, height and alt attributes into the tag as literal attributes (the alt attribute will be overwritten if $alternateText has a value).
Xslt Recursion Parent Traversal
I wrote some Xslt to display a header image for a specific page. If the page does not have one uploaded it searches its parent (to keep a section the same). It continues up the content tree until if find on with a banner image, and it uses it. The root page has the default banner image used throughout the site for in the rare case a page traverses all the way to the root.
I was excited about it and wanted to share, but also looking for feedback. Is there a better/different way to do it? Can this be stramlined?
<xsl:param name ="currentPage" />
<xsl:param name ="alternateText" select="$currentPage/pageTitle" />
<xsl:template match="/">
<!-- start writing XSLT -->
<div id="interior-banner">
<img>
<xsl:attribute name="src">
<xsl:call-template name="bannerImage">
<xsl:with-param name="currentID" select="$currentPage/@id"/>
</xsl:call-template>
</xsl:attribute>
<xsl:if test="$alternateText != ''">
<xsl:attribute name="alt">
<xsl:value-of select="$alternateText"/>
</xsl:attribute>
</xsl:if>
<xsl:if test="$alternateText != ''">
<xsl:attribute name="alt">
<xsl:value-of select="$currentPage/@nodeName"/>
</xsl:attribute>
</xsl:if>
<xsl:attribute name="height">240</xsl:attribute>
<xsl:attribute name="width">980</xsl:attribute>
</img>
</div>
</xsl:template>
<xsl:template name="bannerImage">
<xsl:param name="currentID" />
<xsl:if test="umbraco.library:GetXmlNodeById(string($currentID))/interiorBannerImage = ''">
<xsl:if test="string($currentID) != ''">
<xsl:call-template name="bannerImage">
<xsl:with-param name="currentID" select="umbraco.library:GetXmlNodeById($currentID)/../@id" />
</xsl:call-template>
</xsl:if>
</xsl:if>
<xsl:variable name="mediaNode" select="umbraco.library:GetXmlNodeById(string($currentID))/interiorBannerImage" />
<xsl:if test="$mediaNode != ''"><xsl:value-of select="umbraco.library:GetMedia($mediaNode, 1)/umbracoFile" /></xsl:if>
</xsl:template>
I am also unable to wrap the code with 'code' style. Nor can I delete this post to update it. If you have the ability, please fix. :(
Hi Chad,
There's a couple of things you can do to streamline this - here's a shorter version:
/Chriztian
Hi Chad - this is really great thanks - I pulled the logic and used perfectly on my own site.
I use a function to call images and it makes your function very tidy
Here's the function I use from my XSLT includes folder...
If you don't use imageGen you'll need to strip that bit out, but a basic 4.6+ call to it goes like this...
Many thanks for you recursiveness :)
Neil
is working on a reply...