Summary:
+ Version 2.4 of Murphee K dot com introduces Ambilight, which changes the site's background colors concurrent with the latest photo from a photo-sharing service.

Details:
This is possibly one of the ugliest hacks I've ever done.

Jeremy Parker's (now defunct) website was pretty damn cool, and it had something I wanted to steal:  within his gallery, the background colors would change dynamically (and aesthetically, I might add) concurrent to the picture being viewed.  Thanks to his mad php skillz, I was able to implement this cool little upgrade for Murphee K dot com:  every time I upload a new picture on my Flickr, this website will change colors using average colors extrapolated from the new picture.  And I set it up so it does it automatically -- all I have to do is post a new pic, and poof, new layout colors!

It's like Ambilight, but instead of TV, it's this website.

Here's how I did it:

1) Get the latest pic from textamerica.

[Update:  this first part was written when I was using textamerica as my photo sharing service instead of Flickr.]

As far as I can tell, there's an easy way of doing this:  by finding the dynamic jpeg file within a user's profile that is reserved for the latest uploaded pic.  To retrieve the URL of this file, you can run http://your_user_name.textamerica.com/mypage.asp (with your_user_name replaced with your textamerica user name).  Running this asp will give you an empty page on your browser, but when you View Source, you can see that it references a one .jpg file -- that's the reserved dynamic file!

The cool thing about this file is that it's small (125 x 94), hence once you hook it up to the php script, the average color algorithm calculation won't take long.

2) Pass the latest pic URL to the php script as a query string and extract the colors.

This is easy.  All you have to do is call the php script (you should have it somewhere on your site or, if your site can't handle php, on any of the free sites that run php) with the URL of the latest image as a query string (via ?jpgfile=latest_pic_url), and the script then returns an array of colors.  [Update: One way of avoiding color recalculation is by storing these values in session variables.]

Jeremy's original script calculates the average color of the jpeg and extrapolates two more colors from the average color.  This site required one more color, but it wasn't too hard to extrapolate another one based on the original code (here's my final version).

3) If you use CSS (hopefully you do), make it dynamic and pass the php's output array as its input, and assign colors accordingly.

There's more than one way to make the php's output array as the css input.  The way I did it is I turned my css file into a dynamic file and specified its contents as text/css.  (Here's a quick google-searched tutorial.)  Specifically, I changed my css file's extension to .asp and placed the following statement at the beginning of the asp file: <% Response.ContentType = "text/css" %>.  Since I now have a dynamic css, I can extract the colors from the array and assign them to my layout accordingly within the css file.  Simple, eh?

Of course, I had to update all my pages to point to the new dynamic css file.  Voila!  Done!

-George Ryan

PREVIOUS

NEXT