CODEWITHSUNDEEP
xmlxslt
Shreya Srinivas
Shreya Srinivas

Reputation: 577

XSLT and XML - Grouping and displaying images into tables

I'm creating a website for an artist where I have to organize her paintings into four separate tables according to their categories. I have an XML document that lists all the paintings, organized accordingly(this is just a shortened version):

   <CATALOG>
       <CITYSCAPES>
           <PAINTING>
              <CATEGORY>Cityscapes</CATEGORY>      
              <TITLE>Alley in Florence</TITLE>
              <DIMENSIONS>15 X 20 in.</DIMENSIONS>
              <PRICE>400 $</PRICE>
             <file type="gif">images/thumbnails/cityscapes/alley in florence.gif</file>
            </PAINTING>
            <PAINTING>
               <CATEGORY>Cityscapes</CATEGORY>      
               <TITLE>Christmas in New York</TITLE>
               <DIMENSIONS>12 X 14 in.</DIMENSIONS>
               <PRICE>250 $</PRICE>
               <file type="gif">images/thumbnails/cityscapes/christmas in new york.gif</file>
            </PAINTING>
            <PAINTING>
               <CATEGORY>Cityscapes</CATEGORY>      
               <TITLE>New York, New York</TITLE>
               <DIMENSIONS>21 X 29 in.</DIMENSIONS>
               <PRICE>495 $</PRICE>
               <file type="gif">images/thumbnails/cityscapes/new york new york!.gif</file>
            </PAINTING>
            <PAINTING>
               <CATEGORY>Cityscapes</CATEGORY>      
               <TITLE>30th Street Station</TITLE>
               <DIMENSIONS>10 X 11 in.</DIMENSIONS>
               <PRICE>SOLD</PRICE>
               <file type="gif">images/thumbnails/cityscapes/philly 1.gif</file>
            </PAINTING>
       </CITYSCAPES>
       <FLORA>
           <PAINTING>
               <CATEGORY>Flora</CATEGORY>      
               <TITLE>Plumeria</TITLE>
               <DIMENSIONS>14 X 20 in.</DIMENSIONS>
               <PRICE></PRICE>
               <file type="gif">images/thumbnails/flora/plumeria.gif</file>
          </PAINTING>
          <PAINTING>
           <CATEGORY>Flora</CATEGORY>      
                <TITLE>Tropical in Red</TITLE>
                <DIMENSIONS>14 X 20 in.</DIMENSIONS>
                <PRICE>SOLD</PRICE>
                <file type="gif">images/thumbnails/flora/red leaf.gif</file>
          </PAINTING>
          <PAINTING>
             <CATEGORY>Flora</CATEGORY>      
             <TITLE>Sunflower</TITLE>
             <DIMENSIONS>14 X 20 in.</DIMENSIONS>
             <PRICE></PRICE>
         <file type="gif">images/thumbnails/flora/sunflower.gif</file>
          </PAINTING>
     </FLORA>
   </CATALOG>

The four categories are:Cityscapes, Flora, Still Life, and Fauna (I have left the last two out in this code), so the structure is CATALOG/CITYSCAPE/PAINTING OR CATALOG/FLORA/PAINTING, when I want to access the image.

I have an XSLT stylesheet that displays the images, where there are four images per row:

    <html>
        <body>

            <table style="margin: 0 auto;" cellspacing="30">
                <xsl:for-each select="CATALOG/CITYSCAPE/PAINTING[position() mod 4 = 1]">
                    <xsl:if test="CATEGORY='Cityscapes'">
                        <tr>
                        <xsl:for-each select=" . | following-sibling::*[position() &lt; 4]">
                            <td valign="bottom" align="center">
                                <img src = "{file}"></img>
                                <p><xsl:value-of select="TITLE"/></p>
                                <p><xsl:value-of select="DIMENSIONS"/></p>
                                <p><xsl:value-of select="PRICE"/></p>
                            </td>
                        </xsl:for-each>
                    </tr>
                    </xsl:if> 
                </xsl:for-each>
            </table>
            <table style="margin: 0 auto;" cellspacing="30" border="1">
                <xsl:for-each select="CATALOG/FLORA/PAINTING[position() mod 4 = 1]">
                    <tr>
                        <xsl:for-each select=" . | following-sibling::*[position() &lt; 4]">
                            <td valign="bottom" align="center">
                                <img src = "{file}" width="120" height="100%"></img>
                                <p><xsl:value-of select="TITLE"/></p>
                                <p><xsl:value-of select="DIMENSIONS"/></p>
                                <p><xsl:value-of select="PRICE"/></p>
                            </td>
                        </xsl:for-each>
                    </tr>
                </xsl:for-each>
            </table>
            <table style="margin: 0 auto;" cellspacing="30" border="1">
                <xsl:for-each select="CATALOG/STILL/PAINTING[position() mod 4 = 1]">
                    <tr>
                        <xsl:for-each select=" . | following-sibling::*[position() &lt; 4]">
                            <td valign="bottom" align="center">
                                <img src = "{file}" width="120" height="100%"></img>
                                <p><xsl:value-of select="TITLE"/></p>
                                <p><xsl:value-of select="DIMENSIONS"/></p>
                                <p><xsl:value-of select="PRICE"/></p>
                            </td>
                        </xsl:for-each>
                    </tr>
                </xsl:for-each>
            </table>
        </body>
    </html>
</xsl:template>    

</xsl:stylesheet>

I have created separate tables for each of the categories and the code for the table works perfectly fine in Chrome when displaying the Cityscape images but it fails to display images for the following three categories. However all the text for the paintings' titles, dimensions, and price is shown clearly. I have been searching for an answer to this issue and I feel it lies in the way I have structured my XML document. I have tried several ways to fix this, including filtering images by category in the for-each loops

Upvotes: 2

Views: 3281

Answers (1)

Tim C
Tim C

Reputation: 70648

In your 'CITYSCAPES' loop, you have this code to render an image

<img src = "{file}"></img>

But in your other ones, you do this

<img src = "{file}" width="120" height="100%"></img>

I wonder if Chrome is objecting to the height being a percentage here?

Of course, this leads on to another issue, mainly of code repetition. If it works for 'CITYSCAPES' then you really want to be using the same code!

To do this, create a template to match any child element of CATALOG

<xsl:template match="CATALOG/*">

Then change your xsl:for-each to iterate over PAINTING relevant to the current element, like so:

<xsl:for-each select="PAINTING[position() mod 4 = 1]">

You would also need to take out the un-necessary xsl:if

Try the following XSLT instead:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="html" indent="yes"/>

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

   <xsl:template match="CATALOG/*">
      <table style="margin: 0 auto;" cellspacing="30">
         <xsl:for-each select="PAINTING[position() mod 4 = 1]">
            <tr>
               <xsl:for-each select=" . | following-sibling::*[position() &lt; 4]">
                  <td valign="bottom" align="center">
                     <img src="{file}"/>
                     <p>
                        <xsl:value-of select="TITLE"/>
                     </p>
                     <p>
                        <xsl:value-of select="DIMENSIONS"/>
                     </p>
                     <p>
                        <xsl:value-of select="PRICE"/>
                     </p>
                  </td>
               </xsl:for-each>
            </tr>
         </xsl:for-each>
      </table>
   </xsl:template>
</xsl:stylesheet>

Note that using this approach you won't have to make any changes should you need to add a fifth category, or more.

Upvotes: 2

Related Questions