Simple Random Header Images for Your Blog

If you could choose between a static home page or a dynamic one, which would you take?

Dynamic every time…but wait, doesn’t that require work to pull off?

Not if you use my incredibly simple random header image solution! Oh, and you could use this for more than just header images; I just figure that most folks will want to rotate their headers, since they tend to be the most dominant visual elements.

Are you ready to go random? Let’s do it!

1. Prepare Your Header Files

For the purposes of this example, we’re going to use 5 different images to pull off our random header effect. It’s important that these images be the same size — this will keep your image declarations consistent and W3C-valid. So, grab the five header images of your choice, and name them according to the following convention:

• header_1.jpg
• header_2.jpg
• header_3.jpg
• header_4.jpg
• header_5.jpg

One thing worth noting here is the fact that all of your images should have the same file extensions. If you’re using .gif files, then make sure that each header image has the .gif extension. Photographs will look infinitely better if saved as .jpg, though, so that’s why I’ve chosen that extension here.

Upload the images to your desired directory on your server. If you’re using WordPress, I’d suggest uploading the images to the images folder within your active theme directory. Once your images are on the server, it’s time to install the random header code.

2. Code It Up!

Because I hate to limit my examples to any particular type of CMS software, I have chosen to do a bare-bones illustration here. Since implementing random header images across different platforms is a straightforward task, I’ll leave that to you.

One thing that you do need to be aware of, though, is the fact that your page must be compiled as PHP, which means that your Web page cannot just be a regular old HTML (the page should end with the extension .php ¹). But, if you’re running WordPress, you have nothing to worry about because WordPress compiles pages as PHP by default.

If you are using WordPress, then the Thesis Theme will save you some time here, and you won’t have to deal with any code at all! By default, the Thesis multimedia box will randomly rotate images that you place in your /rotator folder, thus making this an utterly brainless process.

If you’re using a different WordPress theme or another PHP-based CMS, here’s the random header image code you’ll need to get started:

<img src="http://path_to_images/header_<?php echo(rand(1,5)); ?>.jpg"
width="image_width" height="image_height" alt="image_alt_text" />

All the magic happens in this bit of PHP:

<?php echo(rand(1,5)); ?>

That little snippet of code produces — and then echoes, or prints — a random number between 1 and 5. Therefore, the header image references become header_1, header_2, and so on.

What, you were expecting it to be more complicated? Sorry!