notes from Ken

I’ve been working on a site for some family members and selected the WP theme Travelogue for the WordPress install. I made a few modifications to the theme for my own use, including replacing the photo used in the upper left corner Polaroid. Replacing the Polaroid photo is relatively easy but involved several manual steps.

Later, I wanted to add more Polaroid photos and have the theme rotate among them . Uh oh, that meantrepeating all four or five steps required to create new Polaroid images for every picture I want to use. Manually. That was no good, especially since I eventually wanted to tie the randomly selected Polaroids to a photo album and have any images uploaded to that album be candidates for Polaroidization.

Clearly, it would be a small matter of programming to automate turning an appropriate sized JPEG into a Polaroid-framed shot for the header…

My first thought was to have the script paint a rotated photo over the frame and then draw the caption.

When I discovered the Polaroid image space in the template was not a rotated rectangle (it’s distorted a little) I had to change my plan a little — rotate the photo, copy it to the right place, merge the polaroid-looking frame over it and have the photo show through the Polaroid frame by making that area transparent.

I made a version of the Polaroid header image with a transparent hole in the photo area and no caption (travelogue-polaroid1.png).

My first idea was to learn enough about PHP’s GD functions to be able to do it on the fly within PHP. I was unable to get PHP’s GD functions to handle the alpha layer of my PNGs using the version on Dreamhost so I switched to Python and the Python Image Library (PIL).

Some hacking time later, I had merge.py . This script reads 205×195 JPEG images from ./source (such as this one), captions about them from ./source/info.txt (for example, info.txt) and generates images like this in ./output:

Now I had a directory full of suitable Polaroid header images and just needed to have my WordPress theme select among them randomly. The Travelogue theme comes with some support for randomized images but it is designed with adding .polaroidn styles to style.css for every image and then modifying the header.php to pick a polaroidn style randomly.

I uploaded all the polaroid images to wp-content/themes/travelogue/images/polaroids.

I wanted to be able to just dump new polaroids in a directory to add them to the rotation. I also wanted a predictable order to the images. So I copied styles.css to a .php file and modified it:

Added this to the top:

<? header("Content-type: text/css"); >?>

Changed the .polaroid1 declaration to be:

<?
  $fileList = array();
	$fileList = array();
	$handle = opendir('images/polaroids');
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if ('jpg' == strtolower( $file_info['extension'])) {
			$fileList[] = ‘images/polaroids/’ . $file;
		}
	}
	closedir($handle);
?>

.polaroid1 {
	background: url(< ? echo $fileList[time() % count($fileList)] ?>) no-repeat;
}

Now it’d choose an image from the JPEGs in images/polaroids based on the time in seconds. I just needed to make it replace style.css. I could have changed the template to load it from the .php, but instead added an entry to the .htaccess for the site:

RewriteRule ^wp-content/themes/travelogue/style.css wp-content/themes/travelogue/style.php

And thus I had rotated polaroid header images chosen automatically from a directory full of JPEGs.

This entry was posted on Saturday, May 14th, 2005 at 11:57 am and is filed under Programming, Python. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.