CODEWITHSUNDEEP
htmlxmlimagetemplatesxslt
Ibrahim
Ibrahim

Reputation: 111

Inserting images from XML to XSL document

I was wondering if there is any way I can declare an image in the XML file using an element or attribute and then use this image in the XSL file to input it into a table instead of having to create the table in XSL and inputting the images into the table cells one by one. Here is my current XML document(incomplete as I am just testing it out). 

<?xml version= "1.0"?>
<?xml-stylesheet type="text/xsl" href="stylesheet4.xsl"?>
    <countries>
        <country> 
            <countryname>United States</countryname>
            <countryflag>bg_locale.jpg</countryflag>
        </country>

        <country>
            <countryname>United Kingdom</countryname>
        </country>

        <country>
            <countryname>Deutschland</countryname>
        </country>
        </countries>

Here is the XSL file i created and the method i tried using: 

<?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="/countries">
<html>
<body bgcolor="black">

<div id="container" style="100%">

<div id="header" style="background-color:black; height:60px"></div>


<div id="content_container" align="center">
    <div id="content" align="left" style="background: url('bg_locale.jpg');height:845px;width:848px">
    Content goes here
    <img src="logo_timber.jpg" align="left"/><br/>
<br/>
<br/>
<br/>
<table border="1">

<tr>
<xsl:apply-templates/>
</tr>

</table>
</div>

</div>

</div>
</body>
</html>

</xsl:template>

<xsl:template match="country">
<tr><td><xsl:value-of select="countryflag"/></td></tr>
</xsl:template>

</xsl:stylesheet>

As you can see I have created a table and want the XSL to get the image from the XML file and then have it so every countryflag image is displayed in the table one by one.

Upvotes: 5

Views: 23108

Answers (2)

Rookie Programmer Aravind
Rookie Programmer Aravind

Reputation: 12154

This is not exact solution but I am demonstrating you how to use for-each to copy different flags!

 <xsl:template match="/countries">
    <table>
      <xsl:for-each select="country">
        <tr>
          <td>
            <xsl:value-of select="countryname"/>
          </td>
          <td>
            <xsl:element name="img">
              <xsl:attribute name="src">
                <xsl:value-of select="countryflag"/>
              </xsl:attribute>
              <xsl:attribute name="align">left</xsl:attribute>
            </xsl:element>
          </td>
        </tr>
      </xsl:for-each>
    </table>
  </xsl:template>

This will copy value of different countryflag in different rows !

Ps: This is just a sample code! I am not checking if countryflag is present or not. I am assuming it will always be there.. You need to have a check if countryflag is present/null on safer end before creating img tag otherwise it might create img tag with src as null..

EDIT: simpler solution with no <xsl:element> tag ..

 <xsl:template match="/countries">
    <table>
      <xsl:for-each select="country">
        <tr>
          <td>
            <xsl:value-of select="countryname"/>
          </td>
          <td>
            <img src="{countryflag}" align="left"/>
          </td>
        </tr>
      </xsl:for-each>
    </table>
  </xsl:template>

Upvotes: 6

eisenstein
eisenstein

Reputation: 31

You should provide a select attribute to your apply-templates element. discard also tr-tags enclosing it:

<?xml version="1.0" encoding="ISO-8859-1"?>


<xsl:template match="/countries">
    <html>
    <head></head>
        <body bgcolor="black">
            <div id="container" style="100%">
                <div id="header" style="background-color:black; height:60px"></div>
                <div id="content_container" align="center">
                    <div id="content" align="left" style="background: url('bg_locale.jpg');height:845px;width:848px">
                    Content goes here
                    <img src="logo_timber.jpg" align="left"/><br/>
                    <br/>
                    <br/>
                    <br/>
                    <table border="1">
                        <xsl:apply-templates select="country" />
                    </table>
                    </div>
                </div>
            </div>
        </body>
    </html>
</xsl:template>

<xsl:template match="country">
    <tr>
        <td>
            <xsl:value-of select="countryflag"/>
        </td>
    </tr>
</xsl:template>

Upvotes: 3

Related Questions