Quick sepia images in WordPress

September 30, 2011 in Data,Internet

The other day, I was unexpectedly asked, "What's the easiest way to make a sepia-toned image in WordPress?"

The questioner has a blog with an "antique" theme, and wanted to use the sepia images inline. However, the blog is quite image-heavy and she (understandably) didn't want to dive into Photoshop for every single post. She wanted a "plugin" approach: just tell WordPress to make the image sepia-toned, and let the software work its magic.

Unfortunately, that plugin doesn't exist... so I hacked one up. I'm posting the code here for future reference and in case anyone finds this useful.

Objective:

A drop-dead simple way to create sepia-toned images for a WordPress blog, performing three actions:

  1. Resize the source image to a standard size
  2. Apply the sepia tone
  3. Add a CSS class
  4. Remove any "width" and "height" settings from the original HTML

Solution:

I started with the TimThumb PHP script. TimThumb was originally conceived as an idiot-proof image resizer for WordPress (to automatically generate post thumbnails). It does so by dynamically generating a new image from a source image based on provided dimensions. More recently -- and more interestingly, for my purposes -- a hook was added for PHP's imagefilter function. Imagefilter can apply a variety of simple effects to an image, including grayscale, colorize, blur, etc.

With TimThumb in hand, I needed an easy way to apply it. For this, I created a WordPress shortcode. Shortcodes allow bloggers to execute PHP functions (with arguments!) without ever leaving the text editor or seeing a word of code. To make the execution as smooth as possible, I wanted to pass a standard WordPress-inserted image to TimThumb, but this meant I would have to do some parsing, because WordPress wraps the image with all the required HTML and TimThumb accepts just the source URL.

The following function takes in the HTML code that WordPress automatically generates for an image, replaces the source image with one dynamically-generated by TimThumb, and parses the HTML to add a new class (sepia) and remove width and height parameters. The sepia-toning is accomplished by combining imagefilter's contrast, grayscale, and colorize functions.

function sepia($attr, $content = null) {
    preg_match('/< *img[^>]*src *= *["\']?([^"\']*)/i', $content, $matches);
    $old_src = $matches[1];
    $new_src =  home_url("/wp-content/timthumb/timthumb.php?src=").$old_src."&w=375&h=275&q=100&f=2|4,-10|5,50,20,0";
    $content = str_replace($old_src, $new_src, $content);

    preg_match('/class[ \t]*=[ \t]*"[^"]+"/', $content, $matches);
    $old_class = substr($matches[0], 0, -1);
    $new_class = $old_class . " sepia\"";
    $content = str_replace($old_class, $new_class, $content);

    preg_match('/width[ \t]*=[ \t]*"[^"]+"/', $content, $matches);
    $old_width = $matches[0];
    $new_width = "";
    $content = str_replace($old_width, $new_width, $content);

    preg_match('/height[ \t]*=[ \t]*"[^"]+"/', $content, $matches);
    $old_height = $matches[0];
    $new_height = "";
    $content = str_replace($old_height, $new_height, $content);

    return $content;
}
add_shortcode('sepia', 'sepia');

And the following line creates the WordPress shortcode:

add_shortcode('sepia', 'sepia');

By adding these two bits of code to the blog's functions.php file, a blogger can create a perfect sepia-toned image simply by placing a normal WordPress image in between two tags, like this:

[sepia] (the image goes here) [/sepia].

And voila: a foolproof way to create sepia-toned images without ever leaving the post editor! Moreover, the applied "sepia" class allows these images to be easily styled with CSS.

Here's an example, from the beach in Tel Aviv. Original:

And with the sepia shortcode (note that I'm not running the code on TGR, so this is just a screenshot!):

Leave a Comment

Previous post:

Next post: