4/17/2004 ↓

Random Image Header

Thanks for visiting! If you're new here, you may want to subscribe to our RSS feed. This blog posts regular Wordpress news, updates of themes, plugins, ideas, hacks, quick fixes and everything about blogging, especially about Wordpress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.

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. :smile:

1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 4.38 out of 5)
Loading ... Loading ...
Sphere: Related Content | stumbleit |
Translate to German Translate to Spanish Translate to French Translate to Italian Translate to Portuguese Translate to Japanese Translate to Korean Translate to Russian Translate to Chinese

Latest Videos

Latest WordPress Jobs

16 Comments | Leave a comment | Comments RSS

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

    oso (1 comments.) — 04/20/2004 @ 3:51 pm
  2. [...] tever passes by…

    Random Image Header
    04/17/2004

    Random Image Header

       In General Socky [...]

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

    Onno (1 comments.) — 07/29/2004 @ 3:45 am
  4. [...] 54);
    File Category: Asides — by danithew at 4:30 pm

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

  5. 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?

    douglas (1 comments.) — 01/12/2005 @ 12:33 am
  6. 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!

    taka — 01/28/2005 @ 8:56 pm
  7. This one works on Mozilla and Opera too, and is just as simple:

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

    snuf (1 comments.) — 02/8/2005 @ 1:23 pm
  8. Re post 7:
    This is really the only one I found that works on my Mac. Thanks for the link!

    Mike — 03/29/2005 @ 3:07 pm
  9. 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

    kirk — 04/5/2005 @ 11:14 pm
  10. [...] ge Rotater. And I modified the rin theme stylesheet according the the instructions here - Weblog Tools; Random Image Header. [...]

  11. For see Cuba.

    Cubaxp (1 comments.) — 05/26/2005 @ 3:58 pm
  12. THX, this script works well!

    rivOvle (1 comments.) — 08/2/2005 @ 4:03 am
  13. 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

    zeb (1 comments.) — 08/6/2005 @ 11:53 am
  14. Check this url : http://www.directkerala.com/do.....s-and.html for ASP.Net implementation of rotator.

    Cheers

    Binu Thayamkery (1 comments.) — 12/23/2005 @ 1:20 pm
  15. khairulu (1 comments.) — 12/9/2006 @ 1:15 am
  16. Exactly what i need! Thanx!

    duluoz (1 comments.) — 07/6/2007 @ 8:54 am

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

(required)

(required, will not be published)


S2