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!

Posted by David Boles

David Boles was born in Nebraska and his MFA is from Columbia University in the City of New York. He is an Author, Lyricist, Playwright, Publisher, Editor, Actor, Designer, Director, Poet, Producer, and Boodle Boy for print, radio, television, film, the web and the live stage. With more than 50 books in print, David continues to write 2MM words a year. He has authored over 25K articles and published more. Read the Prairie Voice Archive at Boles.com | Buy his books at David Boles Books Writing & Publishing | Earn the world with David Boles University | Get a script doctored at Script Professor | Touch American Sign Language mastery at Hardcore ASL.

20 Comments

  1. Yay!
    It works!
    So nice to have the images back and rotating.

    Like

    Reply

  2. Have we told you lately how brilliant we think you are?

    Like

    Reply

  3. 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!

    Like

    Reply

  4. 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!

    Like

    Reply

  5. Okay, I do see a new image now. Nice. Must feel great to get it working again.

    Like

    Reply

  6. Yes, it feels grand! We have over 60 new image headers now. You can visit just to watch the images change.:mrgreen:

    Like

    Reply

  7. YEAH – very neat.

    Like

    Reply

  8. Hi Nicola!
    Thanks for the good words!
    You could easily do a similar thing on your site!

    Like

    Reply

  9. 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!

    Like

    Reply

  10. heh, my first visit since you put it up, and i got the bang!
    awesome.

    Like

    Reply

  11. 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.:mrgreen:
    I have yet to get BANG!ed myself.

    Like

    Reply

  12. I finally got the “BANG!” today!
    It was wild and surprising!

    Like

    Reply

  13. 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

    Like

    Reply

    1. You would need access to a web server to remotely call the .PHP file.

      Like

      Reply

  14. […] image headers for the WordPress.com Twenty Ten theme — I decided to see if I could get my Cutline Rotating Image Header Tutorial working with the new, default, Twenty Ten theme we are currently using for the Boles Blogs Network […]

    Like

    Reply

  15. 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

    Like

    Reply

    1. 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.

      Like

      Reply

  16. […] a link to the result. Actually, I’d love to do a rotating banner, but apparently that’s not possible without knowledge of […]

    Like

    Reply

Share Your Thoughts:

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s