Hi Raheel,

I use a similar way of to display images. U can try and modify this xslt. It builds a 3 column table with images from the media library.

<?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:variable name="source" select="umbraco.library:RequestQueryString('id')"/>
 
 <xsl:variable name="ImageFolder" select="umbraco.library:GetXmlNodeById($source)/data[@alias='afbeeldingen']" />
 
 <xsl:template match="/">
  <!-- start writing XSLT -->
  <xsl:if test="$ImageFolder != ''">
   <table id="projecten-images" cellpadding="4" cellspacing="0" border="0" width="540">
    <xsl:apply-templates select="umbraco.library:GetMedia($ImageFolder, 'yes')/node[position() mod 3 = 1]" mode="table-row" />
   </table>
  </xsl:if>
 </xsl:template>
 
 <xsl:template match="node" mode="table-row">
  <tr class="test">
   <xsl:apply-templates select=". | following-sibling::node[position() &lt; 3]" mode="table-cell" />
  </tr>
 </xsl:template>
 
 <xsl:template match="node" mode="table-cell">
  <xsl:variable name="fillNodes" select="3 - last()" />
  <td align="center" valign="middle">
   <xsl:choose>
    <xsl:when test="(data [@alias = 'umbracoWidth']) &gt; (data [@alias = 'umbracoHeight'])">
     <a rel="group" href="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=600&amp;compression=100" title=""><img src="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=150&amp;compression=100" alt="{@nodeName}"></img></a>
    </xsl:when>
    <xsl:otherwise>
     <a rel="group" href="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;height=600&amp;compression=100" title=""><img src="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;height=150&amp;compression=100" alt="{@nodeName}"></img></a>
    </xsl:otherwise>
   </xsl:choose>
  </td>
  <xsl:if test="$fillNodes &gt; 0 and position() = last()">
   <xsl:call-template name="for.loop">
    <xsl:with-param name="i">0</xsl:with-param>
    <xsl:with-param name="count" select="$fillNodes" />
   </xsl:call-template>
  </xsl:if>
 </xsl:template>
 
 <xsl:template name="for.loop">
   <xsl:param name="i"      />
   <xsl:param name="count"  />
   <!--begin_: Line_by_Line_Output -->
   <xsl:if test="$i &lt; $count">
    <td>&nbsp;</td>
   </xsl:if>
   
   <!--begin_: RepeatTheLoopUntilFinished-->
   <xsl:if test="$i &lt;= $count">
     <xsl:call-template name="for.loop">
       <xsl:with-param name="i">
         <xsl:value-of select="$i + 1"/>
       </xsl:with-param>
       <xsl:with-param name="count">
         <xsl:value-of select="$count"/>
       </xsl:with-param>
     </xsl:call-template>
   </xsl:if>
 </xsl:template>
 
</xsl:stylesheet>

Hi Bas,

Thanks for that, I maybe should have posted this into a different section. : (
I have some understanding on XLS but not a pro to be able to understand each things.

I just want a simple solutions which I cannot find any where:

On one of our product pages I want to display all the product images.

Designit Gallery is the best suited to me.
our.umbraco.org/.../designit-gallery-package

But I cannot get it to work, the image does not display for some reason.

Anyone here that can help me simply get images from a SPECIFIC folder in media to be displayed on a page and when clicked on gets a light box.

Thanks
Raheel

Hi Raheel,

I cleaned up the script for. If you fill the variable "Folder" with the id of the media folder it generates a clean list of all images.

  <xsl:variable name="Folder" select="1131" />
  
  <xsl:if test="$Folder != ''">
   <ul>
    <xsl:for-each select="umbraco.library:GetMedia($Folder, 'yes')/node">
     <li>
      <xsl:choose>
       <xsl:when test="(data [@alias = 'umbracoWidth']) &gt; (data [@alias = 'umbracoHeight'])"> 
        <a rel="group" href="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=600&amp;compression=100" title=""> 
         <img src="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=300&amp;height=300&amp;compression=100" alt="{@nodeName}"></img> 
        </a> 
       </xsl:when>
       <xsl:otherwise> 
        <a rel="group" href="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;height=600&amp;compression=100" title="">
         <img src="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=300&amp;height=300compression=100" alt="{@nodeName}"></img> 
        </a> 
       </xsl:otherwise>
      </xsl:choose>
     </li>
    </xsl:for-each>
   </ul>
  </xsl:if> 

Cheers,

Bas

Raheel,

Always remember to add your umbraco version in your post, as the solution may be completely different for a pre 4.5 version compared to a v4.5+ version of umbraco.

Anyway, Bas' solution is perfect for when you'd be using a pre 4.5 umbraco or a 4.5+ version with UseXmlLegacySchema=true.

Cheers,

/Dirk

@ Dirk, thanks for that. Ill remember it next time : )

@Bas - I have tried the script - On the front end I end up getting broken images.

The folder ID is 1264 and is named Drainage under Media

  
<xsl:variable name="Folder" select="1264" />
  
  <xsl:if test="$Folder != ''">
   <ul>
    <xsl:for-each select="umbraco.library:GetMedia($Folder, 'yes')/node">
     <li>
      <xsl:choose>
       <xsl:when test="(data [@alias = 'umbracoWidth']) &gt; (data [@alias = 'umbracoHeight'])"> 
        <a rel="group" href="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=600&amp;compression=100" title=""> 
         <img src="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=300&amp;height=300&amp;compression=100" alt="{@nodeName}"></img> 
        </a> 
       </xsl:when>
       <xsl:otherwise> 
        <a rel="group" href="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;height=600&amp;compression=100" title="">
         <img src="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=300&amp;height=300compression=100" alt="{@nodeName}"></img> 
        </a> 
       </xsl:otherwise>
      </xsl:choose>
     </li>
    </xsl:for-each>
   </ul>
  </xsl:if> 
  

What can I do?

Thanks
Raheel

Hi Raheel,

Do you use the imagegen package?

http://our.umbraco.org/projects/website-utilities/imagegen

Cheers,

Bas

Hi Raheel,

It could help if you could post the HTML source you are getting that has your broken images.

Rich

is working on a reply...