Back to Geek Talk March 9, 2005

XML - How to process & display images in an XML-based database

A while ago, I used OrangeCD to catalog my CDs and used its report utility to generate an HTML format of my CD catalog.  Then I thought why not write this application in XML?  Reading articles like this since the beginning of the popularity of XML, I'd been skeptical about large XML-based databases and how modern browsers might handle them.  

I set out to find out how sluggish XML is.  For this I needed a large database such as my CD Catalog (the largest database that I had available to me anyway). I started by writing, a PHP program to convert the HTML files into one XML data file (537 KB).  Then I used Altova's IDE to write the XML Schema file and the XSLT file for my CD Catalog application.

Well, it turned out that large XML documents could be very CPU intensive during the validation process against their schema, or when an Internet browser using it's built-in XSLT processor is transforming a rather small data file (in this case: 537 KB) to generate an XML output of size 1.6MB on the fly.

If your browser is IE 5+ or NS 7+, take a look at the XML format of the CD Catalog and notice that your browser will take a good 25-40 seconds (depending on your PC, OS, and the type of browser) to process this 'not so big' file.  What if your CD catalog is larger than 1000. . . !

While the speed of XML data processing was my main objective, I ran into some difficulties with:

- defining image data in the schema(CD cover art thumbnails in XML output)
- tagging them in the XML, and
- processing them in the XSL file 

I Googled for a while and found lots of examples and tutorials about the subject, but none of them where clear and to the point.  Finally, I was able to put the essence of the examples together (what do we do without the Internet!) and get it to work as shown below:

• In the XML Schema (.xsd) define an element name "img" of type xs:string.  For example:
  <Xs:element name="img" type="Xs:string"/>
• In the (.xml) file include the path to the image (file name) as shown:
  <img>path/to/your/image.jpg</img>
• In the (.xsl) file use the attribute name "src", which specifies the text value of the "img" in the XML document, as shown here:
  <xsl:element name="img">
  <xsl:attribute name="src"><xsl:value-of select="img"/></xsl:attribute>
  </xsl:element>

Note: I limited the XML sample data (button below) to only 2 CDs for the sake of simplicity. Also, I changed the type of the (xsl) file to (txt) to prevent your browser from processing so that you can see the source code.

---