/dev/random

Reality has a liberal bias

/dev/random random header image

Header Graphic

February 22nd, 2005 · 9 Comments · Programming, Web

I’ve added a simple hack to the default Kubrick theme which displays a random header graphic. Here’s how it works. I added the following function to the top of header.php:

NOTE: this must come AFTER the doctype & html lines.


<?php
function header_graphic() {
echo "/images/";
$num=rand(0,8);
echo "kubrickheader".$num.".jpg";
};
?>

Next, I changed the style element for header as follows:


#header { background: url("< ?php bloginfo('stylesheet_directory'); header_graphic(); ?>“) no-repeat bottom center; }

Finally, I saved several header graphics in my image directory named kubrickheader0.jpg through kubrickheader7.jpg.

If you’d like to see the different graphics, here they are:

kubrickheader0.jpg
kubrickheader1.jpg
kubrickheader2.jpg
kubrickheader3.jpg
kubrickheader4.jpg
kubrickheader5.jpg
kubrickheader6.jpg
kubrickheader7.jpg
kubrickheader8.jpg
kubrickheader9.jpg

UPDATE: I should have specified that the code needs to come after the first two lines in header.php. I also added links for the two new pictures I added after I posted the article.

Tags:

9 responses so far ↓

  • 1 At2 // Feb 22, 2005 at 10:26 pm

    yeah ! very nice thanks a lot !
    At2

  • 2 blogan (3 comments.) // Feb 24, 2005 at 2:31 am

    Mike, your solution looks easy. Famous last words… :-)

    Clearly, I’m doing something wrong. I cut and past the php function and put it at the very top of my header.php file (the one in the themes/default directory).

    I then replaced the uncommented line that starts with #header in the same header.php file with the header element shown.

    I placed 9 images named kubrickheader0.jpg through kubrickheader9.jpg in the themes/default/images directory.

    Now, my header is just a blue box and the footer is a gray box. I didn’t think I did anything to the footer.

    What did I do wrong?

    http://blogan.net

  • 3 blogan (3 comments.) // Feb 24, 2005 at 2:31 am

    Mike, your solution looks easy. Famous last words… :-)

    Clearly, I’m doing something wrong. I cut and past the php function and put it at the very top of my header.php file (the one in the themes/default directory).

    I then replaced the uncommented line that starts with #header in the same header.php file with the header element shown.

    I placed 9 images named kubrickheader0.jpg through kubrickheader9.jpg in the themes/default/images directory.

    Now, my header is just a blue box and the footer is a gray box. I didn’t think I did anything to the footer.

    What did I do wrong?

    http://blogan.net

  • 4 blogan » Blog Archive » My header is broken // Feb 24, 2005 at 10:25 am

    [...] oo. I’m attempting to have different pictures randomly appear, just like Mike Cohen does on his blog. But Mike’s smarter than I am. He got it to work. I haven’t…yet [...]

  • 5 blogan (4 comments.) // Feb 25, 2005 at 6:35 pm

    I got it working. Thanks, Mike, for your help. I was putting the php function too high in the header.php file. Here are more details.

  • 6 my name is faith » Blog Archive » Introducing : Random blog headers! // Feb 27, 2005 at 12:04 am

    [...] Thank to a hack by /dev/random and the modified instructions by blogan, this blog now generates random header graphics! How cool is that! I did, however, need to further modify the sc [...]

  • 7 Urban Flyfishing on the Kelvin » Blog Archive » Rotating header graphic // Feb 28, 2005 at 2:43 pm

    [...] I have managed to sort out the line of code up at the top of the blog. I am now using therotating header graphic hack I thibk it is rather nice. A nice thanyou as well to blogan as well f [...]

  • 8 Cvander » Actualizando // Jan 11, 2006 at 8:56 pm

    [...] Gracias a /dev/random encontré una interesante modificación para rotar la imagen del encabezado en el blog. [...]

  • 9 www.blogsome.com :: View topic - Rotating Header // Apr 27, 2007 at 11:28 am

    Kramer auto Pingback[...] for the random banner in the plain vanilla template, but i don´t know how to use them? sorry! http://mcdevzone.com/2005/02/22/header-graphic http://blogsome.wikicities.com/wiki/Javascript_Image_Randomizer can somebody help me out? i [...]