bz notes.

11Apr

Pulling images randomly from an existing datasource

• Symphony
• Comments (0)

I posted earlier on the Overture21.com site, and added it here, just-in-case it could be of use to anyone. Please let me know your thoughts. If you know a more efficient and better way to code this for Symphony 2 or at all, please let me know. I’m still really new to XSLT game and want to get better.

PROBLEM

I’ve been trying to figure out a way to randomly display one photo out of a group of images via XSLT every time I refresh my browser.

MY ATTEMPT AT A SOLUTION

After much thought, I came across this solution. It uses the generate-id() function and a little magic from the mod operator.

NOTE: The generate-id function will return a string like id2115558 when using libXSLT, but for you PHP4 folks that are still using Sablotron (which doesn’t apply to the Symphony 2 crowd), when using generate-id() you will return a string like i__9022976_0.

Here’s my example XML (which is based off of Mark Lewis’s Flickr Campfire service XML // I manually edited the XML for this example to give proper acknowledgement to the Flickr photographers by adding the flickrauthor attribute to each photo node // The photos are buildings from my former University by Flickr users euthman and monochromechicken)…

            <?xml version="1.0" encoding="utf-8"?>
<data>
    <flickr>
        <photos>
            <photo flickrauthor="monochromechicken">
                <title>Southern Methodist University in Dallas, Texas - Laura Lee Blanton Building</title>
                <date>2007-11-05</date>
                <url>static.flickr.com/2180/2250489626_6d1950ee67_</url>
            </photo>
            <photo flickrauthor="monochromechicken">
                <title>Southern Methodist University in Dallas, Texas - </title>
                <date>2007-11-05</date>
                <url>static.flickr.com/2405/2249691903_ea15523240_</url>
            </photo>
            <photo flickrauthor="euthman">
                <title>Southern Methodist University in Dallas, Texas - Dallas Hall / Dedman College Entrance</title>
                <date>2007-08-30</date>
                <url>static.flickr.com/2301/2344932369_105b601511_</url>
            </photo>
            <photo flickrauthor="euthman">
                <title>Southern Methodist University in Dallas, Texas - Paul B. Loyd, All-Sports Center</title>
                <date>2007-08-30</date>
                <url>static.flickr.com/2238/2344929221_cc08b5edbe_</url>
            </photo>
            <photo flickrauthor="euthman">
                <title>Southern Methodist University in Dallas, Texas - Meadows Museum</title>
                <date>2007-08-30</date>
                <url>static.flickr.com/3088/2345749914_c0f7c142e1_</url>
            </photo>
            <photo flickrauthor="euthman">
                <title>Southern Methodist University in Dallas, Texas - Fondren Science Building</title>
                <date>2007-08-30</date>
                <url>static.flickr.com/2129/2345785026_bcecd5d112_</url>
            </photo>
            <photo flickrauthor="euthman">
                <title>Southern Methodist University in Dallas, Texas - Umphrey Lee Cenotaph</title>
                <date>2006-12-29</date>
                <url>static.flickr.com/2370/1879801672_f60eae6852_</url>
            </photo>
        </photos>
    </flickr>
</data>

          

Here’s my XSLT (example based off of the libXSLT processor)…

            <?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="xml" 
                            doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" 
                            doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 
                            omit-xml-declaration="yes" 
                            encoding="UTF-8" 
                            indent="yes"/>
    <xsl:template match="/">
<!-- This variable counts the number of photo nodes -->
        <xsl:variable name="count-flickr" select="count(/data/flickr/photos/photo)"/>
<!-- This variable is removing the 'id' from the generated id 
             and only selecting the number in the string -->
        <xsl:variable name="new-id" select="substring-after(generate-id(),'id')"/>
<!-- This is the magic variable we are taking the $new-id variable
           and using the mod (or modulo) operator, which finds the 
           remainder of division of one number by another. Also, I'm 
           adding one, so my result doesn't return 0. -->
        <xsl:variable name="randomnumber" select="($new-id mod $count-flickr) + 1"/>
<!-- I'm using apply-templates on the photo template below filtering
           off of the variable, $randomnumber, which will return a whole number. 
           That whole number, for instance, 1, will serve as a position filter. So 
           if 1 is the number that is genrated then it will return the first photo
           node in the XML -->
        <xsl:apply-templates select="/data/flickr/photos/photo[$randomnumber]"/>
    </xsl:template>
    <xsl:template match="photo">
<!-- building a parameter to pull the location of the photo -->
        <xsl:param name="mphoto" select="substring(url,1,44)"/>
        <h2>
            <xsl:value-of select="title"/>
        </h2>
        <img src="http://{$mphoto}.jpg" alt="{title}"/>
    </xsl:template>
</xsl:stylesheet>