Need help? Check out our Support site, then


Random Image Header Tutorial

  1. I just received a Dashboard notification that my database would be unavailable for the next five hours for maintenance – so if you can’t hit my site to test out the validity of this tutorial… give it five hours.

    I am running the CUTLINE theme and I want rotating image headers as I had when I was running a standalone WordPress blog just because it’s neat and just because I miss it and just because I want to see if I can make it happen here.

    I made it happen here and here's how I did it:

    1. You must have the Custom CSS available for your 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 on my WordPress.com blog: http://urbansemiotic.com

    Enjoy!

  2. unavailable in five hours ;-)

  3. btw you can rotate any part of your stylesheet by the clock if you are using Sandbox and Custom CSS. Check out the body classes.

  4. Hi Andy!

    Yes, Barry just corrected me on the time thing.
    :grin:

    I have no idea what you're talking about with clocks and Sandbox and rotating parts!

  5. The Sandbox theme adds classes to the body element. Some of those classes indicate the time of day: h20 means it's 8pm.

    body.h20 #header { background: url(8PM.jpg) }

  6. Wow! Love that! Where do I hire someone to code me up a Sandbox theme?

    So would you want to rotate a header in Sandbox based on time or on someone actually loading up a page?

  7. body.m11 #header might make it seem more random.

  8. FYI:

    Before this fix I was manually changing the file name for the header every day in my CSS setup. Now the image changes automatically throughout the day without me.

    Calling remote header images also lets you control the file size and quality of the image you're loading.

  9. sunburntkamel: m is for month

  10. Oh, and another good thing about these rotating headers is if one of your readers hates the image, they can just force a refresh and get a new look.

    I call that "Refresh Roulette."

    This method gives the reader a bit of control over the interface and some of my readers try to keep a header image they like in their cache without having it replaced.

  11. *lol* And do you have on offer on your rotation one basic black or one bright white non-image header for the non-conformists? (just kidding). ;)

  12. Ha! I love that, timethief!

    You got me to thinking... I should create a "BANG!" image header -- to make the "Rotating Roulette" concept come full circle for those who dare to play.

  13. Okay, here's the BANG! image I created for my headers rotation.

    You see it, you lose the "Rotating Roulette" game:

    http://boles.com/BANG-770x140.jpg

    I haven't seen it yet. I have a very high score.

  14. Friendly reminder that Staff and Moderators are the ones who should be policing the forums here. :)

  15. Does this still work?

    I didn't use the exact script, but a

    #header {
    background: #fff url('http://h1.ripway.com/scrambled23/random.php') bottom center no-repeat;
    }

    doesn't do anything. Just a white space.

  16. drmike says:

    Actually you couldn't even do it with regular wordpress actually unless you put the blog with a frame of some sort and wrapped the theme and the header around it. The slideshow would reload on every click and start over.

    http://en.forums.wordpress.com/topic.php?id=12886

  17. scrambled is trying to do something else.

  18. o.O ... Oh sorry.

  19. Hey, I got this working...sort of. Your recipe works as described as long as I don't use a free PHP web host. I tried it with my own ISP...no problem...works like a champ. I tried it using joolo.com and freephpwebhosting.com and all I get is blank space. I've been thinking about giving up the ISP, so I'd like find a free option. But I really like the random header image. Any insights?

  20. Let's start with this please. This is the url for your wordpress.com blog http://cronkchronicles.wordpress.com/ and it is free hosted by wordpress.com.

    If you link your wordpress.com username to your wordpress.com blog then we can click on your username and see what you are talking about.

    This support forum is only for those with blogs hosted by wordpress.com.

    Have you purchased the css upgrade for your blog?

    If you have a specific question about your wordpress.com blog then would you please restate it?

  21. Thanks for your speedy reply.

    Let's start with this please. This is the url for your wordpress.com blog http://cronkchronicles.wordpress.com/ and it is free hosted by wordpress.com.

    Yep!

    If you link your wordpress.com username to your wordpress.com blog then we can click on your username and see what you are talking about.

    Done! I gave myself an avatar and nickname, too.

    This support forum is only for those with blogs hosted by wordpress.com.

    What?! No World of Warcraft questions?! Just kidding...my question stems from my wordpress.com blog.

    Have you purchased the css upgrade for your blog?

    Yes. However, since I've only been using WP for 2 days, my Paypal transactions for upgrades are still pending. I've been using the preview mode to test the random image header trick. So you won't be able to see the missing header image just yet. However, it looks like blank white space. An elephant in a snow storm or such.

    If you have a specific question about your wordpress.com blog then would you please restate it?

    Let me try. Alas, I fear this will be long winded. I managed to make Urban Semiotic's 9 step recipe work, albeit on the Misty Something-or-Other theme using the preview mode as my custom css transaction is not yet complete. It works fine if I put the rotate.php script and associated images in the public_html directory at the ISP where I host my MT blog. But I've come to loath MT, and have moved our blog to wordpress.com. I'd like to find a free host for the rotate.php file and header images. I've tried two: joolo.com and freephpwebhosting for no particular reason apart that I can spell them reliably. However, when I tried to test these free hosts with the random image header script (again in preview mode,) I only see blank white space where once one of my beautiful random header images used to be. Happens with both hosts. I'm theorizing that WP.com is blocking traffic from free PHP hosts for security reasons, but there are other possibilities.

    So to my restated question:

    Does WP.com's firewall squash incoming packets from known free PHP hosting sites like joolo.com and freephphosting.com?

    If not, can anyone speculate why the random header image script works correctly with one host and not another?

    Thanks!

  22. I think you'll need to wait for the CSS upgrade to be applied to your account first before you can even begin to test it in real time.

Topic Closed

This topic has been closed to new replies.

About this Topic