Jeremy Parker's website is 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
It's like Ambilight, but instead of TV, it's this website.
Here's how I did it:
1) Get the latest pic from your textamerica moblog.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
your_user_namereplaced 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 parameter 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 parameter (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 orginal code (compare the original version with my 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!
Lastly, if it wasn't for digg, I wouldn't have known about this. Go digg!