New Website In Production

In my last blog entry I wrote about learning Drupal (the web-content management system tool) and that I am rebuilding my website in it. Right now it only lives on my iMac at home but soon I will be relaunching enginpost.com and moving my blog over to that site. In the mean time, I am fairly happy with what I am able to do to build a very stylized gallery in Drupal.

These sample images show what the basic site will look like but I want to focus on the gallery.

Intuitive URLs

First, replace "localhost:8888/ep" right now (in your mind) with "enginpost.com" and check out the address to get to the gallery on my site:
The nice thing about clean URLs is that it makes content on your site quite memorable and less cryptic, which I prefer. So, once I go live, if a person wanted to check out all of the images in my gallery they would type in: http://enginpost.com/gallery


Here is a screen grab of the gallery page on the site will all five images I have uploaded (click the image to view a larger version.) I designed it to make each image look a bit like an old photo. No more than six images to a page and if there are more than six images then at the bottom of the images you get a "pager" which uses Ajax to move you through the images in groups of no more than six at a time.

Instant Sub Galleries Via Tagging (Taxonomy)

Next up, I like to take a lot of photos and currently I use flickr to manage all of that, but I am only allowed so many uploads per month. So, since I manage my own site (as well as pay for the space and bandwidth) I am going to start moving all of my images over to my new gallery. No more being spread across flickr and blogspot and enginpost.com for me. I will be all in one site.

The next important task in creating my image gallery is being able to easily tag the images and then find them again by searching through those tags (if you are not familiar with tagging, it is like labeling or indexing your images based on ad-hock categories. Said another way, imagine that you took a picture of a friend during Thanksgiving. Well, you might want to tag that picture of "frank" with the terms "Frank" and "Thanksgiving." Later you will want to search for and see all of you shots where you tagged "Thanksgiving" you should be able to pull up that image.)

Now, check out this URL. It is the same as above with the addition of "/scottish"

The idea here is that I can pull back only the images where I have tagged them with "scottish." In this case I tagged only 4 of the 5 images I uploaded (for testing) using that tag. So only those images come back!


Make note that the gallery title says "Gallery: (Scottish)" this time and not "Gallery: (All)" like it did in the earlier image (click the image above to view a larger version.) I am doing a couple of tricks. First, this is the same exact gallery page in Drupal. In fact it is the same basic core page for my entire web site but I have themed just the output of the images here so that they look like old photos. Second, Drupal is reading the URL to figure out if it needs to filter the results based on the tag term I put on the URL. When I themed the image content coming back I just did a little trick to be sure it capitalized "Scottish" even though it isn't capitalized in the URL. This way everything looks nice and consistent and professional.

Larger Image Versions Using Lightbox

Finally, just as I have been asking you to click these images to view a larger version, I wanted that same feature in my web site. I have noticed that people are using a technique these days which opens a larger version of the picture on top of the existing page rather than opening a different window, and I think that looks great. It is really the new standard for how site galleries operate so I went looking to see how that was done.

In the end I was able to pull this off quite easily in Drupal. In addition to that I was able to setup an image processing module that would take the huge images I was uploading and it created thumbnails and standardized large view sizes to make the gallery images incredibly consistent!


Notice in this image that you can also download the original image in it's even larger size once you have clicked to view the larger version. Beautiful! I also made it so that when you click one image to make it larger, it automagically starts a slideshow of any remaining images in the group. You can stop the slideshow at any time or manually advance the slideshow as well.

Drupal sure makes this stuff easy. If I had to do this sort of thing from scratch I don't have a clue how long it would take me to build out all of this functionality. In addition, the site design is completely mine (so one wouldn't necessarily assume this was a Drupal website by looking at it.) Beyond that the time I save now by allowing drupal to create thumbnail and standard larger views of my images more than makes up for the time it has taken me to learn how to do this stuff!

Very exciting geekery!