First encounters with XML and XSL

Looking at the photographs, I realized that for each photo, there was a consistent set of data that was needed to properly display it: a title, a caption, and the name and size of the photo and its thumbnail. XML seemed a rather ideal way for managing all of this data, so I threw together a schema for each photo that looked something like this:

    <photo>
      <file width="590" height="394">achmelv-camp2.jpg</file>
      <thumb width="122" height="80">achmelv-camp2-t.jpg</thumb>
      <title>Camping in Achmelvich</title>
      <caption>
      "You make you're <em>own</em> bloody tea!"
      </caption>
    </photo>

In order to make the title and caption entries easier to handle, I combined all of the data into a single file, went through it with a text editor, then used a perl script to split it up into a separate XML file for each photo. (This made for much faster processing, later.)

I combined this with another set of XML files listing which photos corresponded to each day (and chunk, although I later opted to have only one thumbnail frame per day, since many chunks would have been left empty). These XML files were passed through an XSL transform engine, which read in the corresponding XML file for each photo, and in the end, produced an HTML file for each day that displayed all the thumbnails. By having all the photo information in XML files, I was able to do things like include the title in the picture's alt tag, and include the height and width tags for faster rendering of the surrounding frame and text elements. Along with the photo information, the XSL stylesheet included all the JavaScript necessary to handle horizontal or vertical alignment, and to display the enlarged photo when the thumbnail was clicked.

As an added bonus, I thought it would be helpful to include the file size in the alt tag. The XSL engine didn't have any way of getting this information, but since I had to run a perl script to generate the multiple XML files from the one large source, I just extended that program to check the file size of the photo before writing the XML file, and including a "<size>" tag with that information. Then all it took was a quick addition to the XSL stylesheet, and a pass through the transform engine, and instantly (well, almost instantly) all the alt tags had size information in them.

(continued)

Copyright © 2000
Last updated: 12 Jan 2000 15:33:59