<div class="portfolio-box-shadow-sml"><xsl:comment>empty div holds shadow bg image</xsl:comment></div> </li> </xsl:template>
<!-- Template for the WebsitePreviewImage1 property --> <xsl:template match="WebsitePreviewImage1"> <xsl:variable name="media" select="umbraco.library:GetMedia(., false())" /> <img alt="{$media/@nodeName}" src="{$media/umbracoFile}" width="250" /> </xsl:template>
<!-- Template for an empty WebsitePreviewImage1 property --> <xsl:template match="WebsitePreviewImage1[not(normalize-space())]"> <img src="/images/rollback.png" alt="No preview available" width="250" /> </xsl:template>
I am trying to add a class="last" to every third item on the list. I have tried numerous combinations but none work to the desired effect. This is what I'm trying to incorporate but not sure how to do it:
<xsl:if test="position() mod 3 = 0"> <xsl:attribute name="class">last</xsl:attribute> </xsl:if>
I tried that just before AND just after the <li>. I either end up outputting ONLY the third element or 4 boxes (I have border 1px around the images), 1, 2 and 4 are empty and the THIRD one with full info (with class="last").
I think I'm just putting it in the wrong place or maybe I have to specify more information ie another separate template for each third item?
But isn't that exactly what you're intending? The class="last" i applied to every third element, right? Or am I misunderstanding your question totally? :-)
Exactly right, but the list doesn't display properly after I add the test in. It's a horizontal menu, 3 items per row. Each item is an image with a border, every third item must have class="last". So, once I add the test I wrote above to my xslt, I get a list consisting of:
empty box | empty box | box with image and class="last" | empty box
instead of the desired:
box with image | box with image | box with image class="last" | box with image
If that makes sense. It seems the test is stopping the images from displaying for some reason.
Add a class to every third item on a list
Hi everyone,
I am working with the following xslt:
I am trying to add a class="last" to every third item on the list. I have tried numerous combinations but none work to the desired effect. This is what I'm trying to incorporate but not sure how to do it:
<xsl:if test="position() mod 3 = 0">
<xsl:attribute name="class">last</xsl:attribute>
</xsl:if>
Thanks in advance if anyone can help :)
Sam.
Hi Sam
Don't you just need to place the test right under your opening <li> element? That should work.
/Jan
Hi Jan,
I tried that just before AND just after the <li>. I either end up outputting ONLY the third element or 4 boxes (I have border 1px around the images), 1, 2 and 4 are empty and the THIRD one with full info (with class="last").
I think I'm just putting it in the wrong place or maybe I have to specify more information ie another separate template for each third item?
Thanks,
Sam.
Hi Sam
But isn't that exactly what you're intending? The class="last" i applied to every third element, right? Or am I misunderstanding your question totally? :-)
/Jan
Hi Jan,
Exactly right, but the list doesn't display properly after I add the test in. It's a horizontal menu, 3 items per row. Each item is an image with a border, every third item must have class="last". So, once I add the test I wrote above to my xslt, I get a list consisting of:
empty box | empty box | box with image and class="last" | empty box
instead of the desired:
box with image | box with image | box with image class="last" | box with image
If that makes sense. It seems the test is stopping the images from displaying for some reason.
Sam.
And without the test you're getting the desired result on 1,2 and 4?
do you place the test like this:
<li>
<xsl:if test="position() mod 3 = 0"> <xsl:attribute name="class">last</xsl:attribute> </xsl:if>
<!-- Code goes here-->
</li>
/Jan
Hi Jan,
The example you show above is exactly what I just tried before you posted :)
I was placing the end </xsl:if> before the </li> rather than grouping all the code together as you have above. Doh!
Thanks,
Sam.
Hi Sam
I guess I should have been much more clear on exactly where to place the snippet. But finally we got it sorted out :-)
Cheers
/Jan
is working on a reply...