I’ve just completed an overhaul of my site, which seemed to take years (or at least years off my life.) I’m still fiddling with the finer details, but for the most part I’m saying it’s finished. The biggest change is that absolutely everything (almost) is managed via WordPress now, in combination with PhotoShelter (that’s the almost). Previously I was using static HTML for my gallery site, had the blog over at 100cm, and the PhotoShelter archive off doing it’s own thing. They all had the same general look but were living completely separate lives. With the launch of WordPress 3, and some new PhotoShelter features I decided it was time to try and bring everything together. I also felt it was time to freshen things up a little, revisit my choice of fonts, the way galleries were displayed, compatibility with mobile devices, etc. Below is a somewhat technical walk-through of the process.

I started by trying to find a way to streamline the creation of a gallery within WordPress, and not have to rely on any plugins. Since all my images end up on my PhotoShelter account I was hoping that I could somehow tie the two together. I’d played with the PhotoShelter plugin for WordPress, but it wasn’t quite what I was looking for. I definitely wanted to stay away from Flash, so the PhotoShelter slideshows were out. Besides, I’d already come up with the code I wanted to use for the galleries, a side-slider that uses JavaScript for the transitions. I wanted big images, and the potential to include captions and blocks of stand-alone text. So instead I looked at how their plugin worked to call individual images, and played around with working it into my new gallery code. I was prepared for the worst as I pulled up my initial test, but hey, it worked perfectly first try.

I then went to work creating a custom theme for WordPress to make integrating the gallery code as simple as possible. I needed to instal a few plugins to allow pages to parse PHP, but with WordPress 3 this was really quite easy. I just built the templates I needed as flat HTML, and then tweaked the default template that comes with the initial installation. In the end I needed to create four basic template pages: one for the galleries, one for the homepage, one for the blog, and one for the various static pages. That said they’re all pretty much the same, just tweaked slightly to present different content (i.e. the random homepage images).

So, instead of needing to dig around in Aperture, create the web ready images in Photoshop, upload them to the server, create a the new gallery code, upload it to the server, edit a bunch of other pages to link to the new gallery I now just create a new page within WordPress and feed a very simple template the ID numbers of the images I want to use from PhotoShelter. I’m using the new menu system available stock with WordPress, so linking to the gallery is done with a few clicks. WordPress takes care of all the drop down code, and ordering galleries is drag and drop. Easy peasy.

I always felt that having both a portfolio site, and an archive site was overkill. PhotoShelter solved the problem by launching their Photo Wall feature, which is pretty much just at it sounds, a wall of photos. I went in and adjusted my already custom homepage using the new CSS I’d created for WordPress (so the experience would be as seamless as possible) and in the process selected a number of galleries to display using the photo wall. It took me a good while to find the right configuration, but I stuck with it. You can easily control the look of the wall, rounding corners, tweaking gutter widths, etc. I was actually feeling like maybe it wasn’t the right way to go (despite the options everything felt too boxy) when I hit upon the current look by accident. I hadn’t quite filled up all the available wall spaces, leaving that gap there at the bottom. I happened to call up a text editor to cut and paste some code and it magically appeared over the browser, in the exact right spot, tucked up into that unfilled space. There’s no option to include any text in a wall, but with a little custom CSS I was able to make it happen. The result I think is a perfect complement to the rest of the site.

In general I’m really pleased with how I was able to integrate WordPress and PhotoShelter into a cohesive site. They end up working really well together, and I was still able to keep the site looking the way I wanted it to. There’s a change of URL as one moves from WordPress to PhotoShelter but you hardly notice. There are existing tools that bring the two together, and I use a Graph Paper Press template over on my projects site, and I love the simplicity of it, but I wanted to keep this site feeling unique. There are a lot of photographer sites popping up that have a VERY similar feel about them. I do still have some problems with the way PhotoShelter handles customizations, particularly the cart, and client areas. I had to work hard to hack the CSS they feel is mandatory to that part of the site, but in the end I got everything looking as I wanted it.

As mentioned I also took the time to revisit the fonts I use. I had been looking for a reason to try Typekit, and so I went through the fonts they offered and found one that wasn’t too far off my beloved DIN. After trying a few, I selected Ronnia Condensed by Type Together for use on the header, and then sprinkled variants of it throughout the site. Typekit is relatively simple to use, though I did have to provide it the exact URLs of the archive site, including the ‘photoshelter.com’ domain before it worked consistently. It also looks like crap in most Windows browsers, but that’s not surprising, Windows is the place where digital typography goes to die.

I had included Ronnia here in the blog, as well. As the font for both the body and sidebars, but after seeing it in a longer text I felt it was a bit too much, and reverted to a system font. This will also make it easier to read on a PC.

I still have a little more work to do. I want to spend more time tweaking the galleries, ordering images, and adding longer captions, but I’ll let it evolve naturally as I add new work. I also want to ditch the last of the Flash, and make sure everything works on mobile devices. This site is obviously not going to survive being squashed into an iPhone, and I’m working on a much simpler gallery formated to it’s size restraints, but I would like it to work on an iPad, and so far it’s not bad. I need to write some CSS to eliminate things like rollovers, and make the video HTML5 compliant, but that shouldn’t be too hard.

So, after a good couple weeks of work I now have a site that’s much easier to manage. My overall workflow is cut in half (if not more) and I can worry less about coding and more on sequencing images.

Thanks WordPress. Thanks PhotoShelter. I’m glad you get along so well together, I couldn’t have done it without you.