random image from media section

Eddie Foreman 215 posts 288 karma points

Apr 29, 2010 @ 09:39

Hi All

I know this is a common subject and there are numerous articles in the forum, but I cannot get the xslt to work.

What I need to achieve is to randomly select one image from various images in a media folder. Following some examples, I've managed to list all of the images. But keep getting an xslt error when attempting to select an image using math.random().

This is what I have:

<?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:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">


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

  <xsl:param name="currentPage"/>

  <xsl:template match="/">
    <xsl:variable name="mediaFolderID" select="number($currentPage/data [@alias = 'randomImage'])" />
    <xsl:if test="$mediaFolderID &gt; 0">
      <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 'false')" />
      <xsl:if test="count($mediaID/node) &gt; 0">
        <xsl:for-each select="umbraco.library:GetMedia($mediaFolderID, 'false')/node">
          <xsl:if test="./data [@alias = 'umbracoFile'] != 0">

                    <img src="{./data [@alias = 'umbracoFile']}">
                      <xsl:attribute name="alt">
                        <xsl:choose>
                          <xsl:when test="string(./data[@alias='alttext']) != '' ">
                            <xsl:value-of select="./data[@alias='alttext']" />
                          </xsl:when>
                          <xsl:otherwise>
                            <xsl:value-of select="./@nodeName" />
                          </xsl:otherwise>
                        </xsl:choose>
                      </xsl:attribute>
                    </img>
          </xsl:if>
        </xsl:for-each>
      </xsl:if>
    </xsl:if>
  </xsl:template>

</xsl:stylesheet>

All of the random code has been removed and I was hoping that someone could help me out.

Thanks in advance.

Eddie

Copy Link

Seth Niemuth 275 posts 397 karma points

Apr 29, 2010 @ 10:02

There is a wiki reference article on getting a random: http://our.umbraco.org/wiki/reference/xslt/snippets/getting-a-series-of-unique-random-numbers.

It even has the code in it to select the random node. You just need to change it to $mediaID, and then you could just change the position to have to be equal to 1. There will be a more elegant way to get just one node from the random number but just modify the example slightly you can do it like this:

 <xsl:template match="/">
      <xsl:for-each select="$mediaID//node">
        <xsl:sort select="randomTools:GetRandom(0,count($mediaID//node))" order="ascending" />
        <xsl:if test="position() = 1">
          <li>
            <a>
              <xsl:attribute name="href">
                <xsl:value-of select="umbraco.library:NiceUrl(@id)"/>
              </xsl:attribute>
              <xsl:value-of select="@nodeName"/>
            </a>
          </li>
        </xsl:if>
      </xsl:for-each>
  </xsl:template>

Copy Link

Eddie Foreman 215 posts 288 karma points

Apr 29, 2010 @ 10:58

Hi Seith

Thanks for the wiki reference and the code snippet. Have updated the the previous xslt to the following and it works perfectly :-)

<?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:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    xmlns:randomTools="http://www.umbraco.org/randomTools"
    exclude-result-prefixes="msxml umbraco.library msxsl randomTools">

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

  <xsl:param name="currentPage"/>

  <xsl:variable name="maxItems" select="number(6)" />

  <xsl:template match="/">
    <xsl:variable name="mediaFolderID" select="number($currentPage/data [@alias = 'randomImage'])" />
    <xsl:if test="$mediaFolderID &gt; 0">
        <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 'false')" />
        <xsl:if test="count($mediaID/node) &gt; 0">
          <xsl:for-each select="$mediaID//node">
            <xsl:sort select="randomTools:GetRandom(0,count($mediaID//node))" order="ascending" />
            <xsl:if test="position() = 1">
              <img src="{./data [@alias = 'umbracoFile']}">
                <xsl:attribute name="alt">
                  <xsl:choose>
                    <xsl:when test="string(./data[@alias='alttext']) != '' ">
                      <xsl:value-of select="./data[@alias='alttext']" />
                    </xsl:when>
                    <xsl:otherwise>
                      <xsl:value-of select="./@nodeName" />
                    </xsl:otherwise>
                  </xsl:choose>
                </xsl:attribute>
              </img>
              <a>
                <xsl:attribute name="title">
                  <xsl:text>Find out more ...</xsl:text>
                </xsl:attribute>
                <xsl:attribute name="href">
                  <xsl:value-of select="umbraco.library:NiceUrl(./data[@alias = 'internalUrl'])"/>
                </xsl:attribute>
                <xsl:text>Find out more ...</xsl:text>
              </a>
            </xsl:if>
          </xsl:for-each>
        </xsl:if>
     </xsl:if>
  </xsl:template>

  <msxsl:script language="c#" implements-prefix="randomTools">
    <msxsl:assembly href="../bin/umbraco.dll"/>
    <![CDATA[
        /// <summary>
        /// Gets a random integer that falls between the specified limits
        /// </summary>
        /// <param name="lowerLimit">An integer that defines the lower-boundary of the range</param>
        /// <param name="upperLimit">An integer that defines the upper-boundary of the range</param>
        /// <returns>A random integer within the specified range</returns>
        public static int GetRandom(int lowerLimit,int upperLimit) {
            Random r = umbraco.library.GetRandom();
            int returnedNumber = 0;
            lock (r)
            {
                returnedNumber = r.Next(lowerLimit, upperLimit);
            }
            return returnedNumber;
        }
    ]]>
  </msxsl:script>
</xsl:stylesheet>

Thanks for the advice.

Eddie

Copy Link

Dave 16 posts 36 karma points

Jul 16, 2010 @ 20:59

I need to do exactly the same thing, but I can't seem to get this to work in my environment using the sample posted above.

The issue is that I'm not sure how to interpret the XSL, so I don't know how the variable "mediaFolderID" is getting populated in the pages.

Is that value coming from a property of the page template, and can it be a folder so it selects one of the children?

Sorry for the newb question, just getting started here.. :)

Copy Link

Eddie Foreman 215 posts 288 karma points

Jul 20, 2010 @ 00:13

Hi Dave

Did you manage to get this sorted?

Thanks

Eddie

Copy Link

Owen Hope 119 posts 140 karma points

Nov 15, 2010 @ 18:53

Hi Eddie,

I'm trying to add the above code to my website however I am not getting any output. I am using Umbraco 4.5.2.

All of my images are sitting in a media folder called "Homepage Banners" and I have the ID of 1057 for that media folder.

Now where would I need to change some of the variables to make this code work for my setup?

Here is my current XSLT:

<?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:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    xmlns:randomTools="http://www.umbraco.org/randomTools"
    exclude-result-prefixes="msxml umbraco.library msxsl randomTools">

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

  <xsl:param name="currentPage"/>

  <xsl:variable name="maxItems" select="number(6)" />

  <xsl:template match="/">
    <xsl:variable name="mediaFolderID" select="1057" />
    <xsl:if test="$mediaFolderID &gt; 0">
        <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 'false')" />
        <xsl:if test="count($mediaID/node) &gt; 0">
          <xsl:for-each select="$mediaID//node">
            <xsl:sort select="randomTools:GetRandom(0,count($mediaID//node))" order="ascending" />
            <xsl:if test="position() = 1">
              <img src="{./data [@alias = 'umbracoFile']}">
                <xsl:attribute name="alt">
                  <xsl:choose>
                    <xsl:when test="string(./data[@alias='alttext']) != '' ">
                      <xsl:value-of select="./data[@alias='alttext']" />
                    </xsl:when>
                    <xsl:otherwise>
                      <xsl:value-of select="./@nodeName" />
                    </xsl:otherwise>
                  </xsl:choose>
                </xsl:attribute>
              </img>
              <a>
                <xsl:attribute name="title">
                  <xsl:text>Find out more ...</xsl:text>
                </xsl:attribute>
                <xsl:attribute name="href">
                  <xsl:value-of select="umbraco.library:NiceUrl(./data[@alias = 'internalUrl'])"/>
                </xsl:attribute>
                <xsl:text>Find out more ...</xsl:text>
              </a>
            </xsl:if>
          </xsl:for-each>
        </xsl:if>
     </xsl:if>
  </xsl:template>

  <msxsl:script language="c#" implements-prefix="randomTools">
    <msxsl:assembly href="../bin/umbraco.dll"/>
    <![CDATA[
        /// <summary>
        /// Gets a random integer that falls between the specified limits
        /// </summary>
        /// <param name="lowerLimit">An integer that defines the lower-boundary of the range</param>
        /// <param name="upperLimit">An integer that defines the upper-boundary of the range</param>
        /// <returns>A random integer within the specified range</returns>
        public static int GetRandom(int lowerLimit,int upperLimit) {
            Random r = umbraco.library.GetRandom();
            int returnedNumber = 0;
            lock (r)
            {
                returnedNumber = r.Next(lowerLimit, upperLimit);
            }
            return returnedNumber;
        }
    ]]>
  </msxsl:script>
</xsl:stylesheet>

Any help is much appreciated.

Owen

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Nov 15, 2010 @ 19:26

Hi Owen

The reason why you don't get any results is becaue the sample is written for the legacy schema and not the new one.

To see the XML you get returned in your $mediaFolderID variable wrap it in the following code, to get a dump of the it.

<textarea>
<xsl:copy-of select="$mediaFolderID" />
</textarea>

Now you can copy/paste the returned XML into an editor to get the overview of the structure and you should be able to figure out how to macth the XML.

Another thing...this bit of code...umbraco.library:GetMedia($mediaFolderID, 'false') should really look like this: umbraco.library:GetMedia($mediaFolderID, 1)...It's a comon misconception that writing 'false' is the way to do it...one I've also made myself in the past.

The extension expexts either true or false, dependant of it should display only the selected node or also it's possible child nodes. So it accepts either 1,0,true() or false() - when it encounters a string like 'false', it's actually interpreted as being true. if you had written 'someothertext' it would still return true.

Hope it makes sene :-)

/Jan

Copy Link

Owen Hope 119 posts 140 karma points

Nov 15, 2010 @ 20:03

Hi Jan,

Thanks for your quick reply!

I have made some changes and and getting a dump of the $mediaID using the GetMedia Function with mediaFolderID of 1057, like this:

<?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:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    xmlns:randomTools="http://www.umbraco.org/randomTools"
    exclude-result-prefixes="msxml umbraco.library msxsl randomTools">

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

  <xsl:param name="currentPage"/>

  <xsl:variable name="maxItems" select="number(6)" />

  <xsl:template match="/">
    <xsl:variable name="mediaFolderID" select="1057" />
    <xsl:if test="$mediaFolderID &gt; 0">
        <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, '1')" />
         <textarea>
          <xsl:copy-of select="$mediaID " />
         </textarea>
     </xsl:if>
  </xsl:template>
</xsl:stylesheet>

Now I get the following dump:

<Folder id="1057" version="66b7b538-abcf-4352-af1a-83d23dda717d" parentID="-1" level="1" writerID="0" nodeType="1031" template="0" sortOrder="44" createDate="2010-11-10T10:46:59" updateDate="2010-11-10T10:46:59" nodeName="Homepage Banner" urlName="homepagebanner" writerName="Administrator" nodeTypeAlias="Folder" path="-1,1057">
  <Image id="1141" version="a79558a3-41c6-456d-9a80-17084a1c3c0c" parentID="1057" level="2" writerID="0" nodeType="1032" template="0" sortOrder="1" createDate="2010-11-12T16:24:06" updateDate="2010-11-12T16:24:10" nodeName="Homepage Banner 1" urlName="homepagebanner1" writerName="Administrator" nodeTypeAlias="Image" path="-1,1057,1141">
  <umbracoFile>/media/1640/banner-home.jpg</umbracoFile>
  <umbracoWidth>835</umbracoWidth>
  <umbracoHeight>509</umbracoHeight>
  <umbracoBytes>266603</umbracoBytes>
  <umbracoExtension>jpg</umbracoExtension>
  </Image>
</Folder>

*NOTE* There are multiple images inside the <Folder> I am showing just one.

Now I am relatively new Umbraco/XSLT and I have the following code:

<xsl:for-each select="$mediaID//node">
   <xsl:sort select="randomTools:GetRandom(0,count($mediaID//node))" order="ascending" />
         *Image Generation Done Here*
</xsl:for-each>

GetRandom takes and upper limit and a lower limit, and randomly returns a number between the two.

Now I am stuck on how to generate the Image properly using the new code.

Thanks in advance.

Owen

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Nov 15, 2010 @ 20:57

Hi Owen

Then you will need to match the "Image" element in your for-each, instead of "node"

<xsl:for-each select="$mediaID//Image">
   <xsl:sort select="randomTools:GetRandom(0,count($mediaID//Image))" order="ascending" />
         *Image Generation Done Here*
</xsl:for-each>

/Jan

Copy Link

Owen Hope 119 posts 140 karma points

Nov 15, 2010 @ 21:32

Hi Jan

Thanks for your help I have now made those changes.

I have been reading the forums trying to figure out a way of generating a Image for 4.5.2 but am fairly stumped.

The bit of code that I found was:

<xsl:variable name="image" select="umbraco.library:GetMedia($currentPage/test,'false')/umbracoFile" />

<img>

<xsl:attribute name="src">

/umbraco/imageGen.ashx?image=/<xsl:value-of select="$image"/>&width=89&height=147

</xsl:attribute>

<xsl:attribute name="alt">0</xsl:attribute>

</img>

However this code isn't applicable to my solution.

I know there should be a fairly easy way to get the SRC from one of these variables but I am very new to XSLT and can't quite figure this out. Looking for examples this specific is pretty darn tough.

Again I'm just looking for away to display the image now that I have all of the information.

Any help would be great,

Owen

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Nov 15, 2010 @ 21:41

Hi again

The sample you've found is also using the imageGen handler, which allows you to resize the image on the fly.

However what you need to do is getting the path from within the <umbracoFile> element...so what you need to do in your for-each loop is...

<xsl:for-each select="$mediaID//Image">
   <xsl:sort select="randomTools:GetRandom(0,count($mediaID//Image))" order="ascending" />
         <img src="{umbracoFile}" alt="" width="{umbracoWidth}" height="{umbracoHeight}" />
</xsl:for-each>

Hope this is what you are looking for?

/Jan

Copy Link

Owen Hope 119 posts 140 karma points

Nov 15, 2010 @ 22:05

Jan!

I am so close I can feel it! But currently I am getting no output, no errors, nothing in stacktrace.

I went and checked the Macros/Templates and made sure they are all correct (which they are)

So that leaves me at the XSLT...

Here it is in its entirety:

<?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:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    xmlns:randomTools="http://www.umbraco.org/randomTools"
    exclude-result-prefixes="msxml umbraco.library msxsl randomTools">

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

  <xsl:param name="currentPage"/>

  <xsl:variable name="maxItems" select="number(6)" />

  <xsl:template match="/">
    <xsl:variable name="mediaFolderID" select="1057" />
    <xsl:if test="$mediaFolderID &gt; 0">
      <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, '1')" />
        <xsl:if test="count($mediaID/node) &gt; 0">
          <xsl:for-each select="$mediaID//Image">
            <xsl:sort select="randomTools:GetRandom(0,count($mediaID//Image))" order="ascending" />
             <img src="{umbracoFile}" alt="" width="{umbracoWidth}" height="{umbracoHeight}" />
          </xsl:for-each>
        </xsl:if>
     </xsl:if>
  </xsl:template>

  <msxsl:script language="c#" implements-prefix="randomTools">
    <msxsl:assembly href="../bin/umbraco.dll"/>
    <![CDATA[
        /// <summary>
        /// Gets a random integer that falls between the specified limits
        /// </summary>
        /// <param name="lowerLimit">An integer that defines the lower-boundary of the range</param>
        /// <param name="upperLimit">An integer that defines the upper-boundary of the range</param>
        /// <returns>A random integer within the specified range</returns>
        public static int GetRandom(int lowerLimit,int upperLimit) {
            Random r = umbraco.library.GetRandom();
            int returnedNumber = 0;
            lock (r)
            {
                returnedNumber = r.Next(lowerLimit, upperLimit);
            }
            return returnedNumber;
        }
    ]]>
  </msxsl:script>

I know I am close but being such a newbie I just cannot think of whats wrong!

Thanks again Jan for everything, you've already had a huge part in learning XSLT.

Owen

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Nov 15, 2010 @ 22:07

Hi

Try writing this

      <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 1)" />

instad of this (Remove the ' ' around 1)

      <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, '1')" />

Does that help?

/Jan

Copy Link

Owen Hope 119 posts 140 karma points

Nov 15, 2010 @ 22:12

Hi Jan,

Sorry no luck there, is there a way I can dump the image contents as text? Right here?

    <xsl:variable name="mediaFolderID" select="1057" />
    <xsl:if test="$mediaFolderID &gt; 0">
      <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 1)" />
        <xsl:if test="count($mediaID/node) &gt; 0">
          <xsl:for-each select="$mediaID//Image">
            <xsl:sort select="randomTools:GetRandom(0,count($mediaID//Image))" order="ascending" />
             TEXT DUMP HERE
          </xsl:for-each>
        </xsl:if>
     </xsl:if>

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Nov 15, 2010 @ 22:20

Ooooh...just spotted some more stuff that needs to be changed in the code.

Try pasting the following into your editor.

<?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:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
    xmlns:randomTools="http://www.umbraco.org/randomTools"
    exclude-result-prefixes="msxml umbraco.library msxsl randomTools">

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

  <xsl:param name="currentPage"/>

  <xsl:variable name="maxItems" select="number(6)" />

  <xsl:template match="/">
    <xsl:variable name="mediaFolderID" select="1057" />
    <xsl:if test="$mediaFolderID &gt; 0">
      <xsl:variable name="mediaID" select="umbraco.library:GetMedia($mediaFolderID, 1)" />
        <xsl:if test="count($mediaID//Image) &gt; 0">
          <xsl:for-each select="$mediaID//Image">
            <xsl:sort select="randomTools:GetRandom(0,count($mediaID//Image))" order="ascending" />
             <img src="{umbracoFile}" alt="" width="{umbracoWidth}" height="{umbracoHeight}" />
          </xsl:for-each>
        </xsl:if>
     </xsl:if>
  </xsl:template>

  <msxsl:script language="c#" implements-prefix="randomTools">
    <msxsl:assembly href="../bin/umbraco.dll"/>
    <![CDATA[
        /// <summary>
        /// Gets a random integer that falls between the specified limits
        /// </summary>
        /// <param name="lowerLimit">An integer that defines the lower-boundary of the range</param>
        /// <param name="upperLimit">An integer that defines the upper-boundary of the range</param>
        /// <returns>A random integer within the specified range</returns>
        public static int GetRandom(int lowerLimit,int upperLimit) {
            Random r = umbraco.library.GetRandom();
            int returnedNumber = 0;
            lock (r)
            {
                returnedNumber = r.Next(lowerLimit, upperLimit);
            }
            return returnedNumber;
        }
    ]]>
  </msxsl:script>