Handling Images on My Sites

Over the last month or so I've been spending a lot of time working with image manipulation. First I played with resizing with PHP GD, a basic library included in most builds. Then I jumped into the real meat, reading and overwriting the raw EXIF headers, to both clean up some pieces from GD and enhance the image meta data. There was a good reason why I wanted to get hands on with my photos, one that starts with the way that my blog (and future waterfall site) works.

Every image on my blog (around 800 at the time of this post) has a record in a table. This record keeps track of the category, filename, and description of the image. When I want to include a photo on a post I reference this record as opposed to including a raw image tag within my text. When the post is rendered it runs through a simple content module to replace the reference with a standard img tag for the view.

Why? Simple - I don't want to have a strict definition of the image in my text. The size of the post images can easily be changed based on the view. On my listing pages I can load the 'small' image, which is about 240px wide. On the post page I load the 'standard' image, which is 800px wide. On other pages I load thumbnails or even larger photos, depending on the page layout. By referencing the image indirectly I can easily swap out which size image gets loaded, even though the photo itself is always the same.

This is great for the view, for the end display, but it complicates my image library. Every one of my 800-ish blog photos needs to have six different sizes uploaded, each one with the same name base and a predictable suffix to define the size. My waterfall updates will blow this number to over 2,500. If I write a blog post with ten photos I'm actually working with sixty files. It can be a bit of a hassle.

Over the last couple of years I've been handling all of this with Photoshop Actions and Scripts. Not only did these scripts resize the images, they also did some color manipulation and auto-leveling. I still had to manually edit pieces of the image table, depending on how many photos I was uploading at any one time, and handle the FTP uploads too. When my only computer with Photoshop died it gave me a reason to build a better system, a programmatic system to reset my current photos and handle future uploads.

1 - Choosing the Photos

The first step is the most manual. I still need to go through the photos from a hike and pick out which ones to display on the blog. Sometimes I take twenty pictures, other times two hundred, but I rarely choose more than a dozen to tell a story. After I pick out the photos I plop them in a folder where my next script can read them.

2 - Adding Metadata

Each photo is kind of bare to start with. The name is usually some generic IMG0234 or such, a non-descript programmatic identifier assigned by the camera's firmware. My script will read the images, sort by date taken, and display them on a local page. I can then add a descriptive filename, relevant description, and make sure that the timestamp is correct (daylight savings time, timezone offset, etc). There are a few other fields that will get autopopulated, like the photographer (usually me), copyright information (also standard), and a few internal fields. Clicking save will kick off a multi-step process with each photo's new information.

3 - Resize, Rewrite, and Upload

Each photo needs to be resized to six different sizes - a piece of cake to do with PHP GD. Once the new files are created I then go back through and rewrite the EXIF information in the new files using the metadata from Step 2. Some of this new information will also get saved to a table in order to easily reference the image. Then, after the images are ready, the script kicks off a FTP connection and loads up the images. Everything is automatic - all I had to do was choose and tag the photos.

Some of this logic has been hacked a bit to handle the 800 already-completed images, as they already had most of the metadata defined in older tables and such, though I still wanted to set them up in the new system and make sure their EXIF headers were inline. The only piece I'm still polishing is the upload, as it wasn't really useful to have for the corrections I've been making to already-existing photos, though it should be easy to have that wrapped up in time for the next wave of new photos. One things for sure - even though I've lost some of the optimization and leveling of Photoshop's resizing scripts, doing all of my image handling through PHP has really made the process much easier.