Kasper B

Transforming xml from external sources and displaying them on your umbraco driven website is as easy as 1,2,3

Below is a quick walkthrough on how to display a list of the most recent images uploaded to your flickr account, using a xslbased macro.

1: Log into umbraco and go to the developer section and create a new xsl document - call it "flickrlist" and check the option to create a macro.

2: flickr offers the newest photos as a xmlfeed - an extended version of rss 2.0 - the extension module is described here http://search.yahoo.com/mrss

A simplified version of the xml source looks like:

<rss version="2.0">
<channel>
<title>Yourflickrprofile photos</title>
<link>http://flickr.com/photos/yourflickrprofile</link>
... ...
<item>
<title>Image title</title>
<link>http://www.flickr/photos/yourflickrprofile/123123123</link>
....
<media:thumbnail url="http://static.flickr.com/123/123/123/image.jpg" width="75" height="75" />
.....
</item>
</channel>
</rss>

I want to output a list of the thumbnails with the image title as alternative text:

<ul>
<li>
<img src="urltoimage" alt="imagetitle" />
</li>
...
<ul>

Transforming the xmlsource:

The full xsl document used to transform the flickr xml is listed here and commented below (and inline)

flickrlist.xslt
(the changes to a default "clean xsl template" that I made are highligthed)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<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:media="http://search.yahoo.com/mrss"
exclude-result-prefixes="msxml umbraco.library media">
<xsl:output method="xml" omit-xml-declaration="yes"/>

<!-- macroparameter with the url of the flickr xmlfeed -->
<xsl:variable name="url" select="/macro/url" />

<xsl:template match="/">
<xsl:if test="$url != ''">
<!--
fetch xmlsource from url - we are unable to use select=document($url)
but umbraco has a static function library available in xsl where there exists a
method of fetching a xmldocument given an url
-->
<xsl:variable name="flickrxml" select="umbraco.library:GetXmlDocumentByUrl($url)" />
<ul>
<xsl:apply-templates select="$flickrxml//item" />
</ul>
</xsl:if>
</xsl:template>
<xsl:template match="item">
<li>
<a href="{link}" title="{title}"><img src="{media:thumbnail/@url}" alt="{title}"/></a>
</li>
</xsl:template>
</xsl:stylesheet>

Comments on the transformation:

I declare a variable named "url" and retrieve a value sent from the macro (more on that further down)

<xsl:variable name="url" select="/macro/url" />
Then retrieve the flickr xmlsource, and keep it in a variable named "flickrxml", using the built-in umbraco.library method "GetXmlDocumentByUrl(string url) " (umbraco.library is a static function library, which are built in .net and are available in xsltransformations in umbraco)

<xsl:variable name="flickrxml" select="umbraco.library:GetXmlDocumentByUrl($url)" />

Create a template which matches the "item" element in the rss, that outputs the following html <li><img src="..." alt=".." /></li> elements

<xsl:template match="item">
<li>
<a href="{link}" title="{title}"><img src="{media:thumbnail/@url}" alt="{title}"/></a>
</li>
</xsl:template>
You need to register the "media" namespace prefix in the stylesheet declaration, in order to retrieve the "media:thumbnail/@url" value (if you are unfamiliar with xml namespaces look at http://www.w3.org/TR/REC-xml-names/ or just google it)

<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:media="http://search.yahoo.com/mrss"
exclude-result-prefixes="msxml umbraco.library media">
Then use the apply-template function on the items in the rssfeed (and thereby create the output of the transformation - the unordered html list)

<ul>
<xsl:apply-templates select="$flickrxml//item" />
</ul>

3: In #1 you checked the "Create macro" option when you created the xsl file, and a matching macro were created - now expand the "Macros" node and click the "flickrlist" macro

Click the "Parameters" tab and add a new parameter with the alias "url", name "Url" and type "Text", check the "Show" chekbox and click add.

All parameters on a macro are passed along in xmlformat to the xsl transformation, the xml will look like:

<macro>
<parameteralias>Parametervalue</parameteralias>
....
</macro>

The parameter value is set when you put the macro in the template (or in the richtexteditor).

Now you are ready to use the macro - an example is shown in the sidebar of this websites frontpage.