Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Samantha Cliffe Photography

Posted on 24 October 2008 17 comments

Article illustration for Samantha Cliffe Photography

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 lis 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! :)

17 comments

  1. Valerio Vaz

    Valerio Vaz

    24 October 2008 @ 02:42PM #

    Hey.
    Really great work. The photos speack for themselfs, so the minimalist design fits like a dream.

  2. Divya

    Divya

    24 October 2008 @ 02:47PM #

    Looks awesome! And fabulous photos. Makes me want to go all these places too.

  3. Francis Booth

    Francis Booth

    24 October 2008 @ 02:56PM #

    Fantastic photography, some really truly beautiful shots in there.

    The site is also very slick, and refreshing… it really feels like there was no compromise with this design, you both knew what you wanted and didn’t stop until it was complete.

    ….some of your tweets from the past few days now also make a bit more sense. :)

  4. Cole

    Cole

    24 October 2008 @ 03:14PM #

    Hey Elliot
    I had similar resistance to lightbox when building a new site for my friend, photographer Ryan McGoverne so used some custom scribed jQuery goodness to load images in the page.
    The main issue was with the fixed proportions of the enlarged images and thumbnails but again, some jQuery loveliness in the shape of JQuery Interface‘s resizable function made this a doddle using a simple CMS to crop images to certain ratios (alas, developed before I discovered jCrop).
    Couple of comments/thoughts:
    Can you use ’proper’ thumbnails to act as the preview images rather than scaling down the full-sized version on the client side? Flickr automagically creates thumbnailed versions of images anyway which could easily be drawn from/used rather than preloading all the full-sized images (which speeds up the javascript loading of the full-sized images but slows down the page load).
    Also, does the site have to be javascript dependent? Can’t really interact with the images/see full versions if it is disabled.
    Anyway, good work on the site amigo. Cap suitably doffed.

    Cole

  5. Onyeka

    Onyeka

    24 October 2008 @ 04:52PM #

    Nice work! And thanks for sharing the tips. I was just about to to take on a similar job and was not sure how to start, you’re timing and links couldn’t be any better timed. :D

  6. Bunker

    Bunker

    24 October 2008 @ 05:41PM #

    Your girlfriend has some very powerful photographs.

    Next time we meet, you should bring her. I think she and I could have interesting talks about photography.

    I like the design of the site, I love the implementation, but what I find pretty annoying is that the pictures especially the thumbnails load pretty slow. Because the pictures are the main navigation in an album some caching on the thumbnails will solve the loading problem, waiting a second of 5 for the main image is not a problem but waiting 15+ secs to load all the thumbnails (the 5 thumbs shown in the carrousel) is pretty long.

    I noticed that the api calls are pretty fast for the thumbnails and if you don’t need to request the full xml-file of the photo stream.

    BTW isn’t there somewhere in the TOS of flickr that you have to link back to the original photo page?

  7. Min Tran

    Min Tran

    24 October 2008 @ 05:47PM #

    Well done, Elliot. I love the both the site and the the artworks, especially the photos taken in Vietnam. Very emotional and beautiful (I’m Vietnamese btw).

  8. Steve Rydz

    Steve Rydz

    24 October 2008 @ 09:00PM #

    Nice work on the site Elliot, and thankyou for going into detail about it, its certainly inspiring to me because I am looking at solutions for a photo gallery site.

    Keep up the good work.

  9. chuck

    chuck

    24 October 2008 @ 10:23PM #

    Great article… couldn’t agree more about lightbox being everywhere. Nice alternative approach to it!

    I am really enjoying jQuery and it’s great to see you aren’t just using a copy and paste approach to jQuery.

  10. chris

    chris

    25 October 2008 @ 01:02AM #

    nice but wish you used more colors. other than black & white… i liked the gallery

  11. Tobz

    Tobz

    27 October 2008 @ 09:09AM #

    I really love how simple and clean the site is. I also love the photos, especially Vietnam and China as I’ve recently returned home from traveling those countries and loosing many of my photos(by corrupt HDD). Sam visited many of the same places as me so its good to know a place to show pics where mine have been lost.

  12. Max Weir

    Max Weir

    28 October 2008 @ 12:31AM #

    Nice post, I like how you have outlined in detail the process and backend setup for the site. The design IMO is not that hot but the functionality makes up for it. I dont like how the left nav doesnt tell you where you are, theres no active states which makes it difficult.

    Thanks.

  13. gortler

    gortler

    29 October 2008 @ 03:02AM #

    wow, she is good, the great wall of china looks wonderful

  14. Mike

    Mike

    30 October 2008 @ 09:57PM #

    Hi and thanks for this write up. I developed a gallery for my father’s work, first as a static site, using a simple but nice plugin that automatically pulls in his Flickr photos using their API. You can see it at www.ducktrapphoto.com.

    Then I integrated his site into WP; I wanted the increased “on demand” functionality and SEO benefits of WP but ran into some problems. His store was built with Zencart a long time ago. Going with something like Etsy would probably be a simpler solution. Mainly, he didn’t like the fact that his new site was only displaying one large photo at a time, and I didn’t have the time or energy to come up with a solution so I rolled it back to the static versin.

    Having used Galleria on a project afterward, and then reading this, I’m thinking I may have to give it another go.

  15. DVQ

    DVQ

    31 October 2008 @ 02:29AM #

    Very nice Elliot.

    I have been trying to implement the same thing minus the carousel,
    but for some reason on my version in IE7 the photos flicker in the bottom corner for a second and then disappear. After this the page works fine. Does anyone know why this would happen?

  16. Elliot Jay Stocks

    Elliot Jay Stocks

    03 December 2008 @ 03:09AM #

    Thanks for all of your lovely comments, guys. Sorry it’s taken me so long to get round to replying.

    @ Francis Booth: Thanks! let’s hope so!

    @ Cole: You’re right to point those things out. Unfortunately, because I’m a bit crap when it comes to JS and rely on a pre-built system like the galleria plugin, I can’t customise it to use things like Flickr thumbnails. And yes, the JS dependancy is bad, I know. Want to help me make it right? :)

    @ Bunker: Like Cole, you’re right to point out those flaws. It’s not a perfect system and I’m actively looking for ways to create a bespoke version that addresses these problems.

    @ Chris: The simple black and white colour scheme was used to let the photography take centre stage.

    @ Max Weir: Good point about the active states. I’ll get that corrected.

  17. Cole

    Cole

    03 December 2008 @ 03:34AM #

    Happy to help if you need some JS/flickr assistance

    I’ve not worked with wordpress so not sure how easily you can customise the flickr feeds, etc but as an alternative it would be straightforward to drop in a wee PHP script to resize the thumbnails on the fly from the larger source images

    Anyway, if you need any assistance drop me an email

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.