Many times in past years I have wanted to display random photos in galleries and/or sidebars, why not do the same for the WordPress header graphics? I mean, the wife and I have eclectic tastes and could never decide on utilizing ONLY one graphic. Old concerns are still in play, when is big just TOO BIG concerning file size? The Mrs. is new to the web design arena and expressed her lack of concern with this statement, “but I like it.” Not everyone runs on High Speed internet but our blog was never dial up friendly with its heavy video, Flash and graphic usage anyway. So, we did away with file size concerns and our headers range 100k-348k. Won’t win any speedy loading awards but we both get what we want. With that said, I finally decided to just incorporate a little PHP into my WP header file using an include (it’s an old friend) and then associated it with a call from my WP header div. PRESTO! It works like magic.
My wife is the colorful personality in the web-space. I am just the geek behind the scenes that make things work and then shares those adventures with you, the netizen. So, let’s get started.
First thing you want to do is create a new .php file with notepad or your choice of editor. I pretty much do everything in notepad and then save in a directory called snippets. Like I said earlier, this snippet is an old friend and I have utilized it in numerous places OUTSIDE of WP. You can call it anything but my choice is something descriptive and highly imaginative. Seriously, you want to be able to find it 12 months so be friendly. I went with random_image.php. Kinda has a kick to it, right? Inside this little zinger we are going to add an array along with a couple of simple variables and use a couple of built-in php functions.
We have four images that we wanted to use, we named them… header1.png, header2.png, etc. Copy and paste the below into your .php file and change the names in the array to suite your needs. If you are familiar with associative arrays then you know adding captions is a snap. Then you can use CSS to design the look, feel, and borders.
<?php
$images = array(
array('file' => 'header1'),
array('file' => 'header2'),
array('file' => 'header3'),
array('file' => 'header4'),
);
$i = rand(0, count($images)-1);
$selectedImage = "/random/{$images[$i]['file']}.png";
Add this after the semi-colon. It checks to see if file exists and picks up the image sizes.
if (file_exists($selectedImage) && is_readable($selectedImage)) {
$imageSize = getimagesize($selectedImage);
}
?>
We set the $i variable to be “our counter,” $selectedImage will be what we call in our header file and it will contain the path so make sure you change it to match yours. Our folder for these headers was “random.”
Next, we make sure use the file_exists function and that the file is readable to stop unwanted errors, etc. If it can’t find the image, it will simply ignore it. Next we use a variable to grab the size of our selected image and then we can use yet another call to dynamically display it as well as the image. Of course, you DO want all your headers to be the same size. This line is JUST IN CASE you decide to use this snippet in a gallery or sidebar that contains photos with different sizes or widths. We close out our tags and our include is ready to go.
Time to open the header.php file and call this include into your page. Above the head tag in your header file, add:
<?php include('random_image.php'); ?>
MAKE SURE that you have the path correct. We just added ours to the root of our theme so no path necessary.
So, now what? Move down to the div in your index.php or wherever you have the CSS setup for you header graphic. It could be that you are new… I never know, just make sure you remove the graphic that your CSS probably has setup. Make sure the CSS is setup to display the same height and width that you are using for your graphics. If something is not showing up after you add the next two lines, check your CSS and your directory paths. This has happened to me on a couple of occasions when I was just getting started. I swore it was not in my coding, guess what, it wasn’t. After hours of debugging, it was something as simple as my include path had changed.
Don’t let me confuse you but I am going to give you all the information and then tell you how to dissect it for minimum needs.
First… the convoluted code and then the simple version I used for this blog.
//The whole convoluted version as promised.
<div class="photos">
<img src="<?php echo $selectedImage; ?>" alt="WHATEVER" class="styledborder" <?php echo $imageSize[3]; ?> />
<p class="caption"><?php echo $caption; ?></p>
</div>
Alright, so we don’t need the caption but I included it just IN CASE you use it in some other area that is not a header. Make sure you have added your captions to the associative array that is in random_image.php include. You will also need to add the $caption variable to your include. I tell you what… A picture is worth a thousand words! I will post what your include may look like if you added captions. It will be at the end of this article. You called your image path with the $selectedImage variable. You have your alt tag for the description and class to stylize as you wish in your CSS. The $imageSize variable will pull in your height and width. ALL DONE! The echo statement will display whatever caption you put in the $caption variable. Simple right? Clear as mud?
The simplified version for WordPress. To display your random headers in WordPress you simply need to replace a few bits of code.
Your paths are pulled in with WP functions just like you are used to if designing for a WordPress theme. We have hard-coded our height and width because they will never change and used another WP function to add in our alt tag description.
<div id="header">
<img src="<?php bloginfo('template_directory'); ?><?php echo $selectedImage; ?>" alt="<?php bloginfo('name'); ?>" width="990px" height="220px"/>
</div>
I hope a few of you found this somewhat helpful. If your paths are correct, your images are in place, and your CSS is good-to-go then you should have a random header every time you load the page.
If you use the above code, feel free to drop us a link.
#############ORIGINAL WITH################
#############CAPTIONS INCLUDED#############
If you want to use a caption for some reason(i.e. post images); here is my ORIGINAL random_image.php file before “converting” it for my random header.
<?php
$images = array(
array('file' => 'cms_image_update',
'caption' => 'Screenshot of image updating in USMCsky home-made content management system.'),
array('file' => 'cms_newsletter_update',
'caption' => 'Screenshot of the newsletter in USMCsky home-made content management system.'),
array('file' => 'rballoon',
'caption' => 'Screenshot of my balloonhead template.'),
array('file' => 'rcondo_ad',
'caption' => 'Flash by Z Outlook stationary ad'),
array('file' => 'cms_journal_update',
'caption' => 'Screenshot of the article updating page **home-made content management system.'),
array('file' => 'rvideos',
'caption' => 'Fun video projects for family and friends.'),
array('file' => 'rballoon',
'caption' => 'Screenshot of my balloonhead template.'),
);
$i = rand(0, count($images)-1);
$selectedImage = "images/{$images[$i]['file']}.jpg";
$caption = $images[$i]['caption'];
if (file_exists($selectedImage) && is_readable($selectedImage)) {
$imageSize = getimagesize($selectedImage);
}
?>
Isn’t the previous one SO MUCH EASIER to follow? Anyway, drop us a line if you have any questions.
Happy Coding!
Z
Tags: Functions, Header, PHP, WordPress
Want Something Else?