A little break during dress rehearsal for Life Lines

Last Day

Grillicious!

Ride it like you stole it

Hottest

Hotter

Kind of warm

I don't know if I'll ever find a beer with a better name than this

Would You Believe

I spent my free time from Monday March 26th to Friday March 30th putting together the website for one of the best photographers in Holyoke - Jeffrey Byrnes. It's live now at http://jeffreybphotography.com.

Jeff had been struggling with his site for a while, because of how difficult it can be to get the code right. It's especially important for his site because of how much it relies on the presentation - his work is the imagery, after all. So, I created the site with two major areas of focus:

1. The site should be easy to use. He's a photographer - he should be making & displaying photographs, not fiddling with lines of code to get webpages to display correctly.
2. The site should highlight his photographs as strongly as possible. Jeff's work is visually impacting, so I really felt that the site needed to get out of the way of his images as much as possible.

I used BuildInternet's Supersized jQuery plugin as the basis for the overall site design as well as the slideshow functionality. I had originally chose to work with the Supersized jQuery plugin because of its full-screen slideshow. It sets the image to the full size of the browser, and includes a small set of controls at the bottom of the screen … nothing more. This was perfect for one of my focuses - the site getting out of the way of the images. After working with the plugin a bit more, I realized that it had the capability of hooking into Flickr. That's when I realized it was also a perfect fit for my other focus - Jeff already used Flickr extensively, and in a very organized fashion.

I did have to make some modifications to the plugin, though. Originally, there were some UI elements that sat on top of the images - these provided forward/backward navigation through the image slideshows. I also didn't want to complicate the controls by including a set of navigation for thumbnails (basically, a second area of navigation on top of the existing full-size image navigation - it just made things a little more apparent than I wanted them to be for this site). So, after modifying the control set at the bottom of the page, I was ready to figure out how to display the pages that required a bit more content…

The About, Contact, and Projects pages are all single-image pages with their own content. I didn't want to give up the ascetic of the site for these three pages, so I needed to figure out a way to overlay the content onto the page. I was lucky, because I had already figured out a way to accomplish this a few months ago - I even had two ways to do this (one by using a set of layered divs, and one by using CSS3 rgba backgrounds). I plugged in my code & had some awesome opaque boxes for the content to sit in - perfect - you can read the content just fine, and the background image still comes through.

Maintaining the site can't get much easier for Jeff, either - which was my other area of focus. Now he doesn't have to fight with code, and his overall workflow isn't changed either. All he has to do is maintain his Flickr Sets, which he does anyway. The site automatically connects into his Flickr account through the Flickr API to display the correct set of images for each page - it goes so far as to allow him to modify his Flickr Sets & have his changes be visible on his site immediately.

While working with that Flickr connection, I found a bug in how the plugin attempted to get the owner of Flickr photos. This was causing all of the photo links to go to error pages on Flickr, instead of the photo's Flickr page. Supersized is open source software that's hosted on GitHub, so I was able to submit the fix that I came up with.

This was an exciting project for me because of its pace, because of how easy it is to work with Jeff, and because of how much impact my work has (and will have) on everyone who comes to Jeff's site to appreciate his work.

JeffreyB Photography is located in the heart of downtown Holyoke. If you need photos, you need Jeff - you can get his contact information right from his amazing website.