Copied to clipboard

Flag this post as spam?

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


  • Steffen Pedersen 4 posts 24 karma points
    Oct 18, 2010 @ 02:01
    Steffen Pedersen
    0

    XSLT image gallery

    Hi everybody

    I'm still pretty new to xslt and i'm having some trouble implementing a gallery funktion on my site. My thought is that i want to use a media picker to select a folder in my media libary and then the contents of that libary are displayed as a gallery. I've found a lot of different solutions using the forum and google but i simply can't get it to work. Here is what i have tried. I'm running Umbraco 4.5

    Hope someone has a solution.

    Best regards

    Steffen

    here is what i have so far. I have of course set up the input parameter on the macro and parsed it from the template.

    <?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="MediaNodeId" select="/macro/MediaNode/node/@id"/>

      
      <xsl:template match="/">
        <table>
          <xsl:if test="$MediaNodeId != '' ">
            <!-- just added as cast-workaround -->
            <xsl:for-each select="umbraco.library:GetMedia($MediaNodeId, 'false')/node">

              <tr>
                <td>
                  <h5 class="tight">
                    <xsl:element name="a">
                      <xsl:attribute name="href">

                        <xsl:if test="@nodeTypeAlias='File'">
                          <xsl:value-of select="data [@alias = 'umbracoFile']"/>
                        </xsl:if>

                        <xsl:if test="@nodeTypeAlias='Image'">
                          <xsl:value-of select="data [@alias = 'umbracoFile']"/>
                        </xsl:if>

                        <xsl:if test="@nodeTypeAlias='Link'">
                          <xsl:value-of select="data [@alias = 'dokUrl']"/>
                        </xsl:if>

                        <xsl:if test="@nodeTypeAlias='Folder'">
                          ?MediaRoot=<xsl:value-of select="@id"/>
                        </xsl:if>

                      </xsl:attribute>
                      <xsl:value-of select="@nodeName"/>
                    </xsl:element>
                  </h5>
                </td>
                <!-- Add other <td> entries here to display further info -->
              </tr>

            </xsl:for-each>
          </xsl:if>
        </table>


      </xsl:template>

    </xsl:stylesheet>
  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Oct 18, 2010 @ 10:05
    Jan Skovgaard
    0

    Hi Steffen

    I think the issue with your code example is that the samples you have seen around the forums etc. are based on the old XML schema. From v4.5 the schema has changed. It's possible to run the legacy schema though. But I don't see any reason for that.

    The attributes on the data elements are made into xml elements with the new schema. So to get the value from "umbracoFile" you would need to just select the element like this <xsl:value-of select="umbracoFile" />.

    Another thing -  in your select statement in the loop <xsl:for-each select="umbraco.library:GetMedia($MediaNodeId, 'false')/node"> you should use a boolean. It actually only accepts either 0 or 1. If you pass 0 as an argument you only get the actual image and if you pass 1 you get all images. When you insert text it equals true, so even though you have written false it actually returns true. If you put in "Test" it would also return true. It's been a comon mistake, which many in the community has probably made. Inclduing myself :)

    Finally you need to make sure that the macro parameter actually returns a folder id. With that in place let's look at some code.

    To see the XML you actually get returned you can make a textarea, in wich you have a copy-of

    <textarea>

    <xsl:copy-of select="$MediaNodeId" />

    </textarea>

    I hope these pointers can help you out.

    /Jan

  • Rik Helsen 670 posts 873 karma points
    Oct 18, 2010 @ 10:35
    Rik Helsen
    1

    Here is a working example using ImageGen to create resizes, and a lightbox script to create popups with larger size images. It uses a page property (galleryalbum - a mediapicker that i use to select a folder) to generate a list of thumbnails and then link to the larger version

    <?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="bigW" select="700"/>
    <xsl:variable name="bigH" select="700"/>
        
        
    <xsl:template match="/">

      <xsl:if test="$currentPage/galleryalbum &gt; 0">
        <xsl:variable name="images" select="umbraco.library:GetMedia($currentPage/galleryalbum, 1)" />
        <xsl:if test="count($images/*) &gt; 0">
          <xsl:for-each select="$images/*">
       <xsl:if test="./umbracoFile != ''">



    <a>
        <xsl:attribute name= "class">fancybox gallery</xsl:attribute>
        <xsl:attribute name= "rel">group</xsl:attribute>

          <xsl:choose>
             <xsl:when test="./umbracoWidth &lt; 700 and ./umbracoHeight &lt; 700">
          <xsl:attribute name= "href">
            <xsl:value-of select="./umbracoFile"/>
            </xsl:attribute>
          </xsl:when>
          <xsl:when test="./umbracoWidth &gt; ./umbracoHeight">
          <xsl:attribute name= "href">
            /umbraco/imageGen.aspx?image=<xsl:value-of select="./umbracoFile"/>&amp;width=<xsl:value-of select="$bigW"/>&amp;constrain=true
            </xsl:attribute>
          </xsl:when>
          <xsl:otherwise>
          <xsl:attribute name= "href">
            /umbraco/imageGen.aspx?image=<xsl:value-of select="./umbracoFile"/>&amp;height=<xsl:value-of select="$bigH"/>&amp;constrain=true
            </xsl:attribute>
          </xsl:otherwise>
        </xsl:choose>  
            <img src="/umbraco/ImageGen.ashx?image={./umbracoFile}&amp;height=120&amp;pad=true&amp;bgcolor=white" alt="{./ImgDescription}" title="{./ImgDescription}"/>    
          </a>
            </xsl:if>
          </xsl:for-each>
        </xsl:if>
      </xsl:if>

    </xsl:template>

    </xsl:stylesheet>


  • Steffen Pedersen 4 posts 24 karma points
    Oct 18, 2010 @ 14:29
    Steffen Pedersen
    0

    Thank you both!

    It got it to work with rik's code, but nice to know that the schema changed and thats why it did not work.

  • Sherry Ann Hernandez 320 posts 344 karma points
    Oct 24, 2010 @ 09:56
    Sherry Ann Hernandez
    0

    Hi Rik,

    I used your xslt to generate a page gallery but It doesn't display the images.

     

    Sherry

  • Kim Andersen 1447 posts 2196 karma points MVP
    Oct 24, 2010 @ 10:15
    Kim Andersen
    0

    Hi Sherry.

    Could you provide us with some more details on you problem? Does the xslt-file fail, or is anything being generated at all? Which version of Umbraco are you using? Have you installed the ImageGen package?

    Another thing worth trying is to write out the $images variable to see if it's empty or what it contains. Right under the <xsl:variable name="images"..../> could you try inserting this:

    <textarea>
    <xsl:copy-of select="$images" />
    </textarea>

    This will print out the XML content from the $images. Does it contain anything?

    /Kim A

Please Sign in or register to post replies

Write your reply to:

Draft