thumbnails from media folder

Michael Falch Madsen 70 posts 92 karma points

Oct 21, 2010 @ 14:47

I’m stuck :)

I need to create a XSLT which lists 8 random images from a specific media folder.

Here is what i have so far.

-Added a property to my textpage documentType called ThumbnailFolder of type Media Picker. (each page have it's own media folder)

-On the page i select a media folder.

-Created a XSLT file and macro called thumbnailList

The XSLT output should be incorporated in a template.

I use Umbraco 4.5.2 and imageGen

And as i side note: subpages may not have a thumbnail folder so i should look up until it finds the property.

Does i make any sence?

Copy Link

Michael Falch Madsen 70 posts 92 karma points

Oct 21, 2010 @ 20:45

This is what i have so far

<?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:Exslt.ExsltMath="urn:Exslt.ExsltMath"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltMath">

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

<xsl:param name="currentPage"/>

<xsl:template match="/">

  <xsl:param name="imgFolder" select="umbraco.library:GetMedia($currentPage/thumbnailFolder, 'True')" />
  <xsl:value-of select="$imgFolder"/>
  <xsl:if test="$imgFolder!=''">
  
  </xsl:if>


</xsl:template>

</xsl:stylesheet>

This line: <xsl:value-of select="$imgFolder/umbracoFile"/>

shows me all the images but the for-each loop results in an parsing error

Copy Link

Kim Andersen 1447 posts 2197 karma points MVP

Oct 21, 2010 @ 21:14

Hi Michael

I think you can use something like this:

<xsl:for-each select="$imgFolder/*[name()='Image']">        
     <img>
        <xsl:attribute name="src"><xsl:value-of select="./umbracoFile" /></xsl:attribute>
        <xsl:attribute name="alt"><xsl:value-of select="./@nodeName" /></xsl:attribute>
      </img>       
</xsl:for-each>

I haven't tried the above code, but I think it will work.

/Kim A

Copy Link

Michael Falch Madsen 70 posts 92 karma points

Oct 21, 2010 @ 21:33

Thanks Kim!

got it working besides the random bit!

Here is the code so far

<?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:Exslt.ExsltMath="urn:Exslt.ExsltMath"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltMath">

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

<xsl:param name="currentPage"/>

<xsl:template match="/">
  <xsl:param name="imgFolder" select="$currentPage/thumbnailFolder" />
  <xsl:if test="$imgFolder!=''">

  <xsl:for-each select="umbraco.library:GetMedia($imgFolder, 'true')/descendant-or-self::*[@nodeTypeAlias='Image']/umbracoFile">
  <xsl:if test="position() <= 8">
  <a href="">
  <img>
  <xsl:attribute name="src">
  <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
  <xsl:value-of select="."/>
  <xsl:text>&width=40</xsl:text>
  <xsl:text>&height=40</xsl:text>
  </xsl:attribute>
  </img>
  </a>
  </xsl:if>
  </xsl:for-each>

  </xsl:if>


</xsl:template>

</xsl:stylesheet>

Copy Link

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

Oct 21, 2010 @ 21:47

Hi Michael

On the random part I Think you Can benefit from this entry http://our.umbraco.org/wiki/reference/xslt/snippets/getting-a-series-of-unique-random-numbers

/Jan

Copy Link

Michael Falch Madsen 70 posts 92 karma points

Oct 25, 2010 @ 16:30

Have tried several times the last days, but no luck with the random images :-/

Can anyone help please!

Here is the code so far:

<?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:Exslt.ExsltMath="urn:Exslt.ExsltMath"
exclude-result-prefixes="msxml umbraco.library Exslt.ExsltMath">

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

<xsl:param name="currentPage"/>

<xsl:template match="/">
  <xsl:param name="imgFolder" select="$currentPage/thumbnailFolder" />
  <xsl:if test="$imgFolder!=''">


  <xsl:for-each select="umbraco.library:GetMedia($imgFolder, 'false')/Image">
  <xsl:if test="position() <= 8">
  <a rel="lightbox">
  <xsl:attribute name="href">
  <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
  <xsl:value-of select="umbracoFile"/>
  <xsl:text>&width=640</xsl:text>
  </xsl:attribute>
  <xsl:attribute name="title">
  <xsl:value-of select="@nodeName" />
  </xsl:attribute>

  <img>
  <xsl:attribute name="src">
  <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
  <xsl:value-of select="umbracoFile" />
  <xsl:text>&width=40</xsl:text>
  <xsl:text>&height=40</xsl:text>
  </xsl:attribute>
  </img>
  </a>
  </xsl:if>
  </xsl:for-each>

  </xsl:if>


</xsl:template>

</xsl:stylesheet>

Copy Link

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

Oct 25, 2010 @ 16:57

Hi Michael

Have you had a look at the link I posted previously?

Obviously you are'nt using it in the posted code above. Try having a look at it. It works like a charm once it's implemented.

/Jan

Copy Link

Michael Falch Madsen 70 posts 92 karma points

Oct 25, 2010 @ 20:50

You were right :) gave it one more try and i works perfectly :)

Thank you for the help!!

If anyone else need an example of how to random select x pictures from the media library then here is my result:

<?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: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(8)" />

<xsl:template match="/">
  <xsl:param name="imgFolder" select="$currentPage/thumbnailFolder" />
  <xsl:if test="$imgFolder!=''">


  <xsl:for-each select="umbraco.library:GetMedia($imgFolder, 'false')/Image">
  <xsl:sort select="randomTools:GetRandom(0,count(umbraco.library:GetMedia($imgFolder, 'false')/Image))" order="ascending" />
  <xsl:if test="position() <= $maxItems">

  <a rel="lightbox">
  <xsl:attribute name="href">
  <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
  <xsl:value-of select="umbracoFile"/>
  <xsl:text>&width=640</xsl:text>
  </xsl:attribute>
  <xsl:attribute name="title">
  <xsl:value-of select="@nodeName" />
  </xsl:attribute>

  <img>
  <xsl:attribute name="src">
  <xsl:text>/umbraco/ImageGen.ashx?image=</xsl:text>
  <xsl:value-of select="umbracoFile" />
  <xsl:text>&width=40</xsl:text>
  <xsl:text>&height=40</xsl:text>
  </xsl:attribute>
  </img>
  </a>
  </xsl:if>
  </xsl:for-each>

  </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>

Copy Link

is working on a reply...

Flag this post as spam?

thumbnails from media folder