list all images in a media folder using xslt - XSLT

Thomas Kahn 602 posts 506 karma points

Nov 10, 2009 @ 15:58

List all images in a media folder using XSLT?

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.

Is this even possible?
After all, media objects are not stored in the Umbraco XML like pages are.
My research so far tells me that I have to write a usercontrol in order to accomplish this.

Regards,
Thomas Kahn

Copy Link

Thomas Kahn 602 posts 506 karma points

Nov 10, 2009 @ 16:14

Oh! I forgot!

This is an Umbraco v3 site.

/Thomas

Copy Link

Finn 86 posts 50 karma points

Nov 10, 2009 @ 16:17

Hi Thomas

I am using this for an image gallery, where it loops through a media folder. On the documenttype I got a property @alias = 'imageFolder' that contain a media picker.

Hope you can use it.

<xsl:variable name="imageFolder" select="data [@alias = 'imageFolder']"/>
   <xsl:if test="$imageFolder &gt; 0"><!-- Uden denne test vil xslt'en altid fejle -->
     <xsl:variable name="images" select="umbraco.library:GetMedia($imageFolder, 1)" />

              <!-- Check om der nu også er billeder i valgte mediaarkiv -->
              <xsl:if test="count($images/node) &gt; 0">

                <xsl:for-each select="$images/node">
        <xsl:if test="position() = 1">
          <xsl:if test="./data[@alias = 'umbracoExtension'] = 'gif' or ./data[@alias = 'umbracoExtension'] = 'jpg' or ./data[@alias = 'umbracoExtension'] = 'jpeg' or ./data[@alias = 'umbracoExtension'] = 'png'">

                    <a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                      <img src="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=80&amp;height=80" alt="{@nodeName}" title="{@nodeName}"/>
                    </a>
                 
      </xsl:if>
       </xsl:if>
                </xsl:for-each>
              
        </xsl:if>

Copy Link

Finn 86 posts 50 karma points

Nov 10, 2009 @ 16:21

Hi Thomas

(Hopefully without all the Word definitions this time, sorry!)

And it work for V3+

I am using this for an image gallery, where it loops through a media folder. On the documenttype I got a property @alias = 'imageFolder' that contain a media picker.

Hope you can use it.

<xsl:variable name="imageFolder" select="data [@alias = 'imageFolder']"/>
    <xsl:if test="$imageFolder &gt; 0"><!-- Uden denne test vil xslt'en altid fejle -->
     <xsl:variable name="images" select="umbraco.library:GetMedia($imageFolder, 1)" />

              <!-- Check om der nu også er billeder i valgte mediaarkiv -->
              <xsl:if test="count($images/node) &gt; 0">

                <xsl:for-each select="$images/node">
        <xsl:if test="position() = 1">
          <xsl:if test="./data[@alias = 'umbracoExtension'] = 'gif' or ./data[@alias = 'umbracoExtension'] = 'jpg' or ./data[@alias = 'umbracoExtension'] = 'jpeg' or ./data[@alias = 'umbracoExtension'] = 'png'">

                    <a href="{umbraco.library:NiceUrl(@id)}" title="{@nodeName}">
                      <img src="/umbraco/ImageGen.ashx?image={./data[@alias = 'umbracoFile']}&amp;width=80&amp;height=80" alt="{@nodeName}" title="{@nodeName}"/>
                    </a>
                 
      </xsl:if>
       </xsl:if>
                </xsl:for-each>
              
        </xsl:if>

Copy Link

Thomas Kahn 602 posts 506 karma points

Nov 11, 2009 @ 11:52

Hi Finn!

Excellent! Thanks for posting the code!
I needed to make it recursive so that if there are folders inside folders, the script will traverse the node tree and look for images in the sub folders. Here is my new XSLT code:

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


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

    <xsl:param name="currentPage"/>

    <!-- MAIN TEMPLATE -->
    <xsl:template match="/">

        <!-- Variable with the selected media folder ID -->
        <xsl:variable name="mediaFolderID" select="$currentPage/data[@alias='presentationImageFolder']"/>

        <!-- Call template generates the HTML for the images-->
        <xsl:call-template name="LoopThroughImagesInFolder">
            <xsl:with-param name="mediaFolderID">
                    <xsl:value-of select="$mediaFolderID"/>
            </xsl:with-param>
        </xsl:call-template>

    </xsl:template>

    <!-- LOOP THROUGH IMAGES IN FOLDER TEMPLATE -->
    <xsl:template name="LoopThroughImagesInFolder">
        <!-- Parameter with a media folder ID -->
        <xsl:param name="mediaFolderID"/>

        <!-- Check that you really have an ID -->
        <!-- Without this test the script can fail -->
        <xsl:if test="$mediaFolderID &gt; 0">
            
            <!-- Get the media node using the ID -->
            <xsl:variable name="images" select="umbraco.library:GetMedia($mediaFolderID, 1)" />

            <!-- Check if the folder contains any child nodes -->
            <xsl:if test="count($images/node) &gt; 0">

                <!-- Start iterating the child nodes -->
                <xsl:for-each select="$images/node">

                    <xsl:choose>
                        <!-- Is it an image?
                        Please note that this only works if your images have the 
                        @nodeTypeAlias "Image". If you have called it something else, 
                        you need to replace the name. 
                        -->
                        <xsl:when test="string(./@nodeTypeAlias) = 'Image'">
                            <!-- Print the image code -->
                            <img>
                                <xsl:attribute name="src">
                                    <xsl:value-of select="./data[@alias='umbracoFile']"/>
                                </xsl:attribute>
                            </img>
                        </xsl:when>
                        <!-- Is it a folder? 
                        Please note that this only works if your media folders have the 
                        @nodeTypeAlias "Folder". If you have called it something else, 
                        you need to replace the name. 
                        -->
                        <xsl:when test="string(./@nodeTypeAlias) = 'Folder'">
                            <!-- 
                            Make a recursive call to myself with the ID of
                            the current node in the iteration 
                            -->
                            <xsl:call-template name="LoopThroughImagesInFolder">
                                <xsl:with-param name="mediaFolderID">
                                    <xsl:value-of select="./@id"/>
                                </xsl:with-param>
                            </xsl:call-template>
                        </xsl:when>
                    </xsl:choose>
                </xsl:for-each>
            </xsl:if>
        </xsl:if>
    </xsl:template>

</xsl:stylesheet>

This could be used for a lot of things, for example an image gallery.

/Thomas Kahn

Copy Link

Shea Daniels 8 posts 28 karma points

Nov 18, 2009 @ 19:05

Wow, thanks for the code sample Thomas! I ended up using this to make a dynamic slideshow with the JQuery cycle plugin.

Copy Link

Yanela Somdaka 1 post 21 karma points

Nov 27, 2009 @ 13:10

@Shea

can you please provide the code you use for creating "dynamic slideshow with the JQuery cycle plugin"... i have been battling with that.

Thanking you in advance

Yanela Somdaka

Copy Link

Claushingebjerg 939 posts 2574 karma points

Nov 27, 2009 @ 15:22

Hi

I have problem a bit like this but then a bit different anyway.

Im able to list al images from a media folder. My problem is, i have a LOT of images in the folders. some folders have 500+ images. (not mine, its a client. and its NOT porn)

This will most likely kill imagegen and the ram on mye server when resizing. And 500+ images wont look pretty on any page anyway.

So im looking for a solution with some kind of server side pagination, which shows something like 25 images pr. "subpage", and then splits the 500 images into 20 "subpages", but without leaving the page they are placed on...

Im thimking something jquery with ajax, but i dont really know where to start...

Anyone?

Copy Link

Thomas Kahn 602 posts 506 karma points

Nov 27, 2009 @ 22:45

Hi Claus!

Here's a nice article on paging: http://www.nibble.be/?p=11

Hopefully it could help you with incorporating paging into the code sample that I've posted. If you don't want traditional post-backs you could add an AJAX dimension to it but then you'd have to have a second source for data where you can fetch content through AJAX.I usually create a separate folder in the umbraco site called "xml", "ajaxcontent" or something similar and in it I put all the resource pages that I use when I need. If you want to combine paging and AJAX, the resource page need's to be able to take a page parameter as a query string in order to know which page of content to serve.

Then again, if you use AJAX, you don't really need traditional paging. All you do is add the latest content at the bottom of the page. As long as there is more content to load, you keep displaying a button that says "Give me more images". After all, the main reason for using paging is keeping the loading time down, but with AJAX the content you have already loaded does not need to be reloaded again just because you want more.

If I've understood the workings of ImageGen, the actual resizing is only done the first time the resized image is displayed. After that ImageGen fetches the image from a cache which does not put a strain on the processor or the RAM.

Let me know if you need more input - I've done several sites that use paging combined with loading content through AJAX/jQuery, but the solutions tend to involve a lot of code in several different places and thus it's difficult to just post a ready-to-use solution here on the forum.

/Thomas Kahn

Copy Link

mccombn 9 posts 21 karma points

Feb 17, 2010 @ 07:16

Hi Thomas,

I have tried your code and it is not working for me. The line:

<xsl:variable name="mediaFolderID" select="$currentPage/data[@alias='presentationImageFolder']"/>

is coming back as an empty string when I test it with:

<xsl:if test="string($mediaFolderID) = '' ">
<span style="color:red">Nothing is coming back</span>
</xsl:if>

I have the presentationImageFolder set up as a MediaCurrent parameter in my macro, and have this set up in my template like this:

<?UMBRACO_MACRO macroAlias="SRJAUKStandardsDocumentFolderTraverser" presentationImageFolder="2931"></?UMBRACO_MACRO>

Can you give me any idea as to what is going wrong here?

Thankyou in advance,

Nicholas McComb.

Copy Link

Stephan Lonntorp 195 posts 212 karma points

Feb 17, 2010 @ 10:38

@Nicholas

It looks to me as if you are passing the ID of your presentationfolder as a macro parameter, and not getting it from a page property, You could try to add a variable in your xslt, like such:

<xsl:variable name="mediaFolderID" select="//macro/presentationImageFolder" />

Copy Link

dandrayne 1138 posts 2262 karma points

Feb 17, 2010 @ 11:03

@Nicholaus

Mediacurrent brings back something different from a content picker, so to get the id you'll need something like the following (IIRC)

<xsl:variable name="mediaFolderID" select="/macro/presentationImageFolder/node/@id"/>

Dan

Copy Link

oompa_l 1 post 21 karma points

Jul 07, 2010 @ 17:03

Shea, Yanela

I too am looking to implement the Cycle plugin but with images taken from XML. What I'm doing is not working, and it would be nice to see one that is...help?

thanks!

Copy Link

is working on a reply...

Flag this post as spam?

List all images in a media folder using XSLT?