Copied to clipboard

Flag this post as spam?

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


  • ianhoughton 241 posts 490 karma points c-trib
    Jan 31, 2010 @ 23:42
    ianhoughton
    0

    Help with XSLT and image thumbnails

    My site structure is like this:

    Home

    - Text Page

    -Sub section 1

    - Gallery1

    -Image1

    -Image2

    -Sub section 2

    - Gallery2

    -Image3

    -Image4

    - Text Page 2

    -Sub section 3

    - Gallery3

    -Image5

    -Image6

    -Sub section 4

    - Gallery4

    -Image7

    -Image8

     

    I have a macro setup to display the content (Title / Body text) for each sub-section under the text page. What I'm trying to do now is get the image thumbnails for each sub-section gallery to display under the body text. At the moment the macro below will display the same images i.e image1, image2, image3,image4 etc under each sub-section.

    <xsl:param name="currentPage"/>

    <!-- Input the documenttype you want here -->

    <xsl:variable name="level" select="2"/>

    <xsl:variable name="documentTypeAlias" select="string('CWS_Photo')"/>

    <xsl:template match="/">

    <!-- start writing XSLT -->

    <xsl:for-each select="$currentPage/ancestor-or-self::node [@level=$level]/node [string(data [@alias='umbracoNaviHide']) != '1']">

    <div class="subsection">

    <h3 class="bg"><xsl:value-of select="umbraco.library:StripHtml(data [@alias='headerText'])"/></h3>

    <xsl:value-of select="data [@alias = 'bodyText']" disable-output-escaping="yes" />

    <ul class="photolist">

    <xsl:for-each select="$currentPage//node [@nodeTypeAlias = $documentTypeAlias and string(data [@alias='umbracoNaviHide']) != '1']">

    <li class="left">

    <a href="{concat(substring-before(data [@alias='umbracoFile'],'.'), '_large.jpg')}"><img src="{concat(substring-before(data [@alias='umbracoFile'],'.'), '_galleryThumb.jpg')}" alt="{data [@alias = 'photoText']}" /></a>

    </li>

    </xsl:for-each>

    </ul>

    </div>

    </xsl:for-each>

    </xsl:template>

     

  • ianhoughton 241 posts 490 karma points c-trib
    Feb 01, 2010 @ 00:11
    ianhoughton
    0

    can one of the admin's put the formatting around my code.. sorry.

  • Sebastiaan Janssen 4899 posts 14655 karma points MVP admin hq
    Feb 01, 2010 @ 10:10
    Sebastiaan Janssen
    0

    I think you're going to need to change "ancestor-or-self::node" to "descendant-or-self::node". It's currently walking the nodetree upwards, but you want to look downwards to the children (descendants).

  • ianhoughton 241 posts 490 karma points c-trib
    Feb 01, 2010 @ 10:29
    ianhoughton
    0

    Thanks for your help. I changed from ancestor to descendant but this didn't make any difference, the output was the same. The sub-sections are being correctly displayed underneath the text page.

    This is the XSLT that doesn't work properly:

    <xsl:for-each select="$currentPage/node/node/node [@nodeTypeAlias = $documentTypeAlias and string(data [@alias='umbracoNaviHide']) != '1']">
    
    <li class="left">
    
    <a class="zoom" rel="group" href="{concat(substring-before(data [@alias='umbracoFile'],'.'), '_large.jpg')}">
    <img src="{concat(substring-before(data [@alias='umbracoFile'],'.'), '_galleryThumb.jpg')}" alt="{data [@alias = 'photoText']}" /></a>
    </li>
    </xsl:for-each>

    The list of image thumbnails under each sub-section is the same, I need the for-each to select only the images underneath its respective sub-section.

  • Sebastiaan Janssen 4899 posts 14655 karma points MVP admin hq
    Feb 01, 2010 @ 10:45
    Sebastiaan Janssen
    0

    Hmm..

    Are you sure that the currentPage is one of your textpages? And if so, that there are different images linked under each gallery?

    You could have a look at the XML you're getting in the currentPage, something might be wonky there. Right before the xsl:for-each you can put this call, it should output the full xml for the current page:

    <textarea>
     <xsl:copy-of select="." />
    </textarea>
  • ianhoughton 241 posts 490 karma points c-trib
    Feb 01, 2010 @ 22:54
    ianhoughton
    0

    Right, I've added Sebastiaan's code above just before the for each loop and this is what I get:

    <node id="1119" version="f6088da1-76fe-44bc-8a17-3823160689ed" parentID="1114" level="3" writerID="0" creatorID="0" nodeType="1081" template="1069" sortOrder="1" createDate="2010-01-06T22:02:12" updateDate="2010-01-13T21:50:34" nodeName="Displays" urlName="displays" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Textpage" path="-1,1091,1114,1119"><data alias="umbracoUrlName" /><data alias="umbracoUrlAlias" /><data alias="metaDescription"></data><data alias="metaKeywords"></data><data alias="umbracoRedirect" /><data alias="umbracoNaviHide">0</data><data alias="headerText">
    <p>Firework Displays</p>
    </data><data alias="articlePhoto" /><data alias="bodyText">
    <p>Some text here</p>
    </data>
    <node id="1150" version="c1bd45a5-1b60-478a-8875-046675ffe578" parentID="1119" level="4" writerID="0" creatorID="0" nodeType="1076" template="1061" sortOrder="1" createDate="2010-01-13T22:56:02" updateDate="2010-01-13T22:57:17" nodeName="Gallery" urlName="gallery" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Gallery" path="-1,1091,1114,1119,1150"><data alias="umbracoUrlName" /><data alias="umbracoUrlAlias" /><data alias="metaDescription"></data><data alias="metaKeywords"></data><data alias="umbracoRedirect" /><data alias="umbracoNaviHide" /><data alias="headerText"></data><data alias="sortBy"></data><data alias="sortOrder"></data><data alias="galleryThumbnail" />
    <node id="1151" version="77753531-96d6-4a5e-b2b4-397674970813" parentID="1150" level="5" writerID="0" creatorID="0" nodeType="1080" template="1066" sortOrder="1" createDate="2010-01-13T22:56:26" updateDate="2010-01-14T22:04:46" nodeName="Fireworks" urlName="fireworks" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Photo" path="-1,1091,1114,1119,1150,1151"><data alias="photoText">Firework display over water</data><data alias="umbracoFile">/media/1889/ist2_3020599-fireworks.jpg</data><data alias="umbracoUrlName" /><data alias="umbracoUrlAlias" /><data alias="metaDescription"></data><data alias="metaKeywords"></data><data alias="umbracoRedirect" /><data alias="umbracoNaviHide">0</data><data alias="Crops"><crops date="13/01/2010 22:56:39"><crop name="sectionPhoto" x="0" y="0" x2="371" y2="272" url="/media/1889/ist2_3020599-fireworks_sectionPhoto.jpg" /><crop name="large" x="48" y="0" x2="320" y2="272" url="/media/1889/ist2_3020599-fireworks_large.jpg" /><crop name="gallerythumb" x="29" y="0" x2="301" y2="272" url="/media/1889/ist2_3020599-fireworks_gallerythumb.jpg" /></crops></data></node>
    <node id="1157" version="bf778f5d-71dd-4459-9a28-7441bcfc581e" parentID="1150" level="5" writerID="0" creatorID="0" nodeType="1080" template="1066" sortOrder="2" createDate="2010-01-14T22:02:57" updateDate="2010-01-14T22:04:56" nodeName="Fireworks (1)" urlName="fireworks-(1)" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Photo" path="-1,1091,1114,1119,1150,1157"><data alias="photoText">Display bonfire</data><data alias="umbracoFile">/media/2055/ist2_106858-4th-of-july.jpg</data><data alias="umbracoUrlName" /><data alias="umbracoUrlAlias" /><data alias="metaDescription"></data><data alias="metaKeywords"></data><data alias="umbracoRedirect" /><data alias="umbracoNaviHide">0</data><data alias="Crops"><crops date="14/01/2010 22:03:21"><crop name="sectionPhoto" x="0" y="0" x2="380" y2="279" url="/media/2055/ist2_106858-4th-of-july_sectionPhoto.jpg" /><crop name="large" x="64" y="0" x2="349" y2="285" url="/media/2055/ist2_106858-4th-of-july_large.jpg" /><crop name="gallerythumb" x="55" y="0" x2="340" y2="285" url="/media/2055/ist2_106858-4th-of-july_gallerythumb.jpg" /></crops></data></node>
    <node id="1158" version="9992f6ac-4162-42ef-9a35-31336da63449" parentID="1150" level="5" writerID="0" creatorID="0" nodeType="1080" template="1066" sortOrder="3" createDate="2010-01-14T23:21:01" updateDate="2010-01-14T23:22:05" nodeName="Fireworks (2)" urlName="fireworks-(2)" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Photo" path="-1,1091,1114,1119,1150,1158"><data alias="photoText">Fireworks over lake</data><data alias="umbracoFile">/media/2091/ist2_8554914-colorful-fireworks-over-lake.jpg</data><data alias="umbracoUrlName" /><data alias="umbracoUrlAlias" /><data alias="metaDescription"></data><data alias="metaKeywords"></data><data alias="umbracoRedirect" /><data alias="umbracoNaviHide">0</data><data alias="Crops"><crops date="14/01/2010 23:21:35"><crop name="sectionPhoto" x="0" y="0" x2="380" y2="279" url="/media/2091/ist2_8554914-colorful-fireworks-over-lake_sectionPhoto.jpg" /><crop name="large" x="0" y="0" x2="800" y2="600" url="/media/2091/ist2_8554914-colorful-fireworks-over-lake_large.jpg" /><crop name="gallerythumb" x="41" y="0" x2="344" y2="303" url="/media/2091/ist2_8554914-colorful-fireworks-over-lake_gallerythumb.jpg" /></crops></data></node>
    <node id="1159" version="88a34268-40ba-48a2-bb4d-c1c9302c1bd7" parentID="1150" level="5" writerID="0" creatorID="0" nodeType="1080" template="1066" sortOrder="4" createDate="2010-01-14T23:22:49" updateDate="2010-01-14T23:23:34" nodeName="Fireworks (3)" urlName="fireworks-(3)" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Photo" path="-1,1091,1114,1119,1150,1159"><data alias="photoText">Firework display</data><data alias="umbracoFile">/media/2109/ist2_6743591-fireworks-cluster.jpg</data><data alias="umbracoUrlName" /><data alias="umbracoUrlAlias" /><data alias="metaDescription"></data><data alias="metaKeywords"></data><data alias="umbracoRedirect" /><data alias="umbracoNaviHide">0</data><data alias="Crops"><crops date="14/01/2010 23:23:11"><crop name="sectionPhoto" x="0" y="0" x2="344" y2="252" url="/media/2109/ist2_6743591-fireworks-cluster_sectionPhoto.jpg" /><crop name="large" x="0" y="0" x2="800" y2="600" url="/media/2109/ist2_6743591-fireworks-cluster_large.jpg" /><crop name="gallerythumb" x="5" y="0" x2="257" y2="252" url="/media/2109/ist2_6743591-fireworks-cluster_gallerythumb.jpg" /></crops></data></node></node></node>

    and the next sub-section outputs this:

    <node id="1124" version="fdc63e0f-104a-49a7-bf48-2d0d44a1fb90" parentID="1114" level="3" writerID="0" creatorID="0" nodeType="1081" template="1069" sortOrder="2" createDate="2010-01-10T17:16:39" updateDate="2010-01-31T22:25:05" nodeName="Lantern Launchs" urlName="lantern-launchs" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Textpage" path="-1,1091,1114,1124">
    <node id="1160" version="5e34f54c-f507-438a-b7ce-eef7909aaad8" parentID="1124" level="4" writerID="0" creatorID="0" nodeType="1076" template="1061" sortOrder="1" createDate="2010-01-31T22:18:43" updateDate="2010-01-31T22:20:29" nodeName="Gallery" urlName="gallery" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Gallery" path="-1,1091,1114,1124,1160">
    <data alias="galleryThumbnail" />
    <node id="1161" version="f3e08f8e-e095-4c41-a32b-edf6be5d65b9" parentID="1160" level="5" writerID="0" creatorID="0" nodeType="1080" template="1066" sortOrder="1" createDate="2010-01-31T22:19:13" updateDate="2010-02-01T21:22:12" nodeName="Lantern1" urlName="lantern1" writerName="Administrator" creatorName="Administrator" nodeTypeAlias="CWS_Photo" path="-1,1091,1114,1124,1160,1161">
    <data alias="photoText">Lantern</data>
    <data alias="umbracoFile">/media/2165/ist2_8378271-table-set-for-an-event-party.jpg</data>
    <data alias="umbracoNaviHide">0</data>
    <data alias="Crops">
    <crops date="31/01/2010 23:01:42">
    <crop name="sectionPhoto" x="3" y="0" x2="373" y2="271" url="/media/2165/ist2_8378271-table-set-for-an-event-party_sectionPhoto.jpg" />
    <crop name="large" x="11" y="0" x2="372" y2="271" url="/media/2165/ist2_8378271-table-set-for-an-event-party_large.jpg" />
    <crop name="gallerythumb" x="63" y="4" x2="309" y2="250" url="/media/2165/ist2_8378271-table-set-for-an-event-party_gallerythumb.jpg" /></crops>
    </data>
    </node>
    </node>
    <data alias="umbracoNaviHide">0</data>
    <p>Lantern Launches</p>
    </data>
    <data alias="articlePhoto" />
    <data alias="bodyText">
    <p>Lanterns can be used as a quiet alternative to fireworks for a
    gentler celebration at New Year, Weddings, Birthdays, Halloween,
    Bonfire Night, Diwali or any other special event. A lantern will
    rise for up to 20 minutes and can ascend to over a mile in the sky
    - where it will still be visible on a clear night!</p>
    <p>Traditionally used in Chinese and Thai celebrations, these are a
    beautiful and fascinating way to light up the sky that's becoming
    increasingly popular.</p>
    <p>At Total party hire we offer both diy or professional service.
    You can take control, we sell diy packs of 10, 25,50 and 100 latern
    packs. With our&nbsp;professional option, we do all the work and
    fill the sky with however many fire lanterns you would like to
    create a magical effect.</p>
    </data>
    </node>

    So you can see that the current page (node 1114) has 2 sub-sections (nodes 1119 & 1124)

    Each sub-section node has a hidden gallery (node 1150 or 1160)

    Gallery (node 1150) has 4 images (nodes 1151,1157,1158 & 1159)

    Gallery (node 1160) has only 1 image (node 1161)

    The problem is that each sub-section is outputting to the unordered list all 5 images.

  • Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib
    Feb 01, 2010 @ 23:00
    Morten Bock
    0

    You probably need to use <xsl:for-each select="current()/node..... in your inner loop.

    The current() will get the node that you are currently looping in the outer loop, and navigate further down from there.

  • ianhoughton 241 posts 490 karma points c-trib
    Feb 02, 2010 @ 01:12
    ianhoughton
    0

    This seemsto have fixed it. Thanks everyone for their help.

    <xsl:output method="xml" omit-xml-declaration="yes"/>
    
    <xsl:param name="currentPage"/>
    <!-- XSLT variables --> <xsl:variable name="level" select="2"/> <xsl:variable name="documentTypeAlias" select="string('CWS_Photo')"/>
    <xsl:template match="/">
    <xsl:for-each select="$currentPage/descendant-or-self::node [@level=$level]/node [string(data [@alias='umbracoNaviHide']) != '1']"> <div class="subsection"> <h3 class="bg"><xsl:value-of select="umbraco.library:StripHtml(data [@alias='headerText'])"/></h3> <xsl:value-of select="data [@alias = 'bodyText']" disable-output-escaping="yes" /> Sub-section node = <xsl:value-of select="@id"/> <xsl:call-template name="RenderSubNavigation"> <xsl:with-param name="parent" select="."/> </xsl:call-template> </div> </xsl:for-each>
    </xsl:template>
    <xsl:template name="RenderSubNavigation"> <xsl:param name="parent" /> <xsl:if test="count($parent/child::node [string(data [@alias='umbracoNaviHide']) != '1']) &gt; 0"> <ul class="photolist"> <xsl:for-each select="$parent/node/child::node"> <li class="left"> <a class="zoom" rel="group" href="{concat(substring-before(data [@alias='umbracoFile'],'.'), '_large.jpg')}"><img src="{concat(substring-before(data [@alias='umbracoFile'],'.'), '_galleryThumb.jpg')}" alt="{data [@alias = 'photoText']}" /></a> </li> </xsl:for-each> </ul> </xsl:if>
    </xsl:template>
    </xsl:stylesheet>
  • 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