After downloading Neoclassical, one of the first things you’ll want to do is customize the random header images that now grace the top of your site’s pages. Doing this effectively requires knowledge of exactly how these things work, and with my help, you’ll be a professional image randomizer in no time.

Oh, but before we go any further, you’ll need to download and install the updated version of rotating_images.php. In order to provide you with a more robust rotator, I had to modify the original code slightly.

Background Information

The Neoclassical Theme comes with a folder named /headers that contains the 5 default images used in the rotator. These header image files all follow a simple naming convention:

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

On default installations, these header images are controlled by a theme file named rotating_images.php. This is a simple PHP script that randomly selects one image from the /headers folder and displays it using the appropriate HTML.

The script, which consists of two main parts, is easy to understand. First, we generate a random number based on the total number of images in our /headers folder (this number is manually controlled, and the default is 5):

<?php
   $random_image = rand(1,5);
?>

Next, we output the image associated with the random number we just generated:

<img src="<?php bloginfo('template_url'); ?>/headers/header_<?php echo $random_image; ?>.jpg" ... />

In the above code, note the occurrence of the variable $random_image. Because this value changes randomly, the filename referenced in the image declaration also changes.

Quick Customization Example

Now that you know a little bit about how the random header generator works, let’s tweak it a little bit. For this example, let’s say that we we’ve created 8 killer header images, and we’d like to replace the default images with these new ones for display on our site.

Step one is to ensure that your images follow the required naming convention—header_1.jpg, header_2.jpg, header_3.jpg, and so on. It’s also important that your image subscripts start with 1 and increase in increments of 1, because any other configuration would require additional modification of the script.

Step two is to upload those images to your /headers folder, which is located inside your base /neoclassical theme folder.

Step three is to keep in mind that the default configuration can only accommodate 5 header images. In our example, however, we’re looking to include 8 images, and in order to pull this off, we’ll need to make a very slight modification to rotating_images.php:

<?php
   $random_image = rand(1,8);
?>

In the above code, all I did was replace the default value of 5 with the number 8 (highlighted, kinda). Once you save and upload this modified version of rotating_image.php, you’ll have an image rotator that displays one of eight random images on each page of your site.

A Few Details…

The default header images are all 865px wide by 180px tall. Personally, I think this makes for a relatively unobtrusive yet visually striking crop, but your mileage may vary. Either way, I think you’ll appreciate the balance of your design the most if you keep your images that width.

If you use an image that is less than 865px wide, it will align to the left underneath the site title, leaving a visual gap of whitespace to the right of the image. In the event you simply must use such an image, I recommend leaving it aligned to the left. Despite that, I know many of you will want to tinker with a center-aligned image, and in order to do that, all you need to do is add the following declaration to your custom stylesheet, custom.css:

.custom #rotating_image img {
   margin: 0 auto;
}

Actually, while you’re at it, why not check out a right-aligned image, too:

.custom #rotating_image img {
   margin: 0 0 0 auto;
}

Now who can resist the urge to customize after that?