Adding random images.

If you’re just tuning in, this is the fifth installment of my series of articles about using WordPress as a CMS to build an informational Web site. Throughout this series, I’m talking about a specific site I developed: Flying M Air, a helicopter tour and charter company I operate when I’m not writing and tweaking my Web sites.

I didn’t expect my site to have a lot of pages, but I did have a lot of pictures I wanted to show. One of the things I learned long ago is that every Web page needs a good mix of text and images. Not too much of either one. But rather than pick and choose a limited number of photos to illustrate my aircraft and destinations, I decided to use a more complex solution: set up the site so images would appear randomly on the pages in predetermined places.

I searched for a plugin that would help me do the job. The first one I found was the Random Image Plugin. This plugin randomly selects an image attached to a post using WordPress’s built-in upload feature and displays that image. This is not what I wanted to do.

I then found the Random File plugin by Scott Reilly. This plugin enables you to place a random file from within a specific folder in a theme’s template file or, with the help of a plugin like Exec-PHP, within a post or page itself. That’s exactly what I wanted to do.

I created the images in two basic sizes: small, for the left sidebar, and medium, for within posts and pages. The small images already existed in a predefined size in my old Web site on its sidebar. All I had to do was modify them to use them in the new site.

The modifications weren’t difficult, but required some use of Photoshop. Since my brochure used a snapshot-like image format, with a white photo border and drop shadow, presented on a 3° angle (in either direction) I wanted the same format on my site. The angle and drop shadow required that the entire image be placed on a background the same color as my site’s page background: yellow. You can see an example here.

I created a few Photoshop actions that automated the lengthy process of resizing the image (for medium images), placing them on a background, creating the drop shadow, and tilting the whole thing one way or the other. I did this with all the images I wanted to use and saved them as JPEGs in topical folders on my Web server, within an images folder in the wp-content folder. For example, one folder had images of the helicopter in flight, another had the interior, another had destinations for day trips. You get the idea.

I installed and activated the plugin. It’s very straightforward, with only one file to upload to the server and no configuration required.

I also installed and activated the Exec-PHP plugin. We discuss this plugin in our WordPress book, so I won’t go into detail about it here.

Now I was ready to add the random images. For each page of content, I decided where I wanted the image to go and what kind of image I wanted to display. For example, on the Home Page I wanted to display a photo of the helicopter in flight. I had a folder with a few of those images in there, so all I had to do was insert the code that would display a random image from that folder:

<img src="<?php echo c2c_random_file('/wp-content/images/helicopterinflight/'); ?>" class="right" alt="Flying M Air's Helicopter in Flight" />

Keep in mind that I put this code in the body of the Page — not in the template file used to display the page. That’s why I needed Exec-PHP. You can’t include PHP in a post or Page without something like Exec-PHP to help out. (There are other plugins that do the same thing, but this happens to be the one I chose. With luck a reader of this article will point out some alternatives.)

Note the class="right" component of the tag. This uses CSS to position the image. For this to work, you must have right defined in your style.css file. This was predefined in the version of Andreas I used to base my site on, so I was all set. Otherwise, I could have done it the old fashioned way, with code like class="right" align="right" hspace="5". But the CSS approach is better, as Miraz could explain better than I could.

I did this throughout the Pages and posts on my site, wherever I wanted a random image. If I wanted the same image to appear every time in a specific spot, I just used a plain old img link to specify the image I wanted to appear.

Getting the smaller images in the sidebar was a bit tricker, but the Random Image plugin’s excellent documentation gave me the information I needed. The goal was to display a bunch of random images. If I just used the same code several times in a row, there was a chance that an image would be repeated in the column. I didn’t want that. So I used this code in the leftsidebar.php file:

<p><?php
$files = array();
for ($i=1;$i<=<strong>7</strong>;$i++) {
   $file = c2c_random_file('<strong>/wp-content/themes/andreas/images/small/</strong>', 'jpg png gif', 'url', $files);
   echo '<img src="' . $file . '" alt="Random image #' . $i . '" />';
   $files[] = $file;
}
?></p>

There are two configuration options to note here:

• The number 7 in the code is the number of images to display. I keep playing with this number, so it might show a different number of images if you visit the site. My goal was to have the column of images approximately the same length as the navigation sidebar so they’d balance out the page.
• The path to the folder of images to display tells Random Image where to find the images. In this case, I put the images in a folder in the theme folder. But I could have put them anywhere, including in the images folder with my other images.

To make this work in the sidebar, it’s important that all the images are the same size. Otherwise it’ll look weird. Of course, you might want it to look weird. I didn’t.

In the next installment of this series, I’ll tell you about the Print and E-mail features I added to help site visitors share information with others. See you next week!