I get a lot of emails from people. Sometimes it’s a charitable soul sending me a bug report (via google code) and, sometimes, an even more charitable soul sending me bug fixes (these are my favorite types of people). Then there’s the Clientcide google group, which is where I prefer questions about my code go so that future readers can see the answers, too.

But today I got this email:

Can you write a blog about how you change the images in your
header.

I like your new design so much.

-shin

Awww shucks. Why thank you shin, I like it, too.

So I added a new contact page specifically for suggesting topics you’d like to see me write about (Post a Question / Suggest a Post Topic). And, for starters, I’ll answer this question from shin.

Now, the right way to have automated my header rotating the images would have been to author a little bit of php that got the listing of a directory for all my header images and then chose one at random. That would look like this:

$path = ABSPATH.'art/backgrounds/';
$dir = opendir($path);
$files = array();
	while ($file = readdir($dir)) {
     if (!is_dir($path.$file) && $file != "." $file != ".." && (strpos($file, '.jpg') == strlen($file)-4 || strpos($file, '.gif') == strlen($file)-4)) {
		array_push($files, $file);
	}
}
$randInt = rand(0, sizeof($files)-1);

echo "<div id=\"banner\" class=\"clearfix\" style=\"background: url(/art/backgrounds/".$files[$randInt];."\">";

Before I get a billion emails about a better way to do this in php, let me explain why I didn’t do this on this occasion: because I am lazy, and because my php is rusty.

Instead, I did it all in JavaScript, which increasingly is becoming my native tongue, so to speak.

Here’s the JavaScript:

(function(){
	var img = ["8be10e.jpg", "91d7e4.white.jpg", "c5eef7.white.jpg", "cded8c.jpg", "d5d5d5.white.jpg", "d8eff7.jpg", "ffbd00.2.jpg", "ffbd00.jpg", "ffc51a.jpg"].getRandom();
	$('logospace').setStyle('background-image', 'url(/art/backgrounds/'+img+')');
	if (img.test('white')) $('logo').set('src', $('logo').get('src').replace('black', 'white'));
	$$('div.navbar').setStyle('background-color', '#'+img.split(".")[0]);
})();

This solution wouldn’t work so well if I were getting the images more dynamically. For instance, if I ever throw a new image in the mix, I’ll have to edit the code (where the php wouldn’t require that). So the first two lines is me just choosing a random image and setting the background of the nav-div.

The next two lines:

if (img.test('white')) $('logo').set('src', $('logo').get('src').replace('black', 'white'));
$$('div.navbar').setStyle('background-color', '#'+img.split(".")[0]);

Adjust the rest of the header to compliment the image. Some of the images are dark, some are light. For that, I have two logos – a light and a dark one – so that they stand out. So, if my background image filename has “white” in it, it means I should use the white logo.

The nav bar also changes color, and the way that I figure out the color based on the file name is that the first portion of the file name is a hex value that I want to use. So I name my file names {hexValueForNav}.{colorForLogo}.jpg.

If I ever get into the habit of adding images often to the mix, I’ll probably switch over to the php method, but for now, this works fine.

This entry was posted on Friday, November 21st, 2008 at 11:25 am and is filed under Examples, Manipulating the Dom, Your Questions. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.