post-page

Random Image Header

18
responses

I was looking for a way to alter the image randomly on my WordPress weblog, but as the header image is called from a CSS file, I was unsure quite how to do it.

I am unsure no more !

PhotoMatt wrote a random image script, the details of which can be viewed here.
Although I use WP, this will work for any blog that has an image called from the CSS.

I did this;
– Created a folder on the server called ‘headers’
– Into that, I uploaded several different images that would suit as a header image.
– I saved the script above as a php file (call it what you will – mine is ‘rotate.php’) and uploaded into the same ‘headers’ folder.

Now I edited the CSS file.
In WP, there is a line in #header which can be used to specify a url for the image to be loaded. This needs a light alteration:

Mine was
#header {
background-image: url(image.jpg)

and it is now

background-image: url(headers/rotate.php);

Now, when the CSS is called, the background image is chosen randomly by the script. 🙂

heading
heading
18
Responses

 

Comments

  1. Onno says:

    This is indeed a good script for rotating background images, but due to the caching methods of Mozilla and Opera, it only works in IE. (Haven’t checked the mac) Because the editing takes place in the stylesheet but doesn’t modify it FF assumes that the contents of the CSS file hasn’t been altered and serves you the cached image.

    There needs to be an inline style to prevent this effect, but that is also damaging the seperation of form and content..

  2. douglas says:

    Any ideas where I can get the magic Matt script? I can’t seem to find it anywhere. OR, am I just missing something here?

  3. taka says:

    i love ya!!!!! searching the way to insert java script into CSS for several hours on the Internet , i finally found the alternative answer here. you saved my life!

  4. snuf says:

    This one works on Mozilla and Opera too, and is just as simple:

    http://www.alistapart.com/articles/randomizer/

  5. oso says:

    What would really be useful to me is a different header image for each category. So I could have a category about my trip to cuba, let’s say, and have a header picture of Cuba up. Then it would change to a picture of Spain when someone clicks on the trip to spain category. I’ll go to the wp forums.

  6. Mike says:

    Re post 7:
    This is really the only one I found that works on my Mac. Thanks for the link!

  7. kirk says:

    I am looking for a way to have random header image, that corresponds to a certain css file pulled up at the same time. In other words… I have certain images that belong to certain css files… that both need to be pulled up at the same time… but the pair is to be choosen at random… Please if you have any direction or insight… mail me. berrym15@msu.edu thank you

  8. Cubaxp says:

    For see Cuba.

  9. rivOvle says:

    THX, this script works well!

  10. zeb says:

    Hi, sorry but, I am stuck at point 1 above .
    I have blog at http://yellowfields.blogsome.com/
    HOW can I ADD a folder (‘headers’) to the server ?
    Anyone using Blogsome Can give a hand ?
    Thank you so much
    Zeb

  11. Check this url : http://www.directkerala.com/do.....s-and.html for ASP.Net implementation of rotator.

    Cheers

  12. duluoz says:

    Exactly what i need! Thanx!

  13. Michael says:

    Wonderful! I’ve been butting my stupid head against several metaphorical walls all afternoon trying various ways to get randomly selected pictures to show up on my blog header. Thanks to your clear explanation (and Matt’s script) it works perfectly now.
    ( I love being ignorant – there are so many nice surprises in life!)

  14. Dan says:

    Thanks for the simple write up! I followed what you did and got it to work.



Trackbacks/Pingbacks

  1. […] tever passes by…

    Random Image Header
    04/17/2004

    Random Image Header

       In General Socky […]

  2. […] 54);
    File Category: Asides — by danithew at 4:30 pm

    Here’s a post that can help me create a random header image rotator. […]

  3. […] ge Rotater. And I modified the rin theme stylesheet according the the instructions here – Weblog Tools; Random Image Header. […]

Obviously Powered by WordPress. © 2003-2013

css.php