The document summarizes Marko Heijnen's talk at WordCamp Toronto on improving image manipulation in WordPress. It discusses the current chaotic state of image handling code, the process of developing a new image API, and examples of how the new API can be used. Key points are that the new API provides a standardized interface for image editing, supports Imagick and GD libraries, and allows developers to write custom image editors by implementing certain required methods. Future work includes adding the new API to the WordPress core and expanding functionality for image generation and processing.

1. Improved image WordCamp Toronto - Developers
manipulation in WordPress November 4, 2012

2. Marko Heijnen
• WordPress and mobile
developer
• Working with WordPress for
more then six years
• WordPress contributor of 3.0,
3.3, 3.4 and 3.5
• Recent rockstar of 3.4
• Founder of WP Rockstars

3. Dealing with problems
• I like dealing with problems
• My first try of contributing was
on the rewrite API
• For 3.4 I worked on the
XML-RPC with Max Cutler &
Westwood
• And now dealing with all the
image manipulation API’s

4. What am I going to talk about
• How the current code looks like
• In short how the process went
• How the new API code looks like with the help of example
code
• The future steps that still need to be done

5. How it currently looks like
Totally chaos of calls to GD functions and no way to really use it as a developer

6. All kinds of functions that can be used
• wp_load_image • wp_save_image
• wp_stream_image • wp_crop_image
• wp_save_image_file • image_resize
• image_edit_apply_changes • image_make_intermediate_size
• stream_preview_image

8. It all started at the Working with mainly
hackday in San Francisco Mike Schroder and Japh Thomson

9. The progress
• Start at hackday San Francisco on August 5
• All the coding happened on Github
• In the end we got great help from Kurt Payne with
creating unit tests
• And obviously getting some great feedback from the
WordPress community
• Code got committed on October 1

10. So what can this new API do

11. Default functionality
• ->resize( $max_w, $max_h, $crop );
• ->multi_resize( $sizes ); // Key is the name
• ->crop( $src_x, $src_y, $src_w, $src_h, $dst_w, $dst_h, $src_abs );
• ->rotate( $angle );
• ->flip( $horz, $vert );
• ->save( $destfilename, $mime_type );
• ->stream( $mime_type );

12. What are the default benefits
• As developer the same usage as WordPress
• Filename and Mime type control
• You can change the default mime type ( default is still jpeg )
• Better set quality support
• No more calling to GD functionality
• Imagick ( ImageMagick ) support

13. Examples
Let’s play with some of the code WordPress now has

14. Example 1
Same usage as you where using add_image_size but now you can create full
control for which image you want to create one

15. The code
$file = '/path/to/image.png';
$editor = WP_Image_Editor::get_instance( $file );
$editor->resize( 300, 300, true );
$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png
$new_image_info = $editor->save( '/path/to/image.jpg' );
$new_image_info = $editor->save( null, 'image/jpeg' ); // Save the file as /path/to/image -300x300.jpg

16. Info wat save() returns
array(5) {
["path"]=> string(65) "/path/to/image-300x300.png"
["file"]=> string(20) "toronto-300x300.png"
["width"]=> int(300)
["height"]=> int(300)
["mime-type"]=> string(10) "image/png"
}

17. Example 2
Create a crop where you want it

18. The code
$file = '/path/to/image.png';
$editor = WP_Image_Editor::get_instance( $file );
$editor->crop( 0, 0, 300, 300, 300, 300, false );
$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png

19. Example 3
Multiple calls so lets have some play time

20. The code
$file = '/path/to/image.png';
$editor = WP_Image_Editor::get_instance( $file );
$editor->flip( false, true );
$editor->rotate( 30 );
$editor->crop( (1589-(960*0.7))/2, (1472-(1280*0.7))/2, 960*0.7, 1280*0.7, 300, 300, false );
$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png

21. How does it work
How does it find the right editor to use

22. WP_Image_Editor::get_instance
public final static function get_instance( $path = null ) {
$implementation = self::choose_implementation();
if ( $implementation ) {
$editor = new $implementation( $path );
$loaded = $editor->load();
if ( is_wp_error ( $loaded ) )
return $loaded;
return $editor;
}
return new WP_Error( 'no_editor', __('No editor could be selected') );
}

23. WP_Image_Editor::choose_implementation();
private final static function choose_implementation() {
if ( null === self::$implementation ) {
$request_order = array( 'WP_Image_Editor_Imagick', 'WP_Image_Editor_GD' );
foreach ( $request_order as $editor ) {
if ( ! call_user_func( array( $editor, 'test' ) ) )
continue;
self::$implementation = $editor;
break;
}
}
return self::$implementation;
}

24. Why using the word “default”

25. Because you can write your own implementation

26. How to do this
• WP_Image_Editor::choose_implementation() has an filter
called ‘wp_image_editors’
• With this you can add your own implementation class name to it
• When you want to use an implementation only for an certain image you can
use the filter ‘wp_image_editor_class’

27. How to add your own class
add_filter( ‘wp_image_editors’, ‘my_image_editors’ );
function my_image_editors( $implementations ) {
array_unshift( $implementations, ‘My_Image_Editor_Phpthumb’ );
return $implementations;
}
class My_Image_Editor_Phpthumb() {
//With all the needed functions
}

28. What your class need to have
• ->test()
• ->load()
• ->supports_mime_type( $mime_type );
• ->resize( $max_w, $max_h, $crop );
• ->multi_resize( $sizes ); // Key is the name
• ->crop( $src_x, $src_y, $src_w, $src_h, $dst_w, $dst_h, $src_abs );
• ->rotate( $angle );
• ->flip( $horz, $vert );
• ->save( $destfilename, $mime_type );
• ->stream( $mime_type );

29. Going into the code
Anyone has a question before we do?

30. Whats needs to be done for 3.5
• Adding the changes I showed into core
• Add more unit tests
• Testing if there is difference between GD and Imagick by
creating a plugin what generates images on one page
• And test till 3.5 got released over and over again

31. Whats needs to be done for 3.6 and later
• Creating a WP_Image class and make it easier to add a
new image to the size array of an attachment
• Ability to have default color filters inside WordPress
• Finding a way to allow generation on the fly

32. Questions?
@markoheijnen - info@markoheijnen.com