Jon Udell: Managing Web Images, Continued

Tangled in the Threads
Jon Udell, January 17, 2001
Managing Web Images, Continued

Readers supply enhancements and alternatives

More tools and techniques, plus an improved version of the JavaScript viewer

A few weeks ago, I wrote about tools and techniques for managing web images, and invited readers to write back, preferably to my newsgroup, and offer their own tools and techniques.

A number of folks did so. Managing sets of images on the web is, clearly, a common problem that has provoked a number of different solutions. Several people were looking for a solution that simply cranks out standardized thumbnail-and-gallery presentations.

Rick Hellewell:

I'd like a program that would create HTML pages of snapshots of graphic files in a folder (and all sub-folders).

The program would put a standardized template on the page (from an include file?), with links to the entire structure of the graphic files in each folder and sub-folder.

A dynamic process would be best, so I could just put the graphic images in the web server's page directory, and it would create the pages dynamically. But I'll accept a program that would create the HTML pages locally, and then I'll manually FTP the files to the server.

Another reader, Jim Cain, reports that he developed just such a solution:

We have a digital camera (who doesn't) and I was looking for a way to archive and display 'albums' of those images with the least possible amount of effort; of course, because I'm lazy.

I originally was using Photoshop scripting to resize the original 1.4+ M images down into 240x320 'thumbnails' that were easily viewable over the web by our poor sad relatives and friends that only have dialup access. This was painful, and still too much work.

I have now developed, and am using, something I call the PictoBot. It's chock full of images that no one but us cares about! With my PictoBot, I can simply copy the images on the camera directly to a folder on the server, and I'm done. The pages automatically recurse the file system structure, generate the thumbnails automatically, and display the images.

Here's an (inexpensive) commercial solution from Olof Lundberg:

I found a very quick and simple solution for web image management. I have been storing digital and scanned photos in a directory hierarchy giving each group of photos their own directory with a meaningful name.

Looking for a way to make them all accessible for a family spread out around the world on a private family website I found a piece of software called Arles Image Web Page Creator and after an hour of fiddling and tweaking with thumbnail and image sizes I had many hundreds of photos presentable via thumbnails on index pages and a process to add new sets of photos to the album quickly. All I had to do manually was a top-level main catalog page. But maybe you were looking for something more sophisticated?

I don't think "more sophisticated" is the right way to put it. When the goal is purely to batch process images into a basic web presentation, the techniques I illustrated are overkill. Many alternatives, including several mentioned here, are better for this kind of batch processing. The cases I've dealt involve more text, and more semi-structured data, along with images. In these cases, the irreducible effort is to lay out a template, define the image namespace, and build a data structure that expresses elements of text and semi-structured data plus the relationship between these and images. You have to write this stuff down somewhere. For me, it's easier to write it into a Perl data structure -- which tends to morph into a unique shape for each particular situation -- than to write it into fields of a fixed-function gallery builder.

gPhoto for Linux

Another reader wrote to recommend a Linux-based solution:

In the Linux world there is an app named gPhoto that does that also. It's pretty slick, just feed it the directory and a few minutes later you have a ton of thumbnailed images.

This nifty GTK+ app, included in many Linux distributions, can be found at www.gphoto.org. It will suck a batch of photos out of almost any digital camera, and can turn them into a web presentation. One especially nice touch is that you can specify a command line -- perhaps an ImageMagick mogrify command -- to intercept and transform your gallery's images.

gPhoto's gallery engine supports a couple of different styles, though they're all governed by fixed-function template like this:
<table>
<tr><td>#THUMBNAIL#</td></tr>
<tr><td>Thumbnail #THUMBNAIL_NUMBER#</td></tr>
<tr><td>Thumbnail #THUMBNAIL_FILENAME#</td></tr>
</table>
gPhoto is an open source app so you can, of course, change this. But I'd much prefer to invent new template language and processing in Perl than in C. In any case, fancy layouts aren't really the point of gPhoto. Comprehensive Linux support for digital cameras is its raison d'etre.

For me, downloading images from my camera isn't an issue. My printer, an HP PhotoSmart P1100, accepts SmartMedia cards which I can just use as mountable drives from Windows. No, I can't do that from Linux yet. I'm sure it will become possible, and when it does, it will not be hard to improve on the horror show that I endured when, reluctantly, I switched the non-Linux personality of the machine that drives this printer from NT to Win98 and then reinstalled the PhotoSmart software.

My particular situation notwithstanding, gPhoto's library of digicam drivers is a great acomplishment and a terrific asset. Because gPhoto offers a command-line interface, you can access these drivers from script -- a powerful capability that Windows developers rarely bother to provide. According to the gPhoto site, work is underway on gPhoto2. This project aims to abstract the UI, so gPhoto can support not just GNOME and KDE, but also Windows and other GUIs. It also aims to abstract the IO, and to deliver general support for serial, parallel, USB, and IEEE 1394 interfaces.

PhotoNet: groupware for photographers

Here's another solution mentioned in the newsgroup:

lachmeyers:

You might find the ArsDigita Community System interesting, in particular the photodb section. It uses ImageMagick for images, and AOLserver Tcl for the HTML serving.

ACS is an extended collaboration system, so most services can be implemented. An all-open-source version is available from OpenACS (openacs.org)

An example of the system in use for image processing and serving is at photo.net.

Indeed, photo.net is perhaps the archetype for this category. It's an extremely capable web application that you can use to upload photos, and create thumbnail galleries and annotated presentations that you can reserve privately, or share with others.

photo.net's layout and annotation capabilites are a bit limited. But here too, that's really beside the point. For Philip Greenspun, the proprietor of photo.net, founder of ArsDigita, and author of the remarkable Philip and Alex's Guide to Web Publishing, the focus is on large-scale database-backed collaboration. Photo.net isn't about layout and annotation, it's about the photos themselves. When you submit photos, you specify your camera, your film (if any!), your location, and can add a wealth of additional metadata. This all becomes searchable.

Of more immediate interest, usually, is the collaborative ranking performed by the photo.net community. Every photo in the system can be rated by viewers. If you want to view a page of stunning photos, try the photo critique filter. It's an ever-changing (and adjustable) view of the photos that have most impressed photo.net users.

Willem's improved JavaScript viewer

Here's what Willem van Schaik had to say about the JavaScript thumbnail viewer I mentioned in the last column:
I liked the pop-up window method Jon developed for his wife's web-pages. But, while implementing it in my own web-site I discovered it didn't work the same in all browsers. The problem was that no margin definition was included and that the image size was not specified, but was using a "width=100%".

This was of course easily fixed by replacing the "width += 20" with an additional variable "winWidth = width + 18" (18 instead of 20 is only to make it matching with my chosen marginsize). The second improvement I made was to add some code so that the window is closed when the user clicks on it and to show that with an "alt=..." parameter.

If you want to see what the result becomes, give it a try at:

http://www.schaik.com/nlsat/nlsat.html

which also shows some cool satellite images.

The script now becomes:

<script language="JavaScript">  </script>

and the way to use this in your HTML code:

<td><a href="#tag" onclick="javascript:openwindow('imgName.jpg','imgTag',640,480,'imgTitle')"><img src="imgIcon.gif" width="100" height="75" border="0" alt="imgTitle (click to enlarge)"></a></td>

Here you should replace everything in the form of imgXxxxx and of course the image and icon sizes with your own values. And you better put the whole thing on one single line.

Just my $0.02. I hope it is useful to some people,
Excellent! Thanks so much, Willem! In my version there was, indeed, a troubling inconsistency in the margin treatment, as between IE and Netscape. Your version fixes this. And since it has the same method signature, it was a drop-in replacement for my version. I adopted it straightaway.

Jon Udell (http://udell.roninhouse.com/) was BYTE Magazine's executive editor for new media, the architect of the original www.byte.com, and author of BYTE's Web Project column. He's now an independent Web/Internet consultant, and is the author of Practical Internet Groupware, from O'Reilly and Associates. His recent BYTE.com columns are archived at http://www.byte.com/index/threads

This work is licensed under a Creative Commons License.