You Look Marvelous On The Web!

09
Jul

You Look Marvelous On The Web!


Looking good is easy for our regular guests. True enough. 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 online!

Yes, François, I think it would be great to add a gallery of our regular guests on the restaurant's Website, but I do have a couple of 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. This is going to take you 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 that gallery a breeze. Later, though. I can see our guests arriving as we speak.

Good evening and welocome 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 you to 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 need to tell you about a package you'll need to have on your system, a package which will let you do all sorts of magical things with images.

No, I'm not talking about the GIMP. The package is ImageMagick and you don't already have it installed, you should do so now as we'll need its tools later. What sorts of tools? Well, for instance, you can find out some interesting 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 1161 pixels in height and it is a JPG format 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 orginal here.

While not a Web album, you can use the montage command to create a, uhm, montage much like a photographic contact sheet.

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

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

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

Click on the images to see the full size versions.

Ah, excellent François. You have returned. Please pour for our guests.

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 these shortly. In the meantime, let's assume you don't have shell access to your Website 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 Website. Fear not. This is where iGal, and our friends, the ImageMagick group of tools, comes 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 http://trexler.at/igal.

Installing this is child's play since 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 slide show, 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 flags I added. What the first does is create an HTML slide show 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-sized 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 the following image.

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 the images is the image name itself. You can change that without editing all the images by running iGal with the "-c" option. This will generate a file called .captions. Lines in the file will appear 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 pages will have your selected captions. If you choose the -C option (upper case C), you will get your captions, but the image names are preserved. Note that you should then remove the .captions file first. Remember, all of this happens on your local PC. When you are done, all that you need to do is transfer the directory, complete with HTML files, images, and thumbnails, to your hosting provider. No server side code 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 http://shalbum.blogspot.com. Like iGal, Shalbum uses ImageMagick to perform its magic. Similarities aside, Shalbum has some interesting additional features that sets it apart. 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. That part complete, it can be as simple as running the command, shalbum.

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

The result of this command is visible in Figure 3. What I've done with the above command is pass a title for the album (the -T flag), selected a 200 pixel thumbnail (the -T flag), and specified that the main page should display four columns of thumbnails. The resulting album is generated in a sub-folder called -- wait for it -- "album". You can transfer that entire folder to your Website 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 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 slide show -- you can specify the number of seconds between each photo by using the "-S" flag.

François, I see a lot of empty or nearly empty glasses. Do be so kind as to attend to our guests and return those glasses to a more respectable level.

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, 3GP). Images are uploaded via the Web interface, but you can also 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 themable?

To get started, visit the ZenPhoto Website 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 can pretty much 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 will immediately take you to the setup screen (see Figure 4).

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

The setup screen will check 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 (e.g. 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 should now get a screen with a collection of friendly green checkmarks and large blue "Go!" link at the bottom. If there are still issues, they will be highlighted for you (the wrong password, perhaps). Assuming all has gone well, click "Go!". ZenPhoto will create the necessary tables, then provide you a screen to set your admin username and password. The only thing left is to 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 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 already done so, create a new album by providing a name. Then, one by one, you can browse for your photos and add them to the list (see 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 takes only a few clicks.

Your final gallery is ready soon after the photos are uploaded. Thumbnails are automatically generated. 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 (see 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: Your 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 in Figure 7, most of which 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 can also browse and download additional themes from the ZenPhoto Website.

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

Once again, mes amis, we are out of time, though I must admit François' gallery looks amazingly good with your smiling faces looking out from our Website. If you haven't had the opportunity to do so yet, I do 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!

Resources

iGal

ImageMagick

Shalbum

ZenPhoto

Note: This column first appeared in the July 2008 issue of Linux Journal. Cooking with Linux is written by Marcel Gagné

Comments