Random Image Header Tutorial

  • Author
    Posts
  • #41196

    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!

    #41329

    andy
    Member

    unavailable in five hours ;-)

    #41330

    andy
    Member

    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.

    #41331

    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!

    #41332

    andy
    Member

    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) }

    #41335

    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?

    #41336

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

    #41341

    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.

    #41342

    andy
    Member

    sunburntkamel: m is for month

    #41414

    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.

    #41422

    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). ;)

    #41462

    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.

    #41548

    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-770×140.jpg

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

    #41657

    drmike
    Member

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

    #41823

    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.

    #41824

    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.

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

    #41825

    drmike
    Member

    scrambled is trying to do something else.

    #41826

    timethief
    Member

    o.O … Oh sorry.

    #41836

    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?

    #41837

    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?

The topic ‘Random Image Header Tutorial’ is closed to new replies.