Gallery Navigation

I hadn't really browsed the galleries extensively before today, despite the fact that I have several of them on the website. But today was different. I received an email from a user who'd discovered a little glitch in the forum system. I thought I'd caught most of the bugs so this took me by surprise.

Once I'd brutally slaughtered the little critter, I decided to thoroughly test the Urban Mainframe in an attempt to trace any remaining "issues". I had navigated into one of the image galleries when I made a little discovery... What I found wasn't a bug as such, but it was a usability problem. I realised that I couldn't sequentially step through the images in a gallery (rather like my recently addressed weblog problem).

Let me elaborate: a trip to an Urban Mainframe gallery begins with a "contact sheet", a collection of thumbnails. One clicks a thumbnail and, depending on how the image is registered within Shapeshifter, either a full-sized version of the image is displayed, or one is redirected to the target that the thumbnail represents.

No problem with the redirection. But I realised that, once a full-sized image is displayed, the only navigation widget was a link back to the contact sheet. Now, of course, this is fine for "random access", but I found it irritating that I couldn't easily navigate to the previous or next image in the gallery. Viewing images sequentially involved two clicks for each image (one to return to the contact sheet and a second to select the next image).

It was such a simple thing to miss, but a major annoyance for anyone trying to enjoy the galleries.

I added the two "image" buttons you can see here. I think they're self-explanatory but, just in case, "« Image" points to the previous image and "Image »" points to the next in the sequence.

Everything seemed to be fine and I was congratulating myself on a job well done, until I realised I had solved one problem and added another (expletive deleted). The "back" button (to the left of the "image" widgets) was configured to link back to the referring page by hooking Perl's "$ENV{'HTTP_REFERER'}" environment variable .

The astute reader will have already anticipated the problem: once the user had clicked either of the "image" buttons, the "back" button was then pointing to the previous image. The "back" control was thus in an infinite loop state, trapping the user between two images.

There was a reason why the "back" button had been configured that way. In Shapeshifter, galleries can span multiple pages and each page, by definition, has a unique URI. Thus, the server has to "know" which page the user was on when the image was requested, in order to return to it.

Therefore, I had two points of entry (to the image viewer) that the "back" button would have to be able to accommodate:

• The user had arrived by selectively choosing an image from a specific page in the gallery, or
• The user had arrived via sequential browsing.

The former was easy to return from, I simply use "$ENV{'HTTP_REFERER'}" as before.

The second vexed me for a little while though. I couldn't decide on a suitable return point for the sequential user. Should I return to the first contact sheet of the gallery? The last? Should I just return to the home page? Then I saw it... the obvious and most elegant return point from any given image is the contact sheet containing that image! But how?

The galleries are dynamically generated and their layout is template controlled. The template governs how many thumbnails are displayed on each page with a simple rows by columns calculation. Therefore, basic math will give me a page number to return to. If we calculate the following equation,

and if the result is a whole number, then that number will be the page number we're looking for. If the result has a remainder (and we'll use Perl's modulus operator to test for this), then we increment the result by one. This will always yield the correct page number.

This, then, is the algorithm I used to provide a context-sensitive "back" button on the the image viewer. I believe that the image galleries and viewer are now intuitive and productive. Unnecessary clicks have been eliminated and the model doesn't surprise or confuse users (hopefully).

Addendum: As an added bonus, users who arrive at an image via an external link are treated is if they are sequential viewers. Therefore, the "back" icon would not return them to the referring website [1]. It would take them to the contact sheet, hopefully persuading them to stay a little while.

[1] For the sake of clarity, I must stress that the web-browsers "back" control would still return them to the referrer, I wouldn't dream of hijacking my visitor's browser.