Hey folks! It's been a while! Sorry it's been a while but that's just how I roll. I've actually been thinking up all sorts of nerdy subject matter, it's just been crazy as always and I haven't forced myself to post. I finally got myself into a corner to post for you today, awesome right?

It's been live for a while now, but I finally got my wife Ashley's photography portfolio website launched, go check it out! Today I'm going to spill the beans on how I made it, and hopefully give some of you folks some good ideas. It was a fairly quick and simple build using CakePHP, the Flickr API and some MooTools magic.

So the coolest thing about the site is that it's all Flickr-fed. Ashley chose a set of categories she wanted to use and I had her create Flickr sets for each of them. Each category you click on references a specific Flickr set that's pulled in and cached via a nice, reusable table-less Flickr model I created for CakePHP. Why is that even cool you ask? Because I didn't have to worry about handling and storing uploads or anything—the site requires no admin interface at all—and it also works as a bit of extra exposure for her shots, being both on the Flickr site and her portfolio site. The Flickr model I've created has proven useful in a number of cases—I even use it on this very site for when user comments are posted. I basically just disable Cake's table linkage and used a few methods to access Flickr's various API methods.

The most challenging part of the site was the Javascript. If you check the site out, you can see that the image is preloaded (using the MooTools Assets class), the thumb menu is animated, and there are some nice fade transitions in there too. I accomplished it all in a custom MooTools class called 'Photoset'. It ended up being about 180 lines of code—not too bad—and handles all of the javascript on the site—the loading, fades, menu, everything. The load/fade transition was the trickiest part, but I used the Asset class along with MooTools chaining and did it in about 12 lines of code:

this.loader.start(1).chain(function() {
    new Asset.image(load, { 
        onload: function() {
            this.loader.start(0).chain(function() {
                this.photoFade.start(0).chain(function() {
                    this.photo.src = load;
                    this.photoFade.start(1);
                    this.showing.setText((index + 1));
                    this.loading = false;
                }.bind(this));
            }.bind(this));ˇ
        }.bind(this)
    });
}.bind(this));

Basically I fade in the 'loading' indicator, preload the image via Asset.image, fade out the loader, fade out the previous photo, change the photo source, and fade it back up. Whew! Chaining is a little tricky to structure in a nice, readable way, but so nice to use! With MooTools chaining, you can set a stack of time-based functions in line to occur one after the other. It's basically like using an onComplete event to call another function, just much easier and cleaner.

And that's all! Check out the site and you know where to go if you need a good (and sexy) photographer. Feel free to post comments if you have any questions and look out for plenty more updates coming soon.