PDA

Click to See Complete Forum and Search --> : Line break with XSLT

thesprucegoose
05-27-2009, 03:55 PM
Hello,

I have successfully applied a XSLT stylesheet to an XML document and got pictures to show up and was able to link to larger images.

My issue is I need it to set a line break after a set of 6 pictures prints to the browser. There is a node right before the photos node called instance. I've been trying to insert a <br /> there, but with no success.

Can anyone give any advice?

Thanks,

--thesprucegoose

XSLT

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Wild Earth: Deep Ocean Safari</title>
</head>

<body style="background-color:#003300">

<xsl:for-each select="main/user/photos/photo">
<a>
<xsl:attribute name="href">
<xsl:value-of select="url"/>
</xsl:attribute>
<img style="border:0; margin:5px; width:10%; height:10%;">
<xsl:attribute name="src">
<xsl:value-of select="url"/>
</xsl:attribute>
</img>
</a>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>


XML:

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="wedos.xslt"?>
<main>
<user name="" email="nsnyder@etcusa.com" rode_the_ride="8">
<instance id="290" date="2009_05_26"/>
<location id="5" name="McWane Science Center" sysname="MSC_102642" city="North Birmingham" state="AL">
<url>http://www.mcwane.org/exhibits/wild_earth_safari_simulator</url>
<logo/>
</location>
<sponsors/>
<photos>
<photo id="911" depth="252">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_26__13_45_12/pic1.jpg</url>
<caption>Sperm Whale Swimming</caption>
<photospecies/>
</photo>
<photo id="912" depth="30">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_26__13_45_12/pic2.jpg</url>
<caption>Bat Ray Swimming</caption>
<photospecies/>
</photo>
<photo id="913" depth="259">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_26__13_45_12/pic3.jpg</url>
<caption>Pacific Bluefin Tuna Swimming</caption>
<photospecies/>
</photo>
<photo id="914" depth="22">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_26__13_45_12/pic4.jpg</url>
<caption>California Sea Lion Swimming</caption>
<photospecies/>
</photo>
<photo id="915" depth="27">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_26__13_45_12/pic5.jpg</url>
<caption>Black-and-Yellow Rockfish Swimming</caption>
<photospecies/>
</photo>
<photo id="916" depth="29">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_26__13_45_12/pic6.jpg</url>
<caption>Bat Star</caption>
<photospecies/>
</photo>
</photos>
<instance id="252" date="2009_05_22"/>
<location id="5" name="McWane Science Center" sysname="MSC_102642" city="North Birmingham" state="AL">
<url>http://www.mcwane.org/exhibits/wild_earth_safari_simulator</url>
<logo/>
</location>
<sponsors/>
<photos>
<photo id="706" depth="18">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_22__16_52_46/pic1.jpg</url>
<caption>California Sea Lion Swimming</caption>
<photospecies/>
</photo>
<photo id="707" depth="20">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_22__16_52_46/pic2.jpg</url>
<caption>Bat Ray Swimming</caption>
<photospecies/>
</photo>
<photo id="708" depth="18">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_22__16_52_46/pic3.jpg</url>
<caption>Sea Otter Swimming</caption>
<photospecies/>
</photo>
<photo id="709" depth="21">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_22__16_52_46/pic4.jpg</url>
<caption>Gopher Rockfish Swimming</caption>
<photospecies/>
</photo>
<photo id="710" depth="21">
<url>http://www.wildearthride.com/html/ridephotos/MSC_102642__2009_05_22__16_52_46/pic5.jpg</url>
<caption>Bat Ray Digging for Clams</caption>
<photospecies/>
</photo>
</photos>
JohnBampton
05-28-2009, 09:23 AM
Hello, I modify your code because it was so verbose, all you had to do was check the position() function

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Wild Earth: Deep Ocean Safari</title>
</head>

<body style="background-color:#003300">
<xsl:for-each select="main/user/photos/photo">

<a href="{url}">
<img style="border:0; margin:5px; width:10%; height:10%;" src="{url}"></img>
</a>
<xsl:if test="position() mod 6 = 0">
<br/>
</xsl:if>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>


Cheers, John Bampton.
thesprucegoose
05-28-2009, 09:59 AM
Works like a charm!

Thanks so much. I just learned XSLT existed yesterday around noon, so I really appreciate the help :)

--thesprucegoose