Copied to clipboard

Flag this post as spam?

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


  • Chris Clarke 22 posts 43 karma points
    Dec 23, 2010 @ 22:04
    Chris Clarke
    0

    List images within media folders within top media folder

    My users have images of weeds grouped and stored in media sub-folders by type (aquatic, ground plant, climber, bush, etc).  Over these sub-folders there's a Weeds top level media folder.

    For the parent Weed folder I'd like to output on a web page;


    Weed Type:  FOLDER-NAME1

         image4     image1    image33

    Weed Type:  FOLDER-NAME2

         image23     image8    image7

    etc....


    How do I iterate through each sub-folder for the parent Weed folder ?
    (I've no problem outputing weed images for a specific weed type sub-folder.)

    Help much appreciated.

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Dec 23, 2010 @ 22:33
    Lee Kelleher
    2

    Hi Chris,

    Here is some example XSLT to get you started... I'm making an assumption that you are using Umbraco v4.5 with the new XML schema!

    <!-- get the media id from somewhere? -->
    <xsl:variable name="mediaId" select="1234" />
    
    <!-- call GetMedia with the id and set the 'deep' parameter to true (or 1) -->
    <xsl:variable name="rootFolder" select="umbraco.library:GetMedia($mediaId, 1)" />
    
    <!-- check if there are any folders -->
    <xsl:if test="$rootFolder/Folder">
    
        <!-- loop through each folder -->
        <xsl:for-each select="$rootFolder/Folder">
    
            <!-- output the folder's title -->
            <h1>
                Weed Type: <xsl:value-of select="@nodeName" />
            </h1>
    
            <!-- check if there are any images -->
            <xsl:if test="Image">
    
                <!-- loop through each image -->
                <xsl:for-each select="Image">
    
                    <!-- output the image tag HTML -->
                    <img src="{umbracoFile}" alt="{@nodeName}" height="{umbracoHeight}" width="{umbracoWidth}" />
    
                </xsl:for-each>
    
            </xsl:if>
    
        </xsl:for-each>
    
    </xsl:if>

    The idea here is that you call GetMedia with the mediaId and setting the 'deep' parameter to true - this should return all the child media nodes too.

    Then it's a case of looping through each of the folders/images.

    Let us know how you get on!

    Cheers, Lee.

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 7x admin c-trib
    Dec 23, 2010 @ 22:33
    Chriztian Steinmeier
    2

    Hi Chris,

    This should get you started - feel free to ask about the specifics, if you're curious:

    <?xml version="1.0" encoding="utf-8" ?>
    <xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:umb="urn:umbraco.library"
        exclude-result-prefixes="umb"
    >
    
        <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />
    
        <xsl:param name="currentPage" />
    
        <!-- Root folder in Media that holds the folders to output -->
        <xsl:variable name="mediaRootFolderId" select="1200" />
    
        <xsl:template match="/">
            <!-- Pass in true() to get XML for all nodes below -->
            <xsl:variable name="mediaRootNode" select="umb:GetMedia($mediaRootFolderId, true())" />
    
            <!-- If we didn't get an error, output Folder elements that contain Image elements -->
            <xsl:apply-templates select="$mediaRootNode[not(error)]/Folder[Image]" />
    
        </xsl:template>
    
        <!-- Template for folders -->
        <xsl:template match="Folder">
            <div class="folder">
                <h2>Weed type: <xsl:value-of select="@nodeName" /></h2>
                <div class="images">
                    <!-- Output all images in here -->
                    <xsl:apply-templates select="Image" />
                </div>
            </div>
        </xsl:template>
    
        <!-- Template for images -->
        <xsl:template match="Image">
            <img src="{umbracoFile}" width="{umbracoWidth}" height="{umbracoHeight}" alt="{@nodeName}" />
        </xsl:template>
    
    </xsl:stylesheet>
    
    As you might see, you'll need to supply the correct ID for the containing Media folder, and maybe tweak the output templates for your specific needs.
    Merry X-Mas!
     

    /Chriztian

  • Lee Kelleher 4020 posts 15802 karma points MVP 13x admin c-trib
    Dec 23, 2010 @ 22:48
    Lee Kelleher
    0

    I like Chriztian's XSLT, it's much much better!

    I was going to use xsl:apply-templates, but didn't want to seem to over-complicate it! ;-) haha

Please Sign in or register to post replies

Write your reply to:

Draft