WORKING WITH MEDIA
Working with media and XSLT is a bit specialized. It relies heavily on the use of XSLT extensions because media is not cached or treated the same as standard content nodes are in Umbraco. A media item has several properties, as discussed in Chapter 2. Most commonly, you want to use XSLT to output a media item that someone selected as part of the content entry using the Media Picker data type, as shown in Figure 11-3.
If you queried the FAQ node in this case to get the selected media item, all you would get back is the media node Id. Listing 11-2 shows an extract of the FAQ node as it would come back to you when you query for it in Listing 11-3.
LISTING 11-2: FAQ Node from Cache
<FAQ id=“1057” parentID=“1055” level=“3” writerID=“0” creatorID=“0”
nodeType=“1053” template=“0” sortOrder=“2” createDate=“2010-11-18T07:08:03”
updateDate=“2011-01-21T17:03:17” nodeName=“How do I add a page?” urlName=“how-
do-i-add-a-page” writerName=“Administrator” creatorName=“Administrator”
path=“-1,1048,1055,1057” isDoc=“”>
<author>Nik</author>
<category><![CDATA[2]]></category>
<screenshot>1091</screenshot>
<question><![CDATA[
<p>I was just wondering how I might add a page to the backend?</p>
]]></question>
<answer><![CDATA[
<p>d</p>
]]></answer>
</FAQ>
LISTING 11-3: OutputMediaId.xslt
<?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”
xmlns:Exslt.ExsltCommon=“urn:Exslt.ExsltCommon”
xmlns:Exslt.ExsltDatesAndTimes=“urn:Exslt.ExsltDatesAndTimes”
xmlns:Exslt.ExsltMath=“urn:Exslt.ExsltMath”
xmlns:Exslt.ExsltRegularExpressions=“urn:Exslt.ExsltRegularExpressions”
xmlns:Exslt.ExsltStrings=“urn:Exslt.ExsltStrings”
xmlns:Exslt.ExsltSets=“urn:Exslt.ExsltSets”
xmlns:umbusersguide.library=“urn:umbusersguide.library”
exclude-result-prefixes=“msxml umbraco.library Exslt.ExsltCommon
Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions
Exslt.ExsltStrings Exslt.ExsltSets umbusersguide.library “>
<xsl:output method=“xml” omit-xml-declaration=“yes”/>
<xsl:param name=“currentPage”/>
<xsl:template match=“/”>
Media: <xsl:value-of select=“$currentPage/screenshot” />
</xsl:template>
</xsl:stylesheet>
The result from Listing 11-3 is simply 1091. In this case, what you want to do is return this output as an image to the page. Listing 11-4 shows you how to do this using GetMedia(), the XSLT extension method from the Umbraco library.
LISTING 11-4: OutputMediaAsImage.xslt
<?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”
xmlns:Exslt.ExsltCommon=“urn:Exslt.ExsltCommon”
xmlns:Exslt.ExsltDatesAndTimes=“urn:Exslt.ExsltDatesAndTimes”
xmlns:Exslt.ExsltMath=“urn:Exslt.ExsltMath”
xmlns:Exslt.ExsltRegularExpressions=“urn:Exslt.ExsltRegularExpressions”
xmlns:Exslt.ExsltStrings=“urn:Exslt.ExsltStrings”
xmlns:Exslt.ExsltSets=“urn:Exslt.ExsltSets”
xmlns:umbusersguide.library=“urn:umbusersguide.library”
exclude-result-prefixes=“msxml umbraco.library Exslt.ExsltCommon
Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions
Exslt.ExsltStrings Exslt.ExsltSets umbusersguide.library “>
<xsl:output method=“xml” omit-xml-declaration=“yes”/>
<xsl:param name=“currentPage”/>
<xsl:template match=“/”>
<!-- save the media id into a local variable so it's
easier to reference later -->
<xsl:variable name=“mediaId” select=“$currentPage/screenshot” />
<!-- output the image tag and get the source of the image using the ID -->
<!-- first we need to check to make sure media ID is not empty -->
<xsl:if test=“$mediaId!=''”>
<img>
<xsl:attribute name=“src”>
<xsl:value-of select=“
umbraco.library:GetMedia($mediaId,‘false’)/umbracoFile “ />
</xsl:attribute>
<xsl:attribute name=“width”>
<xsl:value-of select=“
umbraco.library:GetMedia($mediaId,‘false’)/umbracoWidth “ />
</xsl:attribute>
<xsl:attribute name=“height”>
<xsl:value-of select=“
umbraco.library:GetMedia($mediaId,‘false’)/umbracoHeight” />
</xsl:attribute>
<xsl:attribute name=“alt”>
<xsl:value-of select=“@nodeName” />
</xsl:attribute>
</img>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
To output values as attributes in an HTML tag within XSLT, you can also use the curly brace notation, like so:
<img src=“{$imageSrc}” width=“{$imageWidth}” height=“{$imageHeight}”
alt=“{@nodeName}” />