by We used to run the CUTLINE theme here on your favorite Urban Semiotic and I wanted to bring back our famous Rotating Image Headers that change with every fresh re-load of a page if you happen to be using that theme.
I figured out how to make it work and I wrote up a tutorial how to do this for the WordPress.com Forum and I’ll share those steps with you here now for the record:
1. You must have the Custom CSS available for your WordPress.com blog.
2. You must have access to another website or server to upload your images and a PHP script.
3. You must know the proper CSS code to use to call a remote image header.
4. Go to Matt’s site and copy and paste the “rotate” code found on his page and save it as a file called “rotate.php”
http://photomatt.net/scripts/randomimage
and if you don’t know how to create a PHP file from that page then don’t try to do this header customization.
5. Create the header images you want to use to match the size of your header.
6. Upload those image files and include the “rotate.php” script in the same directory on your outside web server.
7. Edit the CSS code for your header here at WordPress.com to call “rotate.php” instead of an image name – that PHP file is your image
because it calls up your images. Be sure to save your customization.
8. Click SHIFT+REFRESH/RELOAD on your browser to clear your cache to
see the image headers change on your blog. The speed of the change
depends upon your remote server, your internet connection and the size
of your header images.
9. You can see this in action right now by following the instructions in Step 8.
Enjoy!
Yay!
It works!
So nice to have the images back and rotating.
Have we told you lately how brilliant we think you are?
Not often enough.
Natch.
I have no idea what you’re talking about but I do see different photographs showing up at the top of this page. Very nice!
Hi Anne!
Thanks for the comment. Yes, what you’re seeing is the image at the top of the page change. Each time you visit us you should get a whole new image to enjoy!
Okay, I do see a new image now. Nice. Must feel great to get it working again.
Yes, it feels grand! We have over 60 new image headers now. You can visit just to watch the images change.
YEAH – very neat.
Hi Nicola!
Thanks for the good words!
You could easily do a similar thing on your site!
Here’s a game called “Rotating Roulette” you can play right now.
Force a refresh of this page to get a new image.
I added a single “BANG!” image to the rotation cycle.
Keep refreshing and if you see the “BANG!” image, you lose.
The person with the highest image refresh count without seeing the BANG! image wins!
Here’s what the BANG! image looks like:
http://boles.com/BANG-770×140.jpg
Enjoy!
heh, my first visit since you put it up, and i got the bang!
awesome.
Adam!
Welcome to Urban Semiotic! It is quite fine to see you here, my friend!
Thanks for all your expert help in the WordPress.coom support forum.
As for getting the “BANG!” on your first shot here — you are either the luckiest guy alive; or the most unfortunate.
I have yet to get BANG!ed myself.
I finally got the “BANG!” today!
It was wild and surprising!
How do I save something as a php without a server? can I use gravatar as my uploader? where do i save the rotate.php file? sorry im new to this
You would need access to a web server to remotely call the .PHP file.
Thank you so much for this post, I´m totally new at this
and… I got it to work!!! however I would like for it to refresh
more often, so it rotates faster. Is that possible? Thanks
again
Hi Fatima —
You can force a page to reload after a set amount of time — but not all browsers will reload the image header on a soft refresh. On a Mac, Firefox will always load a new header, but Chrome and Safari require a hard reload to load a new image header.