Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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


Mike Schroder

August 17, 2013

More Decks by Mike Schroder

Other Decks in Programming


  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

  19. None
  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.

  26. None
  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/
  28. None
  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