XML Photo Gallery
August 2005 (perspective of a master's student)
The XML Photo Gallery is a lightweight, client-side open-source photo display system based on XML. I started this project in August 2005 as a successor of the (now defunct) People Photo Gallery project, which I created in Jan. 2005.
The XML Photo Gallery allows the user to focus on one specific picture while being able to view thumbnails for its 4 neighbors
As of June 2010, the XML Photo Gallery is now defunct and has been replaced with its successor, the JSON Photo Gallery. Now the most valuable contribution of this page is the design philosophy blurb:
Design Philosophy and Overview
(written in 2005, so some info might be outdated)
The beauty of using XML to store my data is its simple and lightweight nature. Because it is plain text, I can debug problems by observing it in a text editor or web browser, find differences using diff, efficiently place it under source control (e.g., CVS or Subversion), and transform it into alternate forms either for output to viewers or as input to other applications. This conceptual elegance starkly contrasts with the black-box opaqueness of a heavyweight relational database.
The majority of the photo gallery software on the Internet involves storing metadata about photographs in a database and using server-side scripts (written in languages such as Perl or PHP) to dynamically-generate webpages from the photos and metadata, and feeding it to the user via a web browser. The advantages of the traditional server-side approach include great scalability (because good database software can easily handle millions of entries), speed (limited by the server's hardware), and web browser independence (because the server does all of the hard work, and the client only sees a plain HTML page). The primary limitation of a server-side approach is that it requires access to a server that allows for script execution and database creation, which not everyone has access to.
Download this zip file,
unzip it, and open
python generate-xml-gal.py firstgal "My First Gallery"When the script completes, it should create an XML file and a sub-directory that contains resized images and thumbnails (it does not alter your original images). Move the XML file and gallery sub-directory (in this example: firstgal.xml and firstgal/) to the xml_photo_gallery/ directory (containing the contents of your unzipped zip file) Open your XML file in a web browser that supports XSLT (e.g., Firefox) and your gallery should be up and running! Manually edit your XML file (e.g., firstgal.xml) to add optional metadata such as photo titles, dates, and descriptions.
How to Create a New Gallery
Creating a new gallery is as simple as making an XML file and placing it in the same directory as support files in this zip archive.
A Gallery XML file contains a list of pictures and metadata (i.e., filename, dimensions, date, title, description); it must conform to the schema specified in gallery.dtd (View the source if no text is displayed). Here is an example XML file (view the source to see the original XML).
(Note that all text fields are surrounded by <![CDATA[ ... ]]> blocks. Any text inside these blocks are taken as literals and not parsed for special treatment. This allows you to enter text without fear of accidentally typing in XML markup characters. However, be careful about inserting in newlines in your XML text entries. My XSLT script cannot handle newlines well, so it simply gets rid of them.)
In order for the system to display your images, you need to first create
a skeleton Gallery XML file that contains the filenames and dimensions
of all photos you want to include in the gallery (preferably using my
Your gallery needs a name (specified by the <galleryName> XML tag) and a folder name (<folderName>). In addition, each <image> entry in the gallery must at minimum contain a filename, width, and height so that the system can properly find and display it.
You can create skeleton Gallery XML files and the proper photo thumbnails in several ways:
Python Script using PIL
(for users with Python)
This Python script, generate-xml-gal.py, is the preferred way to create new galleries. It uses the Python Imaging Library (PIL) to perform the requisite image processing. Unlike the BASH script (shown below), this Python script will automatically rotate your JPEG images and extract date information if available.
The source code comments contain more details about how to invoke this
script (i.e., command-line arguments). You should run it in a directory
with JPEG images (.jpg and .JPG) that you want to include in your
gallery. It will create
BASH Script using ImageMagick
(for users with UNIX-like environments)
I have deprecated this in favor of the Python version shown above, but you can try this if it's easier for you to setup ImageMagick than Python with PIL.
Picasa and Python Script
(for Windows users—warning, has not been tested since around 2006)
Picasa 2 is a free-to-download (but not open-source) image management program for Windows XP. Here is how it can be used to create skeleton Gallery XML files (Notice that this is much more tedious than the BASH or Python scripts, so if you are a Windows user, I would highly suggest getting Cygwin and running the BASH or Python script):
For greater compliance with many web browsers, you should add in a line
at the top of your newly-created XML file to specify that it conforms to
the DTD file
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE gallery SYSTEM "gallery.dtd"> <?xml-stylesheet type="text/xsl" href="xml_gal.xml"?>
XSLT stylesheet that works directly with Picasa 2
Martin Krolik has made a tweak to my xml_gal.xml stylesheet so that it works DIRECTLY with XML gallery files generated by Picasa 2 (without jumping through all of the hoops I outlined in the previous few paragraphs). I have never tried to use it myself, but here it is if you want to give it a shot!
Some Users of the XML Photo Gallery
The following people from around the Internet have used the code from this project to build their own galleries:
If you decide to use my code, please drop me a friendly email because I want to have a way to gauge interest in this project. Please also email me if you have any questions, comments, or suggestions. Thanks!