allenhemberger dot com

April 10, 2011

Photo gallery – Thumbnails loading

The New Zealand Affordable Art Show is an annual event in Wellington.  Artists from all over the country apply for gallery space at this show; items must be priced at $5000 or lower. The goal is to raise awareness of up-and-coming artists and to make high-quality artwork available to as broad an audience as possible. It’s a staggeringly-inspiring sight, seeing thousands of people meandering through a gigantic labyrinth filled with beautiful art. Within the first five minutes of visiting the show for the first time, I knew I wanted to try it.

Application for the show requires submission of art to a committee, where they judge the work and select the best applicants. Artists can apply to show a maximum of 5 individual works, or they can apply for an entire section of wall, which they police and manage completely on their own. The latter situation is sort of like owning and running your own mini art gallery.

Mouse ‘trails’

Not a man to think timidly (or reasonably) about this, I dove right in for an entire wall.  I had a fair amount of photography I’d amassed, and I felt like I could probably sell a decent chunk of it. My first order of business, then, was deciding how to present the selection committee with a large collection of my photos. A website was the obviously-easy answer, but my website at the time was pretty ugly and not really targeted at nor suitable for displaying photography. So I decided to throw it away and start a new one from scratch.

Part of the challenge of managing my own collection of photography was trying to figure out how best to present it. An obvious and time-tested way is dividing photos into categories (“albums”).  The downside with this, I felt, was when ambiguities arose. What if I took a really nice portrait of my sister just after her first bungy jump in New Zealand? Would that go in my “People” album or my “New Zealand” album? I wanted a way to cross-index photos so that a person had several ways to discover a particular photo.

The popup navigation bar

I also have a small obsession with data visualization. That sounds nerdy as hell, but I really love the idea of using data to make something artful. I also like the idea of noticing patterns. I had this idea of being able to lay out all my photos sorted by color, or by brightness; I thought such a layout would look pretty, and would also reveal patterns to me about my habits. Did I tend to shoot more ‘green things’ or more ‘red things’? Do I typically shoot very bright photos or very dark ones? What months of the year do I typically shoot more often, and what times of the year am I more dormant? This way of viewing myself is interesting to me, and I had a hope that it might be interesting to someone else too.

I drew inspiration for how I wanted people to access photos from iTunes.  In iTunes, we start with our Music Library, which displays every song in our music collection. From there, we specify criteria to narrow what we’re presented with; things like “Genre” or “Album” or “Artist”. We can layer these criteria to further hone our selection  (“Show me X album by X artist”). I wanted a mechanism similar to this for browsing my photos.  In most photo-editing applications (iPhoto, Lightroom, Aperture, etc), one can apply keywords to photos to help describe their content, similar to ID3 tags in music files. This was how I could do this cross-indexing trick: visitors could chose multiple ‘keywords’ to filter down their vide of my photo library to see just what they wanted to.

Selecting photos by date taken

I threw all these ideas past Sarah, and asked her to help me design a website that might encompass them in some way. Aesthetically I wanted something fairly minimal. I wanted panels and information that presented itself when you needed it, but got out of your way when you didn’t, to allow the photos themselves to stand front and center. I wanted navigation to be intuitive yet unique. And of course I wanted it to feel cool.

The first thing we came up with was the lower navigation bar, which presents itself when you poke a small “View” button at the bottom of the web screen. This navigation bar was a more visual idea of the Browser in iTunes; I wanted some buttons to allow someone to select how they wanted to order/filter their current view of the photo library. Sarah designed the “Open” view of the navigation bar, and I coded it using Actionscript in Flash to animate procedurally (rather than hand-keyframing it, the buttons–and everything else on the site, in fact–use a simplified spring equation to govern motion).

Full-size photo view

I wanted a clean presentation of data for people to filter on. Sarah came up with the idea of folding panels alongside the mail library palette. These panels would open or close as needed, and would dynamically populate themselves with the library’s available keywords.

The main library palette itself is a bunch of small ’tiles’; the tiles are blurred thumbnails that unblur themselves when the mouse moves over them. The entire thing is generated dynamically–when I upload new photos to the site, a Python script evaluates each new addition to find average brightness and hue values, pull metadata and keywords, etc and updates an XML file that the library reads when displaying photos. I like this because it makes adding new photos (which I do frequently) easy and painless. Over time, patterns emerge with respect to average photo color, shooting frequency, etc.

Overall I really love the site, though I recognize that it’s unusual. Typically my barometer for how usable something I make is is my mom; if she can navigate it then I’ve done an ok job. I think she’s ok with this site, but she still finds it effortful and not entirely intuitive. The ‘cleverness’ isn’t as interesting to her as it is to me. Whether this barometer is accurate isn’t apparent to me: I was accepted to the NZAA show, and no one has ever written to opine on the site to me.

Photos sorted by brightness. I tend to favor overexposure, it seems.

Moving forward, there is some functionality I’d like to put into place eventually. One currently can’t direct-link to a photo in the library, for example. I’d also like people to be able to make and save “playlist” analogs–some sort of reloadable view they’ve created by selecting various search criteria. Being able to mail these ‘playlists’ to others would be rad.

If you’d like to test the system out yourself, you can see it in action at