In pursuit of rotated polaroids

I’ve been working on a site for some family members and selected the WP theme Travelogue (Update 7/16/2011: The version this used to link to is gone along with the ancient version of WordPress this post was written using. Travelogue 2 is available but the instructions here do not directly apply to that.) 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 named 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 which consumes images in source/ and produces images in output/.

It consumes images like this from ./source:

image

and generates images like this in ./output:

image

Update 7/2011: I’ve put this on github in a project called codebag along with random other scripts like this. It is still perhaps useful as an example of some PIL image manipulation.

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.