XSL Image Grid with products

Question

Hello I am trying to make a grid of products with tables using XSL because later on it might be used on a newsletter.

I want the table to dynamically increase rows but I want it to have 3 cells.

I have made a decent try to this

XSL:

<?xml version="1.0" encoding="utf-8"?>
<!-- Edited by XMLSpy® -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <head>
  <title>Product Grid</title>
  <style>
  td {font-family: Verdana; font-size:12px;min-width:100px;}
   </style>
  </head>
  <body style="font-family: Verdana; font-size:10px;">
  <h2>Products</h2>
    <table border="1">
        <xsl:for-each select="credentials/host"> 
            <xsl:if test="position() mod 3 = 1">
                <xsl:text>test</xsl:text>
            </xsl:if>

            <td>
                <p><img><xsl:attribute name="src"><xsl:value-of select='imgsource'/></xsl:attribute></img></p>
                <p><xsl:value-of select='productname'/></p>
                <p><xsl:value-of select="position()" /></p>
            </td>
        </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

As you can see the condition to do something after 3 tds is right but I dont know how to create a new row there. If i have a tr open in the loop and try to close it only when condition is true I get an error.

My test XML file is like this:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="first_try.xsl"?>
<credentials xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <host>
        <productid>12312322</productid>
        <productname>sg230</productname>
        <category>tablets</category>
        <name>Name1</name>
        <details>Wifi</details>
        <price>100</price>
        <imgsource>imageurl</imgsource>
    </host>
    <host>
        <productid>2223134</productid>
        <productname>qe256</productname>
        <category>netbooks</category>
        <name>name2</name>
        <details>3G</details>
        <price>123</price>
        <imgsource>imageurl</imgsource>
    </host>
    <host>
        <productid>334213452</productid>
        <productname>er675</productname>
        <category>mobile phones</category>
        <name>name3</name>
        <details>Bluetooth</details>
        <price>80</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>34234</productid>
        <productname>sd54</productname>
        <category>games</category>
        <name>name4</name>
        <details>Retina</details>
        <price>1222</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>245432523</productid>
        <productname>sh1132</productname>
        <category>PC</category>
        <name>name5</name>
        <details>i7</details>
        <price>2234</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>5234523345</productid>
        <productname>kle500</productname>
        <category>Mac</category>
        <name>name6</name>
        <details>i5</details>
        <price>3333</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>2342</productid>
        <productname>gs650</productname>
        <category>PC</category>
        <name>name7</name>
        <details>AMD</details>
        <price>4444</price>
        <imgsource></imgsource>
    </host>
    <host>
        <productid>1231</productid>
    </host>
    <host>
        <productid>123123</productid>
    </host>
    <host>
        <productid>123123</productid>
    </host>
    <host>
        <productid>123123</productid>
    </host>
    <host>
        <productid>123123</productid>
    </host>
    <host/>
    <host/>
</credentials>

The desired output would be like this:

<tr>
  <td>
    <p> Product Name 1 </p>
    <p> Image 1 </p>
    <p> Details 1</p>
  </td>

  <td>
    <p> Product Name 2 </p>
    <p> Image 2 </p>
    <p> Details 2</p>
  </td>

  <td>
    <p> Product Name 3 </p>
    <p> Image 3 </p>
    <p> Details 3</p>
  </td>
</tr>

<tr>
  <td>
    <p> Product Name 4 </p>
    <p> Image 4 </p>
    <p> Details 4</p>
  </td>

  <td>
    <p> Product Name 5 </p>
    <p> Image 5 </p>
    <p> Details 5</p>
  </td>

  <td>
    <p> Product Name 6</p>
    <p> Image 6</p>
    <p> Details 6</p>
  </td>
</tr>

<tr>
  <td>
    <p> Product Name 7 </p>
    <p> Image 7 </p>
    <p> Details 7</p>
  </td>

And this will continue dynamically..

Thanks a lot for your time in advance.

Bill.

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Please try this code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Edited by XMLSpy® -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
        <html>
            <head>
                <title>Product Grid</title>
                <style>
  td {font-family: Verdana; font-size:12px;min-width:100px;}
   </style>
            </head>
            <body style="font-family: Verdana; font-size:10px;">
                <h2>Products</h2>
                <table border="1">
                    <xsl:for-each select="credentials/host">
                        <xsl:if test="position() mod 3 = 1">
                            <tr>
                                <xsl:apply-templates select=".|following-sibling::host[position() &lt; 3]" mode="row"/>
                            </tr>
                        </xsl:if>
                    </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="host" mode="row">
        <td>
            <p><img><xsl:attribute name="src"><xsl:value-of select='imgsource'/></xsl:attribute></img></p>
            <p><xsl:value-of select='productname'/></p>
            <p><xsl:value-of select="position()" /></p>
        </td>
    </xsl:template>
</xsl:stylesheet>

this is adapted from Tim C (XSLT split result in groups of 3)

Wow mate thanks a lot! I didnt found this post earlier! I will try to understand it now! Thanks for your time mate! — vaskort, Jan 16 '14 at 08:52

XSL Image Grid with products

1 Answers1