Web Site Redesign: Fitting in My Photos

With 90+ photos appearing randomly in my old site’s header, I wasn’t about to leave them behind.

One of the reasons I chose the Cutline 3 Column Right theme for my site’s redesign is because I wanted a three column layout that was wider than my old site. Studies — including stats from all of the sites/blogs I operate — showed that the vast majority of Web site visitors have their screen resolutions set to 1024×768 or wider. I even use that setting on my little 12″ PowerBook. So the old site’s redesign was throwing away 200+ pixels of screen real estate that could be better used providing content or navigation features.

How Do I Use Those Images?

The problem I faced was the header image. Since I built my blog in WordPress nearly two years ago, I had been displaying images that I’d taken during my travels. The images had to be cropped and fit into pre-established format. I used the Random Header plugin to randomize the display. Over 18 months, I’d added nearly 100 images to the header image collection. I’d even begun writing about them in the About the Photos topic. They had become an integral part of my site and I didn’t want to lose them.

So while I continued working on my Leopard book during the day, this little problem was in the back of my mind. For days. One option was to rework the CSS and change the header image so it only took up a portion of the width and use the space beside it for a Web site description. Unfortunately, I don’t know enough CSS to do this successfully without spending hours on trial and error. With a deadline approaching, I couldn’t afford to waste time experimenting. I had to have an answer and be ready to implement it.

About the Photos Images

Then I remembered the smaller images I use in About the Photos to show the images I’m discussing. What if I put three of them side by side and displayed them with some sort of randomizer? Would they fit? What would they look like?

The images in question were 324 pixels wide. The space I had to work with was 970 pixels. 3 x 324 = 972. My luck, sometimes.

I reduced the size of three images to 322 wide and began some quick experiments to replace the existing header image (the street scene you see in the screenshot above) with the three images. I could get them to fit and they didn’t look bad. But I couldn’t get the spacing between them just righ. And I didn’t like the way they fit right up against each other.

A Short Film History Lesson

Then I came up with the film sprocket idea.

For those of you who began using a camera in the digital age and aren’t familiar with 35mm film, let me explain. Before everyone started using digital cameras, serious photographers used 35mm film. The film comes on rolls and has tiny holes along each side. A camera has gears that line up with the holes. You feed the film into the camera and it grabs the holes with its gears. A mechanical lever pulls the next blank piece of film from the film canister to the place in front of the shutter for the next photo. When the roll was finished, the photographer (or his camera) would roll the film back into the canister and the photographer would drop it off for processing. When he picked it up, he’d get prints and negatives. The negatives are the actual film, with inverse (or negative) images on them.

If a photographer had his own darkroom, he’d likely make a contact sheet. This was created by putting the negatives right against a sheet of photographic paper in the dark, then exposing the paper to light for a short time and developing it. The resulting images were tiny (at least they were from 35mm film) and clearly displayed rows of black boxes on either side of the image with black lines between them — like you see here in the header of my redesigned site.

So anyone who has worked with film should recognize these little holes. Of course, my images are considerably larger and wider, so they’re not exact representations of contact strip images. They’re just borrowing the idea.

When I modified the three images to include the borders and fake sprocket holes, I liked what I saw. I created a Photoshop action to modify the 89 remaining images so they were smaller and included the tiny black boxes and borders.

Randomizing

On my old site, the random header image was randomized with a WordPress plugin named Random Header. But since I had three images to show in my header, I needed a different solution. So I turned to the software I used on Flying M Air’s Web site to randomize some of the images there: Random File.

Random File enables you to display random files anywhere on a template. (If you use a plugin like Exec-PHP, you can even display them within posts.) What’s neat about it is that you can tell it how many random files — well, in my case, images — to display and it will display that quantity without repeating them.

After some fiddling around with the CSS used in header.php — remember, I’m no expert — I added the following code in place of the existing header image code:

 $files = array();

for ($i=1;$i<=3;$i++) {

$file = c2c_random_file('/wp-content/<em>foldername</em>/<em>foldername</em>/', 'jpg png gif', 'url', $files);

echo '<img src="http://www.mariasguides.com/wp-admin/%27%20.%20$file%20.%20%27" alt="Random image #' . $i . '" />';

$files[] = $file;

}

?&gt;

The result is what you see here.

The Hard Part Was Done

With the tough design decision done, I was ready to put the new theme into place. I did that on Saturday, taking most of the day to get it 90% functional. I’m pleased with the results.

Comments? Questions? Use the Comments link or form below.