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!

Planning the site’s organization and creating the Pages.

The primary difference between an informational Web site and a blog is that a Web site’s content stays pretty much the same from day to day while a blog’s content changes regularly when new posts are added. That’s one of the reasons that blog entries display the date and have date archives. This kind of functionality wasn’t what I needed for the new Flying M Air Web site.

WordPress, of course, offers the static Page feature which makes it possible to create content that exists outside the blog’s chronology. Unfortunately, pages don’t make use of the Category feature, which is another way that blog entries are organized.

Let me take a moment to explain the kind of information I needed to convey to site visitors and how I wanted to organize it.

• First, I had a bunch of very static, unlikely to change information, such as the company background, contact information, and information about the helicopter. Although this could be presented using blog entries with a “General Information” category, I wanted to present it separately, using the page feature.
• I also had descriptions for the tours, day trips, excursions, and other services I offer. I wanted to group these together by category, which seemed like a logical organization for me. Now although I could create a separate page for each description as a subpage under a parent page, I thought that approach would be difficult to manage. So I decided to use blog entries for each description, assigning one or more categories as necessary.

The theme I had chosen and modified (a version of Andreas, as I discussed in Part 2 of this series) had a very nice horizontal navigation bar at the bottom of the header, perfect for WordPress Pages. But I worried that site visitors might be confused by two separate and apparently unrelated navigation bars: the nice horizontal one on top and the vertical one in the right sidebar, which included the list of categories. If I didn’t include information about my services in the top navigation bar, site visitors might not find it. So I decided to create summary Pages that listed and described several categories of tours and services, providing category links for each one.

Here’s how it works. On the top navigation bar, there’s a Tours & Day Trips link. Clicking that link displays a WordPress Page that discusses three categories of services: Tours, Short Day Trips, and Arizona Day Trips. Clicking one of the “Learn More” links on that page displays the category with its tours.

With this approach, a visitor could find my services, no matter which navigation method he used.

Once I decided on an approach, it was time to create the pages. I created eight pages: Tours & Day Trips, Excursions, Charters & Other Services, Get Brochures, Q & A, About Us, About Our Helicopter, and Contact us.

Although I didn’t create the pages in that order, I wanted them to appear in that order. So I used the Page Order field in the Write Page administration panel to assign a page number to each page. I skipped numbers when numbering them so I could easily change the order by changing just one Page’s Page Order value.

The Get Brochures Page currently provides links to downloadable PDF files. I didn’t use the link feature or any special template for the Page — although I could have. It didn’t seem worth the extra effort. But now I’m thinking that might be a good idea so the downloadable links appear on every page. So if you look at the site and that Page is missing, check the sidebar for the Brochure links; I’ll probably move them there.

The Contact Us page provides contact information for Flying M Air as well as an e-mail contact form. The contact form was created with the WP-ContactForm plugin by Ryan Duff. Miraz discusses this plugin in Chapter 7 of our WordPress book, so I won’t go into detail about it here.

In the next installment of this series, I’ll tell you about the conditional statements I used in the sidebar to list all tours for the currently viewed category.