Photo Gallery
August 7th, 2009The photo gallery is by far the most popular and important portion of my family’s website, www.dhtns.com. Since late 2005, the design has remained largely the same. We’ve added a few thousand photos and changed around the category organization a bit, but it’s basically the same as it has been for nearly four years.
There are a lot of beautiful galleries around, but beauty is only part of it. The gallery has to be functional, easy to navigate, and easy to update. Recently, I sat down and drew out some high-level requirements for what my ideal gallery would look like.
Ideally, the gallery would:
- Have a nice interface. Smugmug’s default presentation is a great place to start.
- Arrow key navigation. Once you experience it, you can’t go back.
- AJAX for image refreshing. Clicking on “next” (or pressing right arrow) doesn’t usually need to refresh the whole page, only the image and metadata.
- Don’t break the back button. Also, URLs should be copy/pasteable into emails–something that is tricky with AJAX.
- Not depend on javascript/AJAX for navigation.
- List the folders/categories in a heirarchical structure.
- Support a Recent “folder”. Most of our visitors never dig into the different folders, as the most recently uploaded pictures are listed first.
- No ugly URL scheme. Previously, it was some …/photo.php?id=1234 nonsense. Instead, I want the URL to reflect the category/folder and the image’s title or filename. That said, it must also:
- NOT BREAK EXISTING LINKS. We get a suprising amount of traffic from google to our photo gallery, and all those links need to 301 redirect to the new, proper URL. The photo “ID” number is the key to making this work.
- Be able to view the full-size original image. The previous gallery couldn’t really do this.
And, for administration:
- Use a multi-file uploader. It’s a real pain to manually select dozens of images to upload at once.
- Lend itself to batch updating and categorizing of images. After a few dozen images are uploaded, we want to crank them out to have them visible.
And, oh, wouldn’t it be nice to:
- Display EXIF data to those who care. I have a few photo-oriented friends to actually look at that stuff.
- Be able to “select” images, and somehow generate a list to print. We have a few people (parents, mostly), who use the website’s photo gallery as a shopping cart for photos to print. And you don’t want to see what the result looks like when a 600px x 400px preview image gets printed.
- Have an RSS feed for the images. Maybe even per-category. /photos/feed.xml, /photos/Aiden/feed.xml, etc. This feed could be used in a widged on, say, www.aidenbennett.com to show recent pictures of Aiden. Or, maybe as a feed to the Apple TV.
The good news is that I’m most of the way there in implementing it. Almost all of the gallery and administration bullet lists are done and work, and the framework is there to allow for the rest of it. I’ll give more details once more progress is made.