Copied to clipboard

Flag this post as spam?

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


  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 20, 2012 @ 17:05
    Fuji Kusaka
    0

    Getting Images with media Folder

    Hi All,

    I kind of lost at the moment from what seems to be simple to do in razor but just cant get it working in xslt.

    I have a xslt macro using parameter mediaCurrent  where i have the following structure in my media

    Gallery 1
    album 1
    album 2 
    album 3 

    We need to display each album name and whithin it display the first image. Something like 

    Album 1 Album 2 Album 3
    img 1 img1  img 1

    am not sure of how to get it working after displaying the folder (album 1-3) here

     

    <xsl:variable name="mediaFolder" select="/macro/docFolder"/> 
    <xsl:template match="/">
    <!-- start writing XSLT -->
    <xsl:if test="$mediaFolder">
    <xsl:value-of select="$mediaFolder"/>
     <xsl:variable name="folder" select="umbraco.library:GetMedia($mediaFolder/*/@id, 'true')/Folder" />    
    <xsl:for-each select="$folder"> <xsl:value-of select="@nodeName"/>
    </xsl:for-each>
    </xsl:if>
    </xsl:template>

     

    Any help on this ?

  • Thor Madsen-Holm 82 posts 212 karma points c-trib
    Dec 20, 2012 @ 17:38
    Thor Madsen-Holm
    0

    Hi Fuji, 

    Something like this should work (haven't tested it though):

    <xsl:variable name="mediaFolder" select="/macro/docFolder"/>    
    
    <xsl:template match="/">
    <!-- start writing XSLT -->
        <xsl:if test="$mediaFolder">
            <xsl:variable name="mediaFolderXml" select="umbraco.library:GetMedia($mediaFolder, true())" />
    
            <!-- Loop though the child folders -->
            <ul>
                <xsl:apply-templates select="$mediaFolderXml/Folder" />
            </ul>
        </xsl:if>
    </xsl:template>
    
    <xsl:template match="Folder">
        <!-- Output the folder name -->
        <li>
            <xsl:value-of select="@nodeName" />
    
            <!-- if there is files/images in the folder loop through them -->
            <xsl:if test="count(Image) &gt; 0 or count(File) &gt; 0">
                <ul>
                    <xsl:apply-templates select="Image | File" />
                </ul>
            </xsl:if>
        </li>
    </xsl:template>
    
    <xsl:template match="Image | File" >
        <!-- Output the file/image name -->
        <li>
            <xsl:value-of select="@nodeName" />
        </li>
    </xsl:template>

     /Thor

  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 20, 2012 @ 17:50
    Fuji Kusaka
    0

    Hi Thor,

    Nope didnt get it to work it just give me an error.

  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Dec 20, 2012 @ 17:58
    Chriztian Steinmeier
    0

    Hi Fuji,

    Here's a match template approach to do it - separate templates for all the bits so you have a clear idea which does what:

    <?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" />
        <xsl:variable name="mediaFolder" select="/macro/docFolder" />
    
        <xsl:template match="/">
            <!-- If a Folder was picked -->
            <xsl:if test="$mediaFolder/Folder">
                <!-- Grab all the media items in it -->
                <xsl:variable name="mediaAlbum" select="umb:GetMedia($mediaFolder/Folder/@id, true())" />
    
                <!-- Show gallery if we got a Folder from GetMedia() -->
                <xsl:apply-templates select="$mediaAlbum[not(error)]" mode="gallery" />
            </xsl:if>
        </xsl:template>
    
        <!-- Gallery Folder comes through here -->
        <xsl:template match="Folder" mode="gallery">
            <div class="gallery">
                <h1><xsl:value-of select="@nodeName" /></h1>
                <ul>
                    <xsl:apply-templates select="Folder" mode="album" />
                </ul>
            </div>
        </xsl:template>
    
        <!-- Subfolders (Albums) comes through this template -->
        <xsl:template match="Folder" mode="album">
            <li class="album">
                <h2><xsl:value-of select="@nodeName" /></h2>
                <!-- Render the first Image -->
                <xsl:apply-templates select="Image[1]" />
            </li>
        </xsl:template>
    
        <!-- Template for an image -->
        <xsl:template match="Image">
            <img class="thumb" src="{umbracoFile}" width="100" />
        </xsl:template>
    
    </xsl:stylesheet>
    

    /Chriztian 

  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Dec 20, 2012 @ 18:00
    Chriztian Steinmeier
    0

    Aij... hadn't seen your post, Thor -

    The tricky part to this one is that the macro parameter is a "mediaCurrent" — that one holds an ID when you look at thetag but inside the XSLT it's actually the XML for (in this case) the Folder - but not its contents...

    And a standard Media Picker only stores the id, so... you need different approaches depending on if you're using a macro parameter or a picker on $currentPage.

    /Chriztian

  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 20, 2012 @ 18:35
    Fuji Kusaka
    0

    Thanks for this Chriztian,

    I almost got it working though!.. in the template Image here i made some modifications where i need to display only the first image but still have the other images sitting in the html to make a slideshow.

    I tried this but didnt get me working instead, is there a way of pulling the croped thumbnails image instead of the {umbracoFile} ?

     

     

     <xsl:template match="Image"> 
    <div>
    <xsl:choose>
    <xsl:when test="position() =1">
    <a href="{umbracoFile}" rel="prettyPhoto[ame]" ><img  src="{umbracoFile}" width="88" height="75" /></a>
    </xsl:when>
    <xsl:otherwise>
     <a href="{umbracoFile}" rel="" ></a></xsl:otherwise></xsl:choose>
    </div>
            </xsl:template>

     

     

  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 20, 2012 @ 18:37
    Fuji Kusaka
    0

    Is it possible to concat the img ?

    <xsl:value-of select="umbraco.library:Replace(umbraco.library:GetMedia(@id, 0)/umbracoFile, '.', '_Thumbnail.')"/> 
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Dec 20, 2012 @ 18:45
    Chriztian Steinmeier
    0

    Hi Fuji,

    You do not need to test for position() inside the Image folder - if you're using my example the "album" mode template selects the first Image in the apply-templates.

    To get the thumbnail, do this:

    <img class="thumb" src="{concat(substring-before(umbracoFile, concat('.', umbracoExtension)), '_thumb.jpg')}" />

    (Thumbnails are always JPG)

    /Chriztian

  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 20, 2012 @ 19:04
    Fuji Kusaka
    0

    Make sense but i need to display all the images withing the folder, that is when clicking on the first one i should be able to slide through the others.

  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 20, 2012 @ 19:32
    Fuji Kusaka
    0
    <a href="{umbracoFile}" rel="prettyPhoto[{../@nodeName}]" ><img  src="{concat(substring-before(umbracoFile, concat('.', umbracoExtension)), '_thumb.jpg')}" width="88" height="75" /></a>

    Here am getting the Folder Name to get all images for the slideshow to work but since templates select="Image[1]" no slideshow will be trigger

  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Dec 21, 2012 @ 08:00
    Chriztian Steinmeier
    0

    Hi Fuji,

    Have you got a prototype of ythe *final* HTML you want to render? That's so crucial to getting things right and finding out which templates you need etc.

    /Chriztian

  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 21, 2012 @ 08:35
    Fuji Kusaka
    0

     

    <a href="1.img" rel="prettyPhoto[foldeName1]" ><img src="1.img" /></a> // for the first image in the folder then 
    <a href="2.img" rel="prettyPhoto[foldeName1]" ></a><a href="3.img" rel="prettyPhoto[foldeName1]" ></a><a href="4.img" rel="prettyPhoto[foldeName1]" ></a>
  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 21, 2012 @ 12:15
    Fuji Kusaka
    0

    From the xslt you sent how do i get to Truncate some text, this aint working anymore

    <xsl:value-of select="umbraco.library:TruncateString(prorpertyAlias, int, '...')" />
  • Chriztian Steinmeier 2726 posts 8320 karma points MVP 4x admin c-trib
    Dec 21, 2012 @ 12:26
    Chriztian Steinmeier
    0

    Hi Fuji,

    I trust you to be able to find that :-)

    • Error message probably says it can't find a class or something associated with "umbraco.library", right?
    • Then find the namespace declaration for umbraco.library (top of file) and find the assigned prefix - "umb"?
    • Use umb:TruncateString() 

    /Chriztian

  • Fuji Kusaka 2203 posts 4220 karma points
    Dec 21, 2012 @ 13:02
    Fuji Kusaka
    0

    Make sense, so whatever value with umbraco.library will now use umb ? 

     

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

Please Sign in or register to post replies