PDA

View Full Version : How to arrange pics in two columns with XSL from XML data...

SickMothaF
08-10-2006, 11:43 AM
Hi, I have simple XML file containing all pics. With this current XSL the pics are displayed one after another in one column.

MY QUESTION is : how to arrange the pictures so they are in two columns? Something like :

[pic1] [pic2]

[pic3] [pic4]

[pic5] [pic6]

Here is the code.

XML is for example ...

<PicName>path1/path2/Pic001.jpg</PicName>

The code in the xsl to display it is :

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


<xsl:template match="/">
<html><head></head><body>

<xsl:apply-templates />

</body></html>
</xsl:template>

<xsl:template match="Pics">
<span>

<img style="padding:0px 0px 0px 0px; margin:0px 10px 10px 0px; border:1px solid #000000; height:300px; width:400px">

<xsl:attribute name="src">
<xsl:value-of select="PicName" />
</xsl:attribute>

</img>
</span>
</xsl:template>

</xsl:stylesheet>


Thanks!:thumbsup:
probey20
08-11-2006, 08:11 PM
Try using extension functions to keep a picture counter, like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.1" xmlns:lxslt="http://xml.apache.org/xslt" xmlns:my-ext="ext2" extension-element-prefixes="my-ext">
<xsl:output method="html"/>
<lxslt:component prefix="my-ext">
<lxslt:script lang="javascript">
var currentPosition = 1;

function setCurrentPosition()
{
currentPosition++;
return currentPosition;
}
function getCurrentPosition()
{
return currentPosition;
}
</lxslt:script>
</lxslt:component>

<xsl:template match="/">
<html>
<body>
<table border="1">
<xsl:apply-templates/>
</table>
</body>
</html>
</xsl:template>

<xsl:template match="Pics">
<xsl:if test="my-ext:getCurrentPosition() mod 2 = 1">
<xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
</xsl:if>
<td>
<img style="padding:0px 0px 0px 0px; margin:0px 10px 10px 0px; border:1px solid #000000; height:300px; width:400px">
<xsl:attribute name="src">
<xsl:value-of select="PicName"/>
</xsl:attribute>
</img>
</td>
<xsl:if test="my-ext:getCurrentPosition() mod 2 = 0">
<xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
</xsl:if>
<xsl:if test="my-ext:setCurrentPosition()"/>
</xsl:template>
</xsl:stylesheet>
SickMothaF
08-12-2006, 12:30 AM
Hey,thanks very much !

I will try it and let you know :thumbsup:
SickMothaF
08-12-2006, 11:15 AM
Hi, the counter works, but the pictures are not displayed (only their path names) and also the whole data from the xml is displayed in one line. (only using your code).

?
SickMothaF
08-13-2006, 02:20 PM
Anyone? Please help!
probey20
08-14-2006, 09:51 PM
Try this, to get the pictures to show up:

<img src="{PicName}" style="padding:0px 0px 0px 0px; margin:0px 10px 10px 0px; border:1px solid #000000; height:300px; width:400px"/>
SickMothaF
08-15-2006, 10:47 AM
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="windows-1251"
doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>
<xsl:template match="/ContentsOfXML">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<title>Untitled Document</title>


</head>

<body>
<table>
<xsl:apply-templates select="Pictures" />
</table>
</body>
</html>

</xsl:template>

<xsl:template match="Pictures">

<xsl:for-each select=".">

<td>

<img style="padding:0px 0px 0px 0px; margin:10px 10px 40px 0px; border:1px solid #000000; height:278.1px; width:370.4px">
<xsl:attribute name="src">
<xsl:value-of select="PictureName" />
</xsl:attribute>


</img>


</td>
</xsl:for-each>
<xsl:if test="position() mod 2 = 0" >
<tr />
</xsl:if>



</xsl:template>

</xsl:stylesheet>