Twitter has been hacked… again. What a surprise.

I’m taking what used to look like this:

…and bringing it in to the days of Web 2.0.

I have a pretty good design in mind right now, and after about 30 hours, it’s finally coming together. I wanted to do something a little different by having rotating header images, but not the complete header; only a fraction. There are a handful of scripts out there that rotate images, but many of them are written in JavaScript, and suffer from an important limitation: in order to add or remove items from the pool of images to pick from, you need to get in there and edit the code yourself. Every time you want to make a change. In every page that rotates images. I wanted something simple, and changing the page only slightly and in subtle ways can work miracles for an otherwise ‘static’ website. For example, imagine a masthead-graphic that’s different each time someone reloads the page. How about a product image-link that seems to magically change with every pageview?

In looking around a bit, I found a solution that references the bg-image in the css to a URL that points to a PHP script, in turn selecting a random image from the folder in which the script is contained. It’s actually a pretty ingenious solution.

1. Download the PHP script rotator.txt here. After downloading, rename the file to rotator.php.
2. Put the images to be rotated in the same directory as rotator.php.
3. Upload all the files via FTP.
4. Insert this code in the CSS for the DIV which contains the image you would like to switch.

background: url(images/rotator.php) no-repeat center top;

And presto! You’re image is dynamically changed every time the page is reloaded.

I’m not going to show you how I’m going to implement this code as of yet, but hopefully you should see the result (live, of course) by the end of Thanksgiving break. I’m quite excited about what you’ll say!