My Friend Flickr: pulling Flickr photos into your site with XSLT
Here’s another fun server-side XSLT (Extensible Stylesheet Language Transformations) hack for you. Previously, I talked about the idea of using RSS for loosely coupled content management. Well, I’ve been wanting to do some Web 2.0 mashup kind of stuff, but given that my XPath skills are a lot sharper these days than my JavaScript and AJAX (Asynchronous JavaScript and XML) skills (I still need to find the time to exercise that part of my brain again), I decided I’d attack them from the server side with PHP and XSL instead of writing some pretty browser-choking client-side applet. And the first target of opportunity was Flickr.
I’ve been wanting to add a live feed of my Flickr photo stream to one of my sites for a while. Fortunately, Flickr provides an Atom 0.3 feed (as well as RSS feeds) for each photo stream, so there was already a well-structured XML source to pull the data from. So, using Dreamweaver’s PHP XSLT library, I created a component that pulls in the Atom feed, strips off the extraneous text that gets put in front of each image, and renders the images from the feed wherever I use a <?php include(’flickr.php’); ?> in the page.
In the Atom feed for Flickr, every item starts with the user name and the text “posted a photo:”. So, I wrote an XSL statement using the “substring-after” function of XSLT to prune off the extraneous text. Then I made sure that the image tags in the feed would render properly by disabling output escaping:
<xsl:value-of select=”substring-after(atom:content,’posted a photo:’)” disable-output-escaping=”yes”/>
I didn’t want every photo in my feed to get displayed, so I used a parameter, “ItemsPerPage”, to control the number of items processed by the XSLT. The parameter makes it possible to select the number of images displayed from the feed at run-time. Alternatively, I could use two parameters to select a window of items to display, and use PHP or Javascript code to page through the feed. (I’ll save that for another project.)
Here’s the full XSL file:
<?xml version=”1.0″ encoding=”ISO-8859-1″?>
<!DOCTYPE xsl:stylesheet [
<!ENTITY nbsp ” “>
<!ENTITY copy “©”>
<!ENTITY reg “®”>
<!ENTITY trade “™”>
<!ENTITY mdash “—”>
<!ENTITY ldquo ““”>
<!ENTITY rdquo “””>
<!ENTITY pound “£”>
<!ENTITY yen “¥”>
<!ENTITY euro “€”>
]>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:atom=”http://purl.org/atom/ns#” xmlns:dc=”http://purl.org/dc/elements/1.1/”>
<xsl:output method=”html” encoding=”ISO-8859-1″/>
<xsl:param name=”ItemsPerPage” select=”4″ />
<xsl:template match=”/”>
<xsl:for-each select=”atom:feed/atom:entry[position() <= $ItemsPerPage]”>
<p><xsl:value-of select=”substring-after(atom:content,’posted a photo:’disable-output-escaping=”yes”/></p>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
The results of this XSLT can be seen in the right-hand sidebar of the example attention stream page I built in PHP, combining this blog, a del.icio.us feed and Flickr.