Nibble

Displaying a random image/banner on your umbraco site

First some info on the setup:

After installing runway to get a basic site up and running I created a folder in the media section and added several images

randompicturemediajpg

On my homepage document type I added a ‘media picker’ property called ‘Pictures’. There I’ll select the media picture folder.

randompicturecontent

All that’s left now is to write some xslt that will select a random image from the media folder.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<xsl:stylesheet 
    version=”1.0″
    xmlns:msxsl=”urn:schemas-microsoft-com:xslt”  
    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” 
    xmlns:msxml=”urn:schemas-microsoft-com:xslt”
    xmlns:umbraco.library=”urn:umbraco.library”
    xmlns:myFuncs=”urn:my-scripts” 
    exclude-result-prefixes=”msxml myFuncs umbraco.library”>
 
 
<xsl:output method=”xml” omit-xml-declaration=”yes” indent=”yes”/>
 
<xsl:param name=”currentPage”/>
 
<xsl:variable name=”imageRoot” 
    select=”$currentPage/ancestor-or-self:: node[@level = 1]/data [@alias = ‘Pictures’]”/>
 
<msxsl:script implements-prefix=”myFuncs” language=”JavaScript”> 
<![CDATA[
 
var myArray = new Array();
 
function random(){     
    var index = Math.floor(Math.random() * myArray.length);    
    return myArray [index];
}
 
function addtoArray(item){
    myArray.push(item);
}
 
]]>
 
</msxsl:script> 
 
<xsl:template match=”/”>
 
<!– start writing XSLT –>
 
<xsl:call-template name=”buildArray”>
<xsl:with-param name=”arrayNodes” 
    select=”umbraco.library:GetMedia($imageRoot, ‘true’)/node/data[@alias=’umbracoFile’]”/>
</xsl:call-template>
 
<xsl:value-of select=”myFuncs:random()”/>
 
</xsl:template>
 
<xsl:template name=”buildArray”>
<xsl:param name=”arrayNodes”/>
    <xsl:for-each select=”$arrayNodes”>
        <xsl:value-of select=”myFuncs:addtoArray(string(./text()))”/>
    </xsl:for-each>
</xsl:template>
 
</xsl:stylesheet>

This snippet will output the relative url of a random picture from inside the selected media folder ( like /media/44/dsc00033.jpg ).

RandomPicture xslt: download

9 Comments so far

  1. Richard on May 28th, 2009

    Can you output n random images at once and make sure none are duplicates? Even if there are only 5 images available? ;)

    I had that problem once and it’s an absolute beauty. Maybe you saw it already but search the umbraco forums and you’ll find an answer.

  2. Anonimowy Nieglosujacy on June 5th, 2009

    Saving this XSLT in Umbraco admin panel generates error:
    System.OverflowException: Value was either too large or too small for an Int32.
    at System.Convert.ToInt32(Double value)
    at System.Double.System.IConvertible.ToInt32(IFormatProvider provider)
    at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)
    at System.Xml.Xsl.Runtime.XmlQueryRuntime.ChangeTypeXsltArgument(XmlQueryType xmlType, Object value, Type destinationType)
    at System.Xml.Xsl.Runtime.XmlQueryContext.InvokeXsltLateBoundFunction(String name, String namespaceUri, IList`1[] args)
    at (XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at Root(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at Execute(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlSequenceWriter results)
    at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter writer, Boolean closeWriter)
    at System.Xml.Xsl.XmlILCommand.Execute(IXPathNavigable contextDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter results)
    at System.Xml.Xsl.XmlILCommand.Execute(IXPathNavigable contextDocument, XmlResolver dataSources, XsltArgumentList argumentList, TextWriter results)
    at System.Xml.Xsl.XslCompiledTransform.Transform(IXPathNavigable input, XsltArgumentList arguments, TextWriter results)
    at umbraco.presentation.webservices.codeEditorSave.SaveXslt(String fileName, String oldName, String fileContents, Boolean ignoreDebugging)

  3. Paul S on November 28th, 2009

    I had the same error.
    My solution was to create an XSLT in Umbraco and then paste all but the top definition of the stylesheet into your newly created XSLT file.
    That made it possible to save the XSLT file without errors

  4. Eddie Foreman on April 29th, 2010

    My image is has a alt text attribute ‘[@alias=’umbracoFile]’. Wondered if you had an example that would show the url and alt text.

  5. Ras on June 14th, 2010

    I tried your Paul S but still wound up with the error. Can anyone help on why this error occurs and how to solve.

    System.OverflowException: Value was either too large or too small for an Int32.
    at System.Convert.ToInt32(Double value)
    at System.Double.System.IConvertible.ToInt32(IFormatProvider provider)
    at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)
    at System.Xml.Xsl.Runtime.XmlQueryRuntime.ChangeTypeXsltArgument(XmlQueryType xmlType, Object value, Type destinationType)
    at System.Xml.Xsl.Runtime.XmlQueryContext.InvokeXsltLateBoundFunction(String name, String namespaceUri, IList`1[] args)
    at (XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at Root(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at Execute(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlSequenceWriter results)
    at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter writer, Boolean closeWriter)
    at System.Xml.Xsl.XmlILCommand.Execute(IXPathNavigable contextDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter results)
    at System.Xml.Xsl.XmlILCommand.Execute(IXPathNavigable contextDocument, XmlResolver dataSources, XsltArgumentList argumentList, TextWriter results)
    at System.Xml.Xsl.XslCompiledTransform.Transform(IXPathNavigable input, XsltArgumentList arguments, TextWriter results)
    at umbraco.presentation.webservices.codeEditorSave.SaveXslt(String fileName, String oldName, String fileContents, Boolean ignoreDebugging)

  6. sajid on June 18th, 2010

    please tell me why this is giving error:

    <!DOCTYPE xsl:Stylesheet [ ]>

  7. Tim Arnold on July 15th, 2010

    I’m also getting this error. My top lines are
    ***

    <!DOCTYPE xsl:stylesheet [ ]>

    ***

    Error occured

    System.OverflowException: Value was either too large or too small for an Int32.
    at System.Convert.ToInt32(Double value)
    at System.Double.System.IConvertible.ToInt32(IFormatProvider provider)
    at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)
    at System.Xml.Xsl.Runtime.XmlQueryRuntime.ChangeTypeXsltArgument(XmlQueryType xmlType, Object value, Type destinationType)
    at System.Xml.Xsl.Runtime.XmlQueryContext.InvokeXsltLateBoundFunction(String name, String namespaceUri, IList`1[] args)
    at (XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at Root(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at Execute(XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime)
    at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlSequenceWriter results)
    at System.Xml.Xsl.XmlILCommand.Execute(Object defaultDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter writer, Boolean closeWriter)
    at System.Xml.Xsl.XmlILCommand.Execute(IXPathNavigable contextDocument, XmlResolver dataSources, XsltArgumentList argumentList, XmlWriter results)
    at System.Xml.Xsl.XmlILCommand.Execute(IXPathNavigable contextDocument, XmlResolver dataSources, XsltArgumentList argumentList, TextWriter results)
    at System.Xml.Xsl.XslCompiledTransform.Transform(IXPathNavigable input, XsltArgumentList arguments, TextWriter results)
    at umbraco.presentation.webservices.codeEditorSave.SaveXslt(String fileName, String oldName, String fileContents, Boolean ignoreDebugging) in d:\TeamCity\buildAgent\work\7380c184e9fcd3ea\umbraco\presentation\umbraco\webservices\codeEditorSave.asmx.cs:line 124

  8. Gus on June 28th, 2012
  9. ricalvega on August 24th, 2013

    Does anyone know how to fix the code to work right? I have the same error. Thanks.

Leave a Reply