The Entry Archive
Random Header Images For Your Blog Using DIVs and PHP
When I began developing the Big Square Blog, I knew that I wanted random header images at the top of my pages for a number of reasons. For starters, frequent visitors to a website can get pretty bored with the same header image after just a few visits to an otherwise impressive website. Secondly, I wanted a way to show off some of my travel photos without having to dedicate a significant amount of time or bandwidth to a separate photo gallery. It was for these reasons that I decided to go the randomization route. Go ahead; refresh this page to see what I’m talking about.
Chris Pearson has a handy tutorial on his website for how to achieve this effect. While it produces the look that I was going for, it wasn’t exactly the way I wanted to go about generating random header images for the Big Square Blog. Chris’ method involves the implementation of PHP code within an image tag, which means that even CSS-incompatible web browsers and printers can view or print out each of his random header images.
Because I wanted to exclude every single website image that is unrelated to each of my blog entries from CSS-incompatible browsers and printers, Chris’ method of placing an image within his WordPress header file falls a bit short for my needs. However, he did inspire me towards another method that takes advantage of DIV tags and the same line of PHP code that he uses on his website. What follows is the How-To.
The Setup
Take any number of images that you desire to be included into your random header and give them all a common name, similar to the way I have set my images up:
- sub_header_1.jpg
- sub_header_2.jpg
- sub_header_3.jpg
- sub_header_4.jpg
- sub_header_5.jpg
You can use PNG or GIF files if you like, but make sure that the image formats and filenames stay consistent. What we will be randomly selecting is a header DIV based on the numbers 1 through 5 with our snippet of PHP code.
Place your header DIV
The random header DIV that I have created for the Big Square Blog includes a short description about me and my blog. If my header were to have only one image, it would look something like the following:
<div id=�sub_header_1�><d iv id=�sub_description� >Description here.</div></div>
The CSS for my sub-header is as follows:
div#sub_header_1 {width: 750px;height: 220px;background: url (images/sub_header_1.jpg) no-repeat; }
In effect, the above code produces a nice static header image that only displays in CSS-compatible web browsers and is excluded from everything else. Now let’s make it more exciting.
Making The DIV Random
To create a random header using CSS and PHP, we need to create five separate DIVs which have identical names but different numbers attached to the end of them. For example:
- div#sub_header_1
- div#sub_header_2
- div#sub_header_3
- div#sub_header_4
- div#sub_header_5
Depending on your website layout, you may want to modify the height and width of each DIV. The greatest part about my method is that each DIV can have different dimensions associated with it and everything will still work smoothly. Hello flexibility!
The snippet of PHP code that we will be using selects a random number from a predefined range of numbers and outputs it as normal HTML. It is as follows:
<?php echo(rand(1,5)); ?>
What this bit of code does is select a number between 1 and 5 and output it to a webpage as normal text. The values that can be printed from the above code are 1, 2, 3, 4, and 5.
Tying It All Together
In order to make our static header DIV random, we will tie in our PHP code with our original static sub-header DIV. This is what it looks like:
<div id="sub_header_<?php echo(rand(1,5)); ?>"><div id="sub_description"> Text here.</div></div>
Voila!
What this tiny bit of powerful CSS and PHP do is make a random header image possible without having to worry about random header images being displayed in CSS-incompatible browsers or printers. It is similar to Chris Pearsons’ method but this time around it uses the DIV tag and not an image tag, which I only want to use inside of blog entries.
Try this code on for size and I am sure you’ll like it. It’s an excellent way to spice up your website without fooling around with image tag attributes. Hop to it!
Post Date: March 5, 2007
5 Responses to “Random Header Images For Your Blog Using DIVs and PHP”
dean:
March 10th, 2007 at 5:30 pm
Great tip, Philip. But aren’t there wordpress plugins that allow for this randomness as well?
Philip Arthur Moore:
March 10th, 2007 at 7:39 pm
Hey Dean,
I’m not exactly sure to be honest. If I could have found a plugin that would automate all of this for me, that would have been grand. But then again I have a bit of a hangup when it comes to using too many WordPress plugins; it makes things feel more sluggish to me rather than making small code edits here and there. Have you found a plugin that takes care of this? I’d love to take a look at it.
Dean:
March 11th, 2007 at 10:00 am
Yeah- I know what you mean. Actually,now that I think about it, your method is pretty simple and light on code so you may as well stick with it. But I did find this random image plugin;
http://photomatt.net/scripts/r andomimage/
BTW- it might be a nice idea to have the option to subscribe to your comments so we know if the comments have been updated rather than check manually :)
Philip Arthur Moore:
March 12th, 2007 at 8:02 pm
Duly noted, Dean. I’m actually going to get on that soon. I’ve been pulling my hair out today working on another part of the site. Thanks for the great suggestion.
pluda:
April 18th, 2007 at 5:49 am
Hello,
great tip, but can I post here a question?
And I i want to have random ul list-style-image: random pic here
Is it possible?
I’m pulling my hair off but I can’t find any smart sollution to this
Congrats, your site is very cool
Pluda
Leave a Reply