Monday, February 11, 2008

Random images in Umbraco

Following on from a recent post of mine about how to setup changeable headers using the media picker in Umbraco a new site I have been working on required something a little extra -they wanted the headers to simply be chosen at random. from a given media folder.

First, create  a new (blank) XSLT file and add the following:

Random header images 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:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:math="urn:schemas-hizi-nl:math"
    xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
    xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"
    exclude-result-prefixes="msxml Exslt.ExsltMath Exslt.ExsltStrings math umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<msxml:script language="JavaScript" implements-prefix="math">
function random(numDie,numMax,numMin){
if (numMin==null){numMin=1;}
var sum=0;
for (var index=0;index&lt;numDie;index++){ 
sum+=Math.floor(Math.random()*(numMax-numMin) + numMin);
}
return "" + sum;
}
function floorme(numFloor){
return "" + Math.floor(numFloor);
}
</msxml:script>

<xsl:variable name="StartNode" select="/macro/StartNode/node/@id" />
<xsl:variable name="parent" select="umbraco.library:GetMedia($StartNode, 'false')" /> 
<xsl:variable name="random" select="math:random(1, count($parent/node)+1, 1)"/>

<xsl:template match="/">

    <xsl:for-each select="$parent/node">
        <xsl:if test="position()=$random">
            <xsl:if test="./data [@alias = 'umbracoExtension'] = 'gif' or ./data [@alias = 'umbracoExtension'] = 'jpg' or ./data [@alias = 'umbracoExtension'] = 'jpeg' or ./data [@alias = 'umbracoExtension'] = 'png'">
                <style type="text/css">
                #header{
                    background-image: url(<xsl:value-of select="./data [@alias = 'umbracoFile']"/>);
                }
                </style>
            </xsl:if>
        </xsl:if>
    </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

What this does is it uses the StartNode (a media folder) passed in from the macro to loop through any valid files (in this case jpg/gif/png and pull out the image if it's valid. I was thinking about replacing the for-each loop and simply using the index but I'm not sure if there would be any performance improvement except for if there were a lot of header images in the folder.

You'll then need to create a new macro and add a parameter with the name "StartNode" and select "mediaCurrent" as the Type. That's it :)

Random images in Umbraco

Useful Links:            Comments [8]  Trackback

Tags: Umbraco | Web Development

Wednesday, March 19, 2008 10:32:24 AM (GMT Standard Time, UTC+00:00)

Bloomin hell there is two of us. I am originally from Coleshill Birmingham but now, after several moves, living near Ashby de la Zouch. Haven't had time to read your blog fully but will devote a bit of time to look at it next week. Interesting !!

Tim Gaunt

Thursday, July 03, 2008 3:46:15 PM (GMT Daylight Time, UTC+01:00)

Perfect. Just implemented this in ten minutes for regular nodes. Very nice little script :-)

Morten Bock

Thursday, July 03, 2008 4:26:51 PM (GMT Daylight Time, UTC+01:00)

Thanks Morten, perhaps I should have implemented it as a Nitros at CG then it wouldn't have taken that long to implement ;)

...or it would if nitros worked hehe

Tim

Wednesday, August 13, 2008 10:19:18 AM (GMT Daylight Time, UTC+01:00)

Hi Scott,

TBH I don't think it ever will be integrated into the core but then again I've been wrong before ;)

Tim

Tim

Tuesday, April 07, 2009 12:11:30 AM (GMT Daylight Time, UTC+01:00)

Thanks for the script it doesn't seem to be working thought. I had a similar script that was working on Umbraco 4 RC but now that I've installed Umbraco 4 release they don't seem to work??

Any ideas?

Thanks in advance.

Andrew

Sunday, April 19, 2009 5:33:29 PM (GMT Daylight Time, UTC+01:00)

This was written for v3, it should work in v4 so I'm not sure why it's not, I'll look into it and post an update.

Tim

Tim

Friday, June 12, 2009 7:17:37 PM (GMT Daylight Time, UTC+01:00)

Hi Andrew,

I've just implemented this on the remake for www.wargamecompany.co.uk (to be released on 15/06/2009) and it worked a treat. It's running v4.0.2

Tim

Tim