WP_Image_Editor, or How I Learned to Stop TimThumbing and Love the Core

Learn about some of the new features for editing images and creating image manipulation engines within WordPress 3.5+

Lightning Talk presented at WordCamp Vancouver 2013 by Mike Schroder

Transcript

1. WP_Image_Editor or How I Learned to Stop TimThumbing and Love the Core. WordCamp Vancouver 2013 Mike Schroder (DH-Shredder) @GetSource - http://www.getsource.net
2. Who Am I? • Mike Schroder, a.k.a DH-Shredder, a.k.a. @GetSource • Third Culture Kid, enjoy Coffee & Sailing • WordPress 3.5 Recent Rockstar and WP-CLI Contributor • Co-Author of WP_Image_Editor • Happy DreamHost Employee
3. Previous to 3.5, GD was used directly.
4. This meant a mess of functions for Developers.
5. Image Manipulation abstracted.
6. WP_Image_Editor Centralized way to read an image file directly, manipulate it, and output
7. 3.5 comes with Editors for GD and Imagick support
8. With Imagick, this means support for Color Profiles
9. GD Imagick
10. GD Imagick GD
11. GD Imagick Imagick
12. GD Imagick GD
13. GD Imagick Imagick
14. What’s the catch? Deprecated filters due to GD abstraction
15. What’s it missing? Centralized way to read an image attachment from the database and manage its sizes and properties
16. That’s WP_Image. ...Hopefully
17. Okay. So, what can I do with it?
18. Resize, Batch Resize, Crop, Flip, Rotate, and Stream. wp-includes/class-wp-image-editor.php
20. // Get instance of WP_Image_Editor selected by WordPress $image = wp_get_image_editor( '/path/to/cool_image.jpg' ); // Returns WP_Error on failure, so check. if ( ! is_wp_error( $image ) ) { // Rotate in 90 degree increments, for now. $image->rotate( 90 ); // Thumbnail, and crop. $image->resize( 300, 300, true ); // Uses extension for type, unless optional mime parameter is used. $image->save( 'new_image.gif' ); ! // Types only limited by Editor and what WordPress allows for uploads. if ( $image->supports_mime_type( 'application/pdf' ) ) $image->stream( 'application/pdf' ); } Time for an Example!
21. To load an attachment... No current alternative to load_image_to_edit(), so: wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
22. Extend to create your own image-manip engines or functions.
23. You can extend Imagick for everyone’s favorite filter:
24. Sepia!
25. Sepia makes the world go brown.
27. Editor Engine Examples • GD: wp-includes/class-wp-image-editor-gd.php • Imagick: wp-includes/class-wp-image-editor-imagick.php • Gmagick: http://wordpress.org/extend/plugins/gmagick/
29. More Resources! • http://make.wordpress.org/core/2012/12/06/wp_image_editor-is-incoming/ • http://markoheijnen.com/wordpress-new-image-manipulation/ • http://xref.wordpress.org/trunk/WordPress/Image_Editor/ WP_Image_Editor.html • https://github.com/getsource/imagick-sepia/ • https://github.com/humanmade/WPThumb/ Mike Schroder (DH-Shredder) @GetSource - http://www.getsource.net