thumbnails from media folder

Michael Falch Madsen 70 posts 92 karma points

Oct 21, 2010 @ 14:47

thumbnails from media folder

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

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

thumbnails from media folder