WordCamp Phoenix 2013 – Image Manipulation in WordPress 3.5

Just finished my talk at WordCamp Phoenix 2013! It was great to be able to share WP_Image_Editor, and the cool things you can do with it, with all of you!

Thanks to the organizers for the opportunity to speak, and everyone who volunteered and attended.

Slides and sample code after the break!

Gradually updating with additional information as well. Let me know if you have any questions in the comments!


Download slides via PDF.

You can find the sample sepia editor on github, but I’ve included the code below as well.

Editor include code:

<?php
/*
Plugin Name: Imagick Sepia
Plugin URI: http://github.com/getsource/imagick-sepia
Description: Enables Sepia in Imagick for WordPress
Author: Mike Schroder
Version: 1.0
Author URI: https://www.getsource.net
*/

/**
 * Add Sepia Editor to beginning of editor search array.
 *
 * The new editor doesn't need to be at beginning if specifically requesting
 * an editor with sepia() method, but it's safer overall.
 */
function gs_add_imagick_sepia( $editors ) {
	if( ! class_exists( 'GS_Imagick_Sepia_Editor' ) )
		include( plugin_dir_path( __FILE__ ) . 'editors/imagick-sepia.php' );

	array_unshift( $editors, 'GS_Imagick_Sepia_Editor' );
	return $editors;
}
add_filter( 'wp_image_editors', 'gs_add_imagick_sepia' );

The Editor itself:

<?php
/**
 * WordPress Image Editor Class that adds Sepia to Imagick
 *
 * @since 1.0
 * @uses WP_Image_Editor Extends class
 */
class GS_Imagick_Sepia_Editor extends WP_Image_Editor_Imagick {

	/**
	 * Filters current in-memory image with Sepia
	 *
	 * @since 1.0
	 * @access public
	 *
	 * @param int $amount
	 * @return bool|WP_Error
	 */
	public function sepia( $amount = 80 ) {
		try {
			$this->image->sepiaToneImage( $amount );
			return true;
		}
		catch ( Exception $e ) {
			return new WP_Error( 'image_sepia_error', $e->getMessage() );
		}
	}
}

Sepia editor use:

// Request an Editor with the sepia() method.
$sepia_editor = wp_get_image_editor( "/path/to/cool-image.jpg",
                                     array( 'methods' => array( 'sepia' ) ) );

// Double-check that we have an editor, and the file is open.
if ( ! is_wp_error( $sepia_editor ) ) {
      
    // Filter with sepia using our new method.
    $sepia_editor->sepia();
        
    // Send the image to the browser without saving.
    $sepia_editor->stream();
}

4 thoughts on “WordCamp Phoenix 2013 – Image Manipulation in WordPress 3.5”

    1. sorry for the noise, figured it out. My log was being output at multiple points during execution, making it appear like it was firing multiple times. I put some timestamps on the wp_image_editor calls and voila! the timestamps matched, so it was working just fine.

  1. Hi Mike.

    Is it possible to pass multiple files through wp_get_image_editor?

    Let’s say that i want to merge 2 pictures together with Imagick, and I have to use Imagick::compositeImage to do this. And it would look something like this:
    $file1->compositeImage($file2, Imagick::COMPOSITE_DEFAULT, 0, 0);

    How should I pass “$file1” and “$file2” through wp_get_image_editor to get this to work?

    1. WP_Image_Editor is built to handle one file at a time, and there isn’t anything built in to combine two images by default.

      The main reason here is that the files in-memory aren’t compatible with one-another if different editors (say, GD and Imagick) are used for each.

      There are a few different ways to handle it, of course, but one way to solve the problem here would be to load one of the two images, then extend the Imagick editor (or both editors, if you prefer more compatibilty) to support combining images. Say, with a $image->combine( ‘filename’ ) method.

      First, you’d load one of the images with wp_get_image_editor() (and specify that ‘combine’ is a required method), then call your combine method while specifying the second image.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.