CODEWITHSUNDEEP
htmlcssxmlxslt
Manisha Singh Sanoo
Manisha Singh Sanoo

Reputation: 929

Difficulties to display pictures next to each other in XSLT file

My XML file is displayed using XSLT and i want the tables to be next to each other, that is, 3 columns in a row. What i have till now is that it is displaying one after each other.

Here's the xml:

<Result>
<DressPrice>
  <Name>Dress 2</Name>
  <Price>20</Price>
  <Image>2.jpg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 9</Name>
  <Price>20</Price>
  <Image>9.jpg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 10</Name>
  <Price>20</Price>
  <Image>10.jpg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 11</Name>
  <Price>20</Price>
  <Image>11.jpg</Image>
</DressPrice>
<DressPrice>
  <Name>Dress 12</Name>
  <Price>20</Price>
  <Image>12.jpg</Image>
</DressPrice>
</Result>

The XSLT:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:strip-space elements="*" /> 
<xsl:template match="/">
<html>
    <head><title>Dresses Per Price</title>
    <link rel="stylesheet" type="text/css" href="price.css"/>
    </head>
    <body>
        <h3>Dresses Per Price Displayed</h3>
        <table>
            <thead>
                <tr style="background-color:PaleGreen;"></tr>
                <tr></tr>
            </thead>
            <tbody>
                <xsl:for-each select="Result">
                    <xsl:apply-templates>
                        <xsl:sort select="Name" data-type="text" order="ascending"/>
                    </xsl:apply-templates>
                </xsl:for-each>
            </tbody>
        </table>

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

<xsl:template match="DressPrice">
<xsl:variable name="cssClass">
    <xsl:choose>
        <xsl:when test="position() mod 2 = 0">coloured</xsl:when>
        <xsl:otherwise>normal</xsl:otherwise>
    </xsl:choose>
</xsl:variable>
        <table>
       <tr>
        <xsl:apply-templates select="Image"/>
        </tr>
        </table>
        <table  width="300px" style="text-align:center;">
   <tr style="font-family:Gisha; font-size:15px; color:black;" width="100px" colspan="2"> <xsl:apply-templates select="Name"/></tr>
   </table>
   <table width="300px" style="text-align:center;">
   <tr style="font-family:Gisha; font-size:15px; color:black;"><xsl:apply-templates select="Price"/>
</tr>
</table>
</xsl:template>
<xsl:template match="Image"> <!--To display image-->
    <td style="border: 2px solid black;"><img src="{.}" width="350px"/></td>
</xsl:template>

<xsl:template match="Price">
<td style="width:100px;">$<xsl:value-of select="text()"/></td>
</xsl:template>

<xsl:template match="Name">
<td style="width:100px;"><xsl:value-of select="text()"/></td>
</xsl:template>
</xsl:stylesheet>

How can i make it display 3 per rows?(The image, description and price per row).

Upvotes: 0

Views: 517

Answers (1)

michael.hor257k
michael.hor257k

Reputation: 117100

---edited---

To create a table that displays 3 products side-by-side in the same row, try:

XSLT 1.0

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/Result">
    <html>
        <head>
            <title>Dresses Per Price</title>
            <link rel="stylesheet" type="text/css" href="price.css"/>
        </head>
        <body>
            <h3>Dresses Per Price Displayed</h3>
            <table>
                <xsl:for-each select="DressPrice[position() mod 3 = 1]">
                    <tr>
                        <xsl:apply-templates select=". | following-sibling::DressPrice[position() &lt; 3]"/>
                    </tr>
                </xsl:for-each>
            </table>
        </body>
    </html>
</xsl:template>

<xsl:template match="DressPrice">
    <td>
        <img src="{Image}"/>
        <br/>
        <xsl:value-of select="Name"/>
        <br/>
        <xsl:value-of select="format-number(Price, '$0.00')"/>
    </td>
</xsl:template>

</xsl:stylesheet>

Note:

Another option is to create an unordered list of all products:

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/Result">
    <html>
        <head>
            <title>Dresses Per Price</title>
            <link rel="stylesheet" type="text/css" href="price.css"/>
        </head>
        <body>
            <h3>Dresses Per Price Displayed</h3>
            <table>
                <ul>
                    <xsl:apply-templates select="DressPrice"/>
                </ul>
            </table>
        </body>
    </html>
</xsl:template>

<xsl:template match="DressPrice">
    <li>
        <img src="{Image}"/>
        <br/>
        <xsl:value-of select="Name"/>
        <br/>
        <xsl:value-of select="format-number(Price, '$0.00')"/>
    </li>
</xsl:template>

</xsl:stylesheet>

then use CSS to arrange the list in a grid.

Upvotes: 1

Related Questions