Copied to clipboard

Flag this post as spam?

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


  • ianhoughton 281 posts 605 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 281 posts 605 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 5060 posts 15522 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 281 posts 605 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 5060 posts 15522 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 281 posts 605 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 281 posts 605 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>
Please Sign in or register to post replies

Write your reply to:

Draft