Line break with XSLT

**thesprucegoose** · 05-27-2009 02: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

Code:

<?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&#37;; 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:

Code:

<?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 08:23 AM

Hello, I modify your code because it was so verbose, all you had to do was check the position() function

Code:

<?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&#37;; 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 08:59 AM

Works like a charm!

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

--thesprucegoose

Thread: Line break with XSLT

Thread Tools

Display

Line break with XSLT

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions