Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Gaurav 12 posts 32 karma points
    Jul 08, 2011 @ 14:17
    Gaurav
    0

    List all images in a media folder using XSLT in Umbraco 4.7.0?

    Hi

     

    I have an umbraco page on which the user can pick a media folder. Now I want to write an XSLT-script that takes the picked folder and lists all images that are in it using some sort of for-each loop.

     

    Regards,

    Gaurav.

  • Bas Schouten 135 posts 233 karma points
    Jul 08, 2011 @ 14:24
    Bas Schouten
    0

    Hi Gaurav,

    Try something like this:

    It includes:

    - Paging
    - Thumbs with imagegen
    - Link to original file

    'fotos' is in this case the property in your documenttype.

     

    <?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"/>
     <!-- Input the documenttype you want here -->
     <xsl:template match="/">
      <xsl:if test="$currentPage/fotos !=''">
       <xsl:variable name="recordsPerPage" select="10"/>
       <xsl:variable name="pageNumber" >
        <xsl:choose>
         <xsl:when test="umbraco.library:RequestQueryString('page') &lt;= 0 or string(umbraco.library:RequestQueryString('page')) = '' or string(umbraco.library:RequestQueryString('page')) = 'NaN'">0</xsl:when>
         <xsl:otherwise>
          <xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
         </xsl:otherwise>
        </xsl:choose>
       </xsl:variable>
       <xsl:variable name="images" select="$currentPage/fotos"/>
       <xsl:variable name="mediaItems" select="umbraco.library:GetMedia($images, true())/Image"/>
       <xsl:variable name="numberOfRecords" select="count($mediaItems)" />
       <!-- The fun starts here -->
       <xsl:for-each select="$mediaItems">
        <xsl:if test="position() &gt; $recordsPerPage * number($pageNumber) and position() &lt;= number($recordsPerPage * number($pageNumber) + $recordsPerPage )">
         <xsl:variable name="picFile" select="umbracoFile"/>
         <div class="thumb">
          <!-- this can be used to link to the image -->
          <xsl:element name="a">
           <xsl:attribute name="href">
            <xsl:value-of select="./umbracoFile" />
           </xsl:attribute>
           <!-- the rel and id attribute can be used to fire fancybox -->
           <xsl:attribute name="id">
            <xsl:text>gallery</xsl:text>
           </xsl:attribute>
           <xsl:attribute name="rel">
            <xsl:text>gallery</xsl:text>
           </xsl:attribute>
           <img>
            <xsl:attribute name="src">
             <xsl:text>/ImageGen.ashx?image=</xsl:text>
             <xsl:value-of select="$picFile"/>
             <xsl:text>&amp;width=100&amp;height=100&amp;constrain=true&amp;pad=true&amp;bgcolor=white</xsl:text>
            </xsl:attribute>
           </img>
          </xsl:element>
         </div>
        </xsl:if>
       </xsl:for-each>
       <p>
        <br />
        <xsl:if test="$pageNumber &gt; 0">
         <a href="?page={$pageNumber -1}&amp;id={umbraco.library:RequestQueryString('id')}">previous</a>
         &nbsp;</xsl:if>
        <xsl:call-template name="for.loop">
         <xsl:with-param name="i">1</xsl:with-param>
         <xsl:with-param name="page" select="$pageNumber +1"></xsl:with-param>
         <xsl:with-param name="count" select="ceiling(count($currentPage/* [@isDoc])div $recordsPerPage)"></xsl:with-param>
        </xsl:call-template>
        <xsl:if test="(($pageNumber +1 ) * $recordsPerPage) &lt; ($numberOfRecords)">
         <a href="?page={$pageNumber +1}&amp;id={umbraco.library:RequestQueryString('id')}">next</a>
        </xsl:if>
       </p>
      </xsl:if>
     </xsl:template>
     <xsl:template name="for.loop">
      <xsl:param name="i"/>
      <xsl:param name="count"/>
      <xsl:param name="page"/>
      <xsl:if test="$i &lt;= $count">
       <xsl:if test="$page != $i">
        <a href="{umbraco.library:NiceUrl($currentPage/@id)}?page={$i - 1}&amp;id={umbraco.library:RequestQueryString('id')}" >
         <xsl:value-of select="$i" />
        </a>
       </xsl:if>
       <xsl:if test="$page = $i">
        <xsl:value-of select="$i" />
       </xsl:if>
       /</xsl:if>
      <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:with-param name="page">
         <xsl:value-of select="$page"/>
        </xsl:with-param>
       </xsl:call-template>
      </xsl:if>
     </xsl:template>
    </xsl:stylesheet>
  • Gaurav 12 posts 32 karma points
    Jul 08, 2011 @ 14:48
    Gaurav
    0

    Hi Bas Schouten ,

                                              thanks for your relpy.

                                    image are comes in anchor tag and img tag , but image can not show on page .

  • Bas Schouten 135 posts 233 karma points
    Jul 08, 2011 @ 15:01
    Bas Schouten
    0

    Is ImageGen installed? (http://our.umbraco.org/projects/website-utilities/imagegen)

    If not the images wont show. Test again after replacing

            <xsl:attributename="src">
    <xsl:text>/ImageGen.ashx?image=</xsl:text>
    <xsl:value-ofselect="$picFile"/>
    <xsl:text>&amp;width=100&amp;height=100&amp;constrain=true&amp;pad=true&amp;bgcolor=white</xsl:text>
    </xsl:attribute>

    With

            <xsl:attributename="src">
            
    <xsl:value-ofselect="$picFile"/>
            
    </xsl:attribute>

  • Gaurav 12 posts 32 karma points
    Jul 08, 2011 @ 15:15
    Gaurav
    0

    Hi Bas Schouten,

                              you are right i am not install the ImageGen.

                             Now i am installing the imageGen.

                            thanks for your reply.

     

     

Please Sign in or register to post replies

Write your reply to:

Draft