I am trying to transform a bit of xml which represents an image gallery into an html table. (it must be done with html and not with css). How do I add the row break </tr><tr>
every six or so columns with xsl?
I have this:
<xsl:for-each select="//email/gallery" >
<td>
<img>
<xsl:attribute name="src">
<xsl:value-of select="gallery-image-location"/>
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="gallery-image-alt"/>
</xsl:attribute>
</img>
</td>
<xsl:if test="????">
</tr>
<tr>
</xsl:if>
<xsl:for-each>
In Javascript I would do something like:
for (i=0; i<gallery.length; i++) {
htm += '<td><img src="' +
gallery[i].gallery-image-location +
'" alt="'+ gallery[i].gallery-image-alt +'"></td>';
if (i%6 == 5 && i != gallery.length-1) {
htm += '</tr><tr>';
}
}
How do I add the row break every six or so columns with xsl?
In XSLT you don't!
XSLT processes nodes, not tags.
Here is the XSLT way of positional grouping:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:template match="gallery[position() mod 6 = 1]">
<tr>
<xsl:apply-templates mode="proc"
select=".|following-sibling::gallery[not(position() > 5)]"
/>
</tr>
</xsl:template>
<xsl:template match="gallery" mode="proc">
<td>
<img src="{gallery-image-location}" alt="{gallery-image-alt}"/>
</td>
</xsl:template>
<xsl:template match="gallery[not(position() mod 6 = 1)]"/>
</xsl:stylesheet>
when this transformation is applied on the following XML document:
<email>
<gallery>
<gallery-image-location>http://server/picts/1</gallery-image-location>
<gallery-image-alt>Description 1</gallery-image-alt>
</gallery>
<gallery>
<gallery-image-location>http://server/picts/2</gallery-image-location>
<gallery-image-alt>Description 2</gallery-image-alt>
</gallery>
<gallery>
<gallery-image-location>http://server/picts/3</gallery-image-location>
<gallery-image-alt>Description 3</gallery-image-alt>
</gallery>
<gallery>
<gallery-image-location>http://server/picts/41</gallery-image-location>
<gallery-image-alt>Description 4</gallery-image-alt>
</gallery>
<gallery>
<gallery-image-location>http://server/picts/5</gallery-image-location>
<gallery-image-alt>Description 5</gallery-image-alt>
</gallery>
<gallery>
<gallery-image-location>http://server/picts/6</gallery-image-location>
<gallery-image-alt>Description 6</gallery-image-alt>
</gallery>
<gallery>
<gallery-image-location>http://server/picts/7</gallery-image-location>
<gallery-image-alt>Description 7</gallery-image-alt>
</gallery>
<gallery>
<gallery-image-location>http://server/picts/8</gallery-image-location>
<gallery-image-alt>Description 8</gallery-image-alt>
</gallery>
<gallery>
<gallery-image-location>http://server/picts/9</gallery-image-location>
<gallery-image-alt>Description 9</gallery-image-alt>
</gallery>
</email>
the wanted, correct result is produced:
<tr>
<td>
<img src="http://server/picts/1" alt="Description 1"/>
</td>
<td>
<img src="http://server/picts/2" alt="Description 2"/>
</td>
<td>
<img src="http://server/picts/3" alt="Description 3"/>
</td>
<td>
<img src="http://server/picts/41" alt="Description 4"/>
</td>
<td>
<img src="http://server/picts/5" alt="Description 5"/>
</td>
<td>
<img src="http://server/picts/6" alt="Description 6"/>
</td>
</tr>
<tr>
<td>
<img src="http://server/picts/7" alt="Description 7"/>
</td>
<td>
<img src="http://server/picts/8" alt="Description 8"/>
</td>
<td>
<img src="http://server/picts/9" alt="Description 9"/>
</td>
</tr>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With