Last week I launched the new version of samanthacliffe.com, home to hundreds of beautiful photographs taken by the exceptionally talented young lady known as – you guessed it – Samantha Cliffe. This young lady also happens to be my girlfriend.

Now, before you scroll down for my tedious explanations, please head over to the site and take a look around. Virtually every photo on there is available as a print, so if you want to buy one, please just let Sam know. Alternatively, you can visit her Etsy Store, although there aren’t many photos on there yet.

I don’t often blog about individual projects in my portfolio (although this is something I might start doing), but there are two reasons I’ve decided to speak about Sam’s site today: 1: I think more people need to see her wonderful photos (yes, I admit I’m biased), and 2: the way this site came together was quite interesting. Sam pretty much designed the site herself, so although I was physically creating the design elements in Photoshop, she was directing the whole thing; she had some pretty clear ideas about how the site should look, having felt she’d out-grown the original site I made for her some years ago.

Design decisions

We both decided that the site should be very very minimal in its design so as to let the photographs speak for themselves and give them plenty of breathing room. The surrounding page elements should simply add a little atmosphere to the site and stop it from being a plain blank page. I think we achieved that and it was relatively simple to do, but from a functionality point of view, there was a to more to handle.

jQuery

From the outset, I’d decided against using something like the Lightbox script I’d used on the previous version of the site. I have nothing against it, but it’s just everywhere these days and I thought it’d be nice to do something a bit different. Sam also wanted the photos to load in situ, without any kind of overlays or anything like that, so Fancy Zoom and all those other scripts were out. I knew Javascript would be a must, though, because I wanted a system that automatically generated thumbnails, without Sam having to upload separate images. I stumbled across the rather excellent Galleria plugin for jQuery.

This did pretty much everything I needed it to do: it generates thumbnails, it provides previous / next buttons, it jumps to the next photo on click, it provides a visually pleasing fade-in, and it doesn’t display a thumbnail until the full-size image has loaded. Nice! However, with all of those thumbnails on display, the site looked cluttered – exactly what we didn’t want! So I found a nice little bit of code to use with jQuery that would toggle the display (show / hide) of the thumbnail area. But alas, this created a new problem.

Sam wanted the thumbnails to be hidden by default, but this caused the images to remain hidden once the area was revealed. So we decided that the thumbnails would just have to be there on page load. Unfortunately, it wasn’t that simple: the next step was to try and integrate a scrolling system that would show around five thumbs at a time, allowing the user to browse the entire gallery with ease while keeping the page free of clutter. But when I attempted to integrate the Coda Slider, the whole thing just fell apart. It wasn’t the best choice, either, as it required putting an ID on every single li . I needed a system that would handle any amount of li s and save Sam from writing too much HTML. By this point – not being a Javascript man myself – I realised the project needed a fresh pair of eyes.

Time to call Kyle

My friend Kyle Meyer – the man behind Astheria and Typesites – has helped me out of a web development tight spot on many an occasion, and this was no exception. Armed with jCarousel, he went in and got it sorted, implementing the exact scrolling functionality we’d wanted. So thank you, Kyle, for saving our bacon and putting the icing on this surprisingly complex cake!

WordPress

So far I’ve focused on the JS side of things, but let’s take a look at how it works with WordPress, as that required a fair bit of customisation too.

The entire site is powered by WordPress, and although the set-up I created is probably not quite as dynamic as it could be, it works absolutely fine. As you might imagine, each page is a ‘Page’ (in the WordPress sense), with the gallery containing several sub-pages. All of these use a custom page-gallery.php template, with just a tiny bit of code to pull in the page content, which Sam updates via WordPress. Unfortunately, this means Sam has to wrap every img tag with an li , but that’s about as complex as it gets.

The other pages ( About, Contact, etc.) all use the regular page.php template, but a slight challenge arose with the ‘Photo Essays’ and ‘Blog’ sections, because I wanted these to be Posts instead of Pages. Why? So that 1: they showed up in the feed, and 2: they could be controlled from one central area and let the templates do the sorting. This is very easy to do in WordPress, you just create duplicates of the ‘archive.php’ template and rename them according to your category IDs; in this case, ‘category1.php’ and ‘category3.php’. The template hierarchy will do the rest.

So, sorted, right? Not yet. Viewing these category archives pages meant that their URLS were a bit messy; by default, WordPress adds the pseudo-directory /category/ in front of them (e.g: samanthacliffe.com/category/photo-essays and samanthacliffe.com/category/blog). This was no good, because they looked different to all of the other URLs. Amazingly, I found that this is almost impossible to change without fiddling around deep in the WordPress code (outside of the theme directory), so the solution came via the Top Level Categories plugin, which simple removes /category/ from the URL.

Flickr

The site doesn’t use the Flickr API – just URLs manually pasted in from the photos Sam already has on Flickr – but I’d like it to, especially after seeing some of the great stuff Paul Burgess has done with the API on various photo gallery sites. If anyone can think of a system that would work and not disturb WordPress (which would still be needed to at least power the other pages), please get in touch. :)

One outstanding issue

Unfortunately, there’s still a slight bug in the site when viewed on Safari. For some reason, the width of the thumbnail scroller is calculated incorrectly and results in you not being able to view the last two or three thumbnails in the set (although you can still access them via the previous / next buttons, or by clicking on the main image). Kyle and I thought that adding a class of ‘safari’ to the body (which he also did with some JS) would then allow us to simple add a bit of extra padding on the scroller element descended from this body class, but sadly it didn’t work.

So if anyone fancies having a look at that, please just email me!

Lastly…

I hope some of that tedious explanation might be useful to those of you who are powering a photo gallery with WordPress. I’m really pleased with the final site, and – more importantly – Sam is too. So all that remains for me to say is please check out the site and let us know what you think in the comments below! :)