When I was creating the website for my photography endeavor, I wanted a place to show off my photos. I stumbled upon AutoViewer and thought it would be a good method for displaying my photos. However, I wanted the ease of using Flickr’s Slideshow so I could easily update my portfolio.
Mark Sweeting has a PHP script, FlickrViewer, which allows for integration of a Flickr Set with SimpleViewer, the sister program to AutoViewer. Being a programmer, I modified Mark’s script to work with AutoViewer and voila: FlickrViewer for AutoViewer.
There are two major things that I changed. The first was making the XML output compatible with what AutoViewer expects1. The second thing was to add a series of calls to Flickr to get the appropriate image URLs.
This is not an official product offering, so the extend that I’m planning on maintaining this code is the extent that I need to for my own purposes and the extent that someone wants to fund development. Otherwise, have it. Released under the GNU General Public License.
In a few short days, I’ll be releasing the next step in my photographic endeavor: my official photography website. I’ve spent about two weeks working on the site, which, for me, is quite a bit of time. But I wanted to get it right. Every one who I’ve showed it to thus far has said that it look very professional. I thought I would spend some time discussing how I went about developing the site, in the hopes that it might be interesting to someone.
After my Photographer for Hire post from a couple weeks ago, I wanted an even slicker site that was dedicated (in part) to the type of photography I was targeting (i.e. portraits). Originally, my first though was to use this awesome WordPress theme that I’d recently heard about: Monotone. In a nutshell, the color of the site is based on the first picture of the blog post. There were a couple of issues with this method, however. First, the theme was really only designed to handle one image per a blog post (seriously, all the other images were stripped out). Second, I didn’t want to divide my blogging between two sites. Third, I had to manually upload photos that I had already put on Flickr; I wanted to be able to just pull them in from Flickr. So after about a week of messing around, I decided to abandon the WordPress-based site and go home brew.
I already had SimpleViewer working with Flickr, and I knew that Airtight Interactive had another similar program called AutoViewer. So I decided to use that as my starting point. I took my current portfolio viewer…
…and designed a main page around that. I got out a piece of paper and drew the following:
Three boxes. But what about content? I took a quick trip around some of my favorite photo sites and wrote down all the links they had, then dutifully narrowed them down to three categories: photos, about me, and cost. I decided that I’d divide photos into portraits and landscapes (although really it should be “pictures of people” and “pictures not of people”). From three boxes to four boxes: Portraits, Landscapes, Rates, Andrew.
Using Photoshop, I mocked up the following:
I really wish I had screenshots of all the interim steps. Instead, you’ll just have to trust me that this wasn’t a straight forward processes.
With a design in the bag, I started the process of converting image to code. First I coded the main page. It’s all done with DIV tags and CSS. It was really just a matter of specifying the size of each element box and then making the whole thing float in the middle with some margin-left: auto; margin-right: auto; magic. I created a couple of PHP functions to distribute common code elements, primarily the XHTML above and below the BODY tag. And that was pretty much it.
From that, I coded the rates and about me page. The portraits and landscape page was pretty much already in the bag, I just had to tweak the FlickrViewer code (which took longer then anticipated and involved a pretty heavy rewrite of the existing code, but that’s another story). I showed it to some people and got some feedback, incessantly tweaking every little detail until I finally had something that I thought was good:
I think it’s rather remarkable how close the final design is to the mockup. I’ve tested it across several browsers and everything seems to be in order, including fully XHTML 1.0 Transitional and CSS compliant.