You Look Marvelous on the Web!

Marcel Gagné

Issue #171, July 2008

Looking good is easy for our regular guests. However, looking good on the Web takes a little more work, which doesn't mean it can't be a lot of fun. With a little help from your Linux system, your smile will shine on-line!

Yes, François, I think it would be great to add a gallery of our regular guests on the restaurant's Web site, but I do have a couple concerns. First and foremost, I really don't think you should call it a “Rogue's Gallery”. Second, why on earth are you coding HTML by hand? That's going to take forever, and our guests will be here momentarily. Lucky for you, tonight's menu has some great free software for your Linux system that will make creating the gallery a breeze—later, though. I can see our guests arriving as we speak.

Good evening and welcome one and all to Chez Marcel! Your tables are ready, as are we to serve you. My faithful waiter, François, will fetch your wine while I introduce tonight's featured Linux software. François, to the wine cellar. Vite! In the South wing, you'll find a case of 2003 Sariza from Bulgaria. The Sariza is a great medium-bodied red wine that I'm sure you'll enjoy.

I must tell you that François had an excellent idea that involved creating a Web photo gallery. Before I show you how easy it can be to create such a gallery, I should tell you about a package you need to have on your system—a package that will let you do all sorts of magical things with images. No, I'm not talking about The GIMP. The package is ImageMagick, and if you don't have it installed already, you should do so now, as we'll need its tools later. What sorts of tools? Well, for instance, you can find some interesting information about a media file by using the identify command:

$ identify myphoto.jpg
myphoto.jpg JPEG 800x1161 DirectClass 271kb

As you can see, the photo is 800 pixels wide by 1,161 pixels in height, and it is a JPG image. What if I wanted to create a small 150-pixel-wide thumbnail from this image? ImageMagick has a tool for that as well. It's called mogrify:

mogrify -geometry 150 myphoto.jpg

And, just like that, we have a 150-pixel-wide photo. Of course, you might want to have a backup of the original.

Although not a Web album, you can use the montage command to create a montage, much like a photographic contact sheet:

montage -geometry +5+5 -size 150 -frame 20 lugnuts/*.jpg lugnuts.png

The resulting image (Figure 1), complete with a nice beveled frame, can be printed and stored in an physical album. Pretty cool, non?

Figure 1. The ImageMagick montage command makes it possible to create quick-and-easy contact sheets.

To get those images to the Web, we have other tools. Some require that you have server-side access to the server, and these can be quite complex and feature-rich. I'll show you one of those shortly. In the meantime, let's assume you don't have shell access to your Web site or you aren't allowed to install programs or run scripts. You might well be in a bind if you want those pictures on your own Web site. Fear not. This is where iGal and our friends, the ImageMagick group of tools, come into play. iGal is a simple Perl script, originally written by Eric Pop (at Stanford). These days, iGal is maintained and updated by Wolfgang Trexler. This is a wonderful tool that allows you to create a presentation of images in a hurry, whether for your Web site, for your family or for your company. You can get the latest iGal from Wolfgang's site at trexler.at/igal.

Installing this is child's play, because iGal (which stands for Image GALlery generator), being a Perl script, is already source. Visit the site and download the latest tarred and gzipped bundle. Then, extract the package and install it:

tar -xzvf igal-1.4.7-wt.tar.gz
cd igal-1.4.7-wt
sudo make install

To make your instant slideshow, change directory to where you already have a collection of images, and type the following:

igal -xy 150 --bigy 800

That's all there is to it. You don't need either the -xy 150 or the --bigy 800 options I added. The first creates an HTML slideshow with a title page made up of thumbnails scaled to a maximum of 150 pixels along their longest dimension. The bigy option is useful if you have very large images. It takes your large photos and creates images of the selected y dimension (in this case, 800 pixels). To see the full-size image, your visitors just have to click the 800-pixel image. This whole process may take a minute or two, depending on the size of your images and the quantity. In the directory, you'll also find an index.html page, your original images, thumbnail versions of these (prefixed with .thumb_) and cross-linked HTML pages for each image. It should look something like what you see in Figure 2.

Figure 2. A Web Gallery, Courtesy of iGal

The only real editing that I wind up doing is changing the title of the index.html file. By default, the title for that page is “Index of pictures”, and I tend to like something a bit more descriptive. When you run iGal, the default caption for each image is the image name itself. You can change that without editing all the images by running iGal with the -c option. This generates a file called .captions. Lines in the file look something like this:

img_0261.jpg ----
img_1400.jpg ----

To create captions for your images, append the text you want to the image:

img_0261.jpg ---- A picture of me with Tux

Save the file, rerun iGal with the -c option again, and all your images will have your selected captions. If you choose the -C option (uppercase C), you will get your captions, but the image names are preserved. Note that you should remove the .captions file first. Remember, all of this happens on your local PC. When you are done, all you need to do is transfer the directory, complete with HTML files, images and thumbnails, to your hosting provider. No server-side code is needed.

Perl is cool, of course. But a good old-fashioned bash script is equally cool, and that's the heart of Eduardo Sztokbant's Shalbum. You can get Shalbum at shalbum.blogspot.com. Like iGal, Shalbum uses ImageMagick to perform its magic. Similarities aside, Shalbum has some interesting additional features that set it apart, including forward and back thumbnails with the main image view, a built-in slideshow function and more. To install Shalbum, extract the tarred and gzipped bundle, then run a make install:

tar -xzvf shalbum-1.12.tar.gz
cd shalbum-1.12
sudo make install

To create your Web album, copy the images you want into a folder. With that part complete, it can be as simple as running the shalbum command:

shalbum -t "Proud members of the WFTL-LUG" -T 200 -C 4

The result of this command is shown in Figure 3. What I've done with the above command is pass a title for the album (the -t option), selected a 200-pixel thumbnail (the -T option) and specified that the main page should display four columns of thumbnails. The resulting album is generated in a subfolder called—wait for it—album. You can transfer that entire folder to your Web site, and you are good to go. The presentation for Shalbum is nice.

Figure 3. Quick, easy and stylish—Shalbum uses bash to generate a Web album.

Each photo displays not only forward and back links to navigate through the gallery, but also shows the previous and next thumbnail at the bottom of each page. At the top of the gallery, you'll see a link labeled Play. That starts the slideshow. You can specify the number of seconds between each photo by using the -S option.

The final item on tonight's menu is far more complex and does require server-side access, as well as an Apache server with PHP and MySQL. The result is fantastic and yet amazingly easy to work with. It's called ZenPhoto, and it is probably the nicest and easiest Web photo gallery program I've seen so far. Despite its ease of use, the feature list is nothing short of impressive. EXIF and IPTC support is built in, as is support for video (Flash, QuickTime and 3GP). Images are uploaded via the Web interface, but you also can use FTP or SCP if you prefer. The interface makes it easy to edit as you go, make comments, tag photos, rate individual albums or photos, and generate albums from searches. You can watermark images, password-protect the gallery or individual albums, set up RSS feeds, allow users to comment and more. There can be multiple galleries and even sub-galleries. Have I mentioned that ZenPhoto is also themeable?

To get started, visit the ZenPhoto Web site at www.zenphoto.org, and download the latest source. Extract the bundle into your Web server's hierarchy. Of course, only you will know where exactly, but you pretty much can put it anywhere you like under those constraints. ZenPhoto does not need to be at Web root. That said, you do need to have administrative access to the system, or at least MySQL. Extract the package into your chosen location with this command:

tar -xzvf zenphoto-1.1.5.tar.gz

The resulting directory will be called zenphoto, which is fine, but you may choose to rename the folder to something that makes more sense to you, like myphotos or myalbums.

Installation is very simple. Just point your browser to the ZenPhoto installation address—for instance http://mywebsite.dom/zenphoto. If you are accessing ZenPhoto for the first time, it immediately will take you to the setup screen (Figure 4).

Figure 4. Installation is guided with pointers to help you set up your database.

The setup screen checks to make sure you have the right software installed, including PHP support and modules. In my example, I haven't yet created my database. Use whatever tools you are comfortable with (for example, Webmin, PHPMyAdmin or the command line) to create a database and a user that has permissions to update that database:

mysqladmin -u root -p create zenphoto
mysql> grant all on zenphoto.* to 'zpadmin'@'localhost'
 ↪identified by 's3cr3tp4sswd';
mysql> flush privileges;

Click the Save button to verify your database setup, and you now should see a screen with a collection of friendly green check marks and a large blue Go! link at the bottom. If there are any issues, they will be highlighted for you (the wrong password, perhaps). Assuming all has gone well, click Go!. ZenPhoto creates the necessary tables, then provides you with a screen to set your admin user name and password. The only thing left to do is log in.

Figure 5. Two steps later, you are ready to log in and start uploading photos.

When you log in to the admin interface, you are presented with several tabs that let you define security, edit existing galleries and comments, adjust the layout and theme, and a whole lot more. What you most likely will want to do at this point is create an album and upload some photos. To create your first album, click the Upload tab. If you haven't done so already, create a new album by providing a name. Then, one by one, you can browse for your photos and add them to the list (Figure 6). The default allows for five individual photos, and you can upload them five at a time, but if you prefer, you can click the Add more upload boxes link at the bottom. When you are done, click the Upload button.

Figure 6. Creating albums and uploading photos take only a few clicks.

Your final gallery is ready soon after the photos are uploaded. Thumbnails are generated automatically. By default, the gallery is public, and the only password so far is to protect the administrative interface, in which you are currently working. To leave the administration screens and view your gallery, click the View Gallery link at the top right, and you'll be immediately transported to the public face of the gallery (Figure 7). Assuming you are logged in as the administrator, you will see an Admin Toolbox link in the upper right that lets you jump back to admin mode.

Figure 7. ZenPhoto Gallery Built on the Default Theme

Now, I vaguely recall mentioning that ZenPhoto is themeable. In fact, the package comes with several themes, like the Stopdesign theme shown in Figure 8. Most themes have additional options that can be tweaked in the admin interface. These let you define the number of thumbnails displayed, the order in which they appear, photo download options, comment capabilities and more. You also can browse and download additional themes from the ZenPhoto Web site.

Figure 8. Different themes provide your albums with a style to reflect your own taste.

Once again, mes amis, we are out of time, though I must admit, François' gallery looks amazingly good with your smiling faces peering out from our Web site. If you haven't had the opportunity to do so yet, I hope you'll send us your photos shortly. In the meantime, the hour is truly getting late, and we must soon be on our way. François will, of course, refill your glasses a final time before we bid each other farewell. Raise your glasses, mes amis, and let us all drink to one another's health. A votre santé! Bon appétit!

Marcel Gagné is an award-winning writer living in Waterloo, Ontario. He is the author of the Moving to Linux series of books from Addison-Wesley. Marcel is also a pilot, a past Top-40 disc jockey, writes science fiction and fantasy, and folds a mean Origami T-Rex. He can be reached via e-mail at marcel@marcelgagne.com. You can discover lots of other things (including great Wine links) from his Web site at www.marcelgagne.com.