Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Random Image Header Tutorial

  1. boles
    Member

    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. andy
    Staff

    unavailable in five hours ;-)

  3. andy
    Staff

    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. boles
    Member

    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. andy
    Staff

    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. boles
    Member

    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. sunburntkamel
    Member

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

  8. boles
    Member

    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. andy
    Staff

    sunburntkamel: m is for month

  10. boles
    Member

    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. timethief
    Member

    *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. boles
    Member

    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. boles
    Member

    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. drmike
    Member

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

  15. scrambled
    Member

    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. timethief
    Member

    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. drmike
    Member

    scrambled is trying to do something else.

  18. timethief
    Member

    o.O ... Oh sorry.

  19. cronkchronicles
    Member

    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. timethief
    Member

    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. cronkchronicles
    Member

    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. boles
    Member

    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

Tags