XSLT: How do I group entries and wrap them in containers? SOLVED
This is an open discussion with 7 replies, filed under Troubleshooting.
Search
Put them all into one div, float them left and give them 1/3 of the width of the surrounding div. :-)
@phoque Har … :-P
I think I found a direction to go. I’ll try it.
Here’s my solution:
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:import href="../utilities/master.xsl"/> <xsl:template match="data"> <div id="content" class="grid_10"> <p>Josh is a graphic designer who works in Web, print and illustration. <a href="/about">Read more about Josh</a>.</p> </div> <div class="slideshow"> <!-- Grab every sixth item to create a slide. --> <xsl:apply-templates select="work-homepage/entry[position() mod 6 = 1]" mode="slide" /> </div> </xsl:template> <xsl:template match="entry" mode="slide"> <div class="slide clearfix"> <div class="row clearfix"> <!-- Select current item and 2 siblings after. --> <xsl:apply-templates select=". | following-sibling::entry[position() <= 2]" mode="entry" /> </div> <div class="row clearfix"> <!-- Select the next 3 siblings --> <xsl:apply-templates select="following-sibling::entry[position() >= 3 and position() <= 5]" mode="entry" /> </div> </div> </xsl:template> <xsl:template match="entry" mode="entry"> <a href="#" class="grid_4 work-entry"> <img src="{$root}/image/2/280/180/5{thumbnail/@path}/{thumbnail/filename}" alt="{title} thumbnail" width="280" height="180"></img> <span class="title"><xsl:value-of select="title"/></span> <sapn class="teaser"><xsl:copy-of select="teaser/node()"/></sapn> </a> </xsl:template> </xsl:stylesheet>
Not pretty, but it gets the job done.
I think that’s more or less the way we built the rows on the download listings here on the site.
Just found this thread from a google search top entry :)
Would the above work if I had 2 columns and wanted a max of 6 in each column?:
<!-- First Column --> <div class="column"> <xsl:apply-templates select="work-homepage/entry[position() mod 6 = 0]" /> </div> <!-- Second Column --> <div class="column"> <xsl:apply-templates select="work-homepage/entry[position() mod 6 = 1]" /> </div>
Cheers
off the top of my head:
<xsl:apply-templates select="work-homepage/entry[position() mod 2 = 0 and position() < 12]" /> <xsl:apply-templates select="work-homepage/entry[position() mod 2 = 1 and position() < 12]" />
So the modulo approach counts to check for entries position and if it's an increment of 2 or not yes?
Create an account or sign in to comment.
I have been racking my brain over this XSLT problem. I have a portfolio site that has a list of entries presented in a slideshow/paginated type of interface.
Each page has 6 entries. The six entries are split into 2 rows of 3 each.
I need to figure out how to select my entries and divide into groups of 6. Then I need to select each group and divide the 6 into 2 groups of 3.
Would I use the mod operator on this or is there another way that I’m not getting?
You can see an example of my template here to get a good idea how it works: http://test.joshnichols.com/index.html
Attached is my XML and the XHTML I want to output.
ANy help is appreciated. Thanks!