·~{dRNn}~·

More than a year ago I did a small extra exercise for my XML lecture.

Encouraged by a photo gallery done by Philip Guo a Ph.D candidate at Stanford, I started doing my own system, I took the challenge to write an open-source photo gallery based on XML technologies. I started the project on December 2006, the first version was finished by January 2007. (Un)fortunately  in an accident I lost all file sources and I had to redo again my gallery system, from scratch. The new version was finished on May 2008.

This system, basically, is a graphic interface to exhibit pictures and meta-data attached to each one. In this new version there is a simple upper bar (number based) with links to open each picture and its meta-data, a central frame for pictures and a upper title for each gallery. This version has been set up to be integrated in space and style, directly on my blog.  But as it is XML based, it can be adapted in style and functionality to another specific needs.

The concept was to generate XML documents to store information about my pictures and to transform these documents using XML-tools into web-pages to publish and share my pictures. I chose XML because is a light but powerful technology to arrange, organise and store different sort of data in a structured way. XML allows to separate completely content from structure, design and functionality in a versatile manner. I used here XML to document my photos and to add information related to them (a title, notes, dates). I used XML-tools to transform these documents into a web-page gallery, too.

The system consists of three files: a skeleton (XML), a document schema (XSD) and a transformation extensible stylesheet (XSL-T). I use Xalan as a XSLT processor, in order to process my XML files and doing so generate a HTML output file, that combine with a CSS and a Javascript! file are the final gallery.

XML files.

• XML gallery document, this XML file is the core of each gallery, it contains a list of pictures and meta-data related to each picture (i.e, filename, dimensions, date, title and description). It is the one required to generate the web-page gallery, for each gallery should exist one. Here is an example of this XML file.
• XSD Schema, this XML file is the document description with all terms of limits on the structure and content of the XML gallery document, all XML gallery files must be conformed to it. It is a generic-abstract view of my gallery. Here is the Schema file.
• XSL-T, finally my stylesheet. This XSLT file describes how my XML gallery documents are  transformed into HTML documents. In this new version I applied two templates rules to the source XML tree. The transformation is done by a XSLT preocessor in this case I used Xalan. Here is the XSLT file.

How to use it.

1. Create a XML gallery document, in there you should provide:

• <galleryFolder folder=”myFolder”/> the folder that contains all your pictures: *.jpg, *.gif or *.png
• <galleryName> Name of your gallery.
• <image>there you provide the file name, picture dimensions: width and height, a date, a title and a description.

2. Save all your files (XML,XSD, XSLT) in the Xalan root folder.  Usually “/xalan-j_2_7_1″
3. In the Command Prompt under C:\..\xalan-j_2_7_1> type the following command:
   

   • java -jar xalan.jar -in myXmlFile.xml -xsl processdrnn(simple).xslt -out myHtmlFile.html

4. Once Xalan has output the HTML, you should place it in the same folder with the css, and the javascript! file and your pictures folder (<galleryFolder folder=”myFolder”/>).

Now, if you have all files on the right places, you should be able to open your HTML gallery file in the web browser. If you want you can change the CSS and the javascript! file to customise design and interaction, if you want to add new information then first you have to declare a new document structure in the Schema and then implement it in the XML file, otherwise the document is not valid and Xalan gives you an error during processing.

Perhaps is a lit bit difficult to write or fill up manually your XML files, then the next step should be to write an XML application to do automatically this XML files, but I don’t have enough time for this is a task.

Finally here are all needed files in *.rar and *.zip. Each compressed files contains a XML skeleton, the XML schema, a XSL-T file, a CSS file, a JS file. As well as a complete example, all pictures contained there were taken in a short trip I did to Minden in north Germany.

Example:

Any comment would be more than Welcome!
Many thanks to: Philip Guo and Rainer Müller.

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.