Image Manipulation in   WordPress 3.5         WordCamp Phoenix 2013   Mike Schroder (DH-Shredder)   @GetSource - http://ww...
Who Am I?•   Mike Schroder, a.k.a DH-Shredder, a.k.a. @GetSource•   Third Culture Kid, enjoy Coffee & Sailing•   WordPress...
What was wrong?
GD was used directly.
This meant a mess offunctions for Developers.
What changed?
GD was abstracted.
WP_Image_Editor is born.
What’s WP_Image_Editor?Centralized way to read an image file directly, manipulate it, and output
Community Built.Primarily Marko Heijnen and I, with awesome    help from Japh Thomson, Kurt Payne,       Andrew Nacin and ...
3.5 comes with Editors forGD and Imagick support
Imagick 2.2.0+ compiled with   Imagemagick 6.2.9+      for full support
With Imagick, this meanssupport for Color Profiles
GD   Imagick
GD   Imagick
ImagickGD        Imagick
GD   Imagick
ImagickGD        Imagick
What’s the catch?Deprecated filters from GD       abstraction
Deprecated Filters•   image_save_pre is now image_editor_save_pre•   wp_save_image_file is now wp_save_image_editor_file• ...
What’s it missing? Centralized way to read an imageattachment from the database and  manage its sizes and properties
That’s WP_Image.   ...Hopefully
Okay.So, what can I do with it?
Resize, Batch Resize, Crop, Flip, Rotate, and Stream.     wp-includes/class-wp-image-editor.php
Check for Support./**  * Tests whether there is an editor that supports a given mime type or methods.  *  * @since 3.5.0  ...
Instantiate an Editor./**  * Returns a WP_Image_Editor instance and loads file into it.  *  * @since 3.5.0  * @access publ...
Resize.! /**! * Resizes current image.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param int $max_w! * @param...
Batch Resize.! /**! * Processes current image and saves to disk! * multiple sizes from single source.! *! * @since 3.5.0! ...
Crop.! /**! * Crops Image.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param string|int $src The source file ...
Rotate.! /**! * Rotates current image counter-clockwise by $angle.! *! * @since 3.5.0! * @access public! * @abstract! *! *...
Flip!! /**! * Flips current image.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param boolean $horz Horizontal...
Stream.! /**! * Streams current image to browser.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param string $m...
Save or Convert.! /**! * Saves current image to file.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param strin...
Time for an Example!    // Get instance of WP_Image_Editor selected by WordPress    $image = wp_get_image_editor( /path/to...
To load an attachment...      No current alternative to load_image_to_edit(), so:wp_get_image_editor( _load_image_to_edit_...
Extend to create your ownimage-manip engines or functions.
Let’s extend Imagick foreveryone’s favorite filter:
Sepia!
Sepia makes the world go        brown.
Extend from WP_Image_Editor.class GS_Imagick_Sepia_Editor extends WP_Image_Editor_Imagick {    /**      * Filters current ...
Enqueue your Editor./** * Add Sepia Editor to beginning of editor search array. * * The new editor doesnt need to be at be...
Require and run the new method.// Request an Editor with the sepia() method.$sepia_editor = wp_get_image_editor( "/path/to...
And, that’s it!
Image Editor Examples•   GD: wp-includes/class-wp-image-editor-gd.php•   Imagick: wp-includes/class-wp-image-editor-imagic...
More Resources!  •   http://make.wordpress.org/core/2012/12/06/wp_image_editor-is-incoming/  •   http://markoheijnen.com/w...
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013
Upcoming SlideShare
Loading in...5
×

Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013

3,423

Published on

Image Manipulation in WordPress 3.5 talk from WordCamp Phoenix 2013

Image manipulation in WordPress was an alchemy of mixing GD functions and WordPress functions together to (hopefully) turn out the desired result. Now, as of WordPress 3.5, GD is abstracted out, and a new class, WP_Image_Editor, allows easy manipulation of image files. This lets you perform simple resizing, crops, flips, rotates, and real-time streaming of those results using Imagick or GD. But, that’s not all! You can also easily extend WordPress’ classes to add your own functions, or replace the entire engine with your own.

This session will walk through what’s changed for image manipulation in WordPress 3.5, and explain ways you can take advantage of the new APIs, both through using them directly and extending them for plugins of your own.

Presented by Mike Schroder (@GetSource/DH-Shredder)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,423
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Image Manipulation in WordPress 3.5 - WordCamp Phoenix 2013

  1. 1. Image Manipulation in WordPress 3.5 WordCamp Phoenix 2013 Mike Schroder (DH-Shredder) @GetSource - http://www.getsource.net
  2. 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. 3. What was wrong?
  4. 4. GD was used directly.
  5. 5. This meant a mess offunctions for Developers.
  6. 6. What changed?
  7. 7. GD was abstracted.
  8. 8. WP_Image_Editor is born.
  9. 9. What’s WP_Image_Editor?Centralized way to read an image file directly, manipulate it, and output
  10. 10. Community Built.Primarily Marko Heijnen and I, with awesome help from Japh Thomson, Kurt Payne, Andrew Nacin and Cristi Burcă
  11. 11. 3.5 comes with Editors forGD and Imagick support
  12. 12. Imagick 2.2.0+ compiled with Imagemagick 6.2.9+ for full support
  13. 13. With Imagick, this meanssupport for Color Profiles
  14. 14. GD Imagick
  15. 15. GD Imagick
  16. 16. ImagickGD Imagick
  17. 17. GD Imagick
  18. 18. ImagickGD Imagick
  19. 19. What’s the catch?Deprecated filters from GD abstraction
  20. 20. Deprecated Filters• image_save_pre is now image_editor_save_pre• wp_save_image_file is now wp_save_image_editor_file• image_edit_before_change is now wp_image_editor_before_change
  21. 21. What’s it missing? Centralized way to read an imageattachment from the database and manage its sizes and properties
  22. 22. That’s WP_Image. ...Hopefully
  23. 23. Okay.So, what can I do with it?
  24. 24. Resize, Batch Resize, Crop, Flip, Rotate, and Stream. wp-includes/class-wp-image-editor.php
  25. 25. Check for Support./** * Tests whether there is an editor that supports a given mime type or methods. * * @since 3.5.0 * @access public * * @param string|array $args Array of requirements. * Accepts { mime_type=>string, methods=>{string, string, ...} } * @return boolean true if an eligible editor is found; false otherwise */function wp_image_editor_supports( $args = array() ) { ...}
  26. 26. Instantiate an Editor./** * Returns a WP_Image_Editor instance and loads file into it. * * @since 3.5.0 * @access public * * @param string $path Path to file to load * @param array $args Additional data. * Accepts { mime_type=>string, methods=>{string, string, ...} } * @return WP_Image_Editor|WP_Error */function wp_get_image_editor( $path, $args = array() ) { ...}
  27. 27. Resize.! /**! * Resizes current image.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param int $max_w! * @param int $max_h! * @param boolean $crop! * @return boolean|WP_Error! */! abstract public function resize( $max_w, $max_h, $crop = false );
  28. 28. Batch Resize.! /**! * Processes current image and saves to disk! * multiple sizes from single source.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param array $sizes { {width=>int, height=>int, crop=>bool}, ... }! * @return array! */! abstract public function multi_resize( $sizes );
  29. 29. Crop.! /**! * Crops Image.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param string|int $src The source file or Attachment ID.! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int $src_w The width to crop.! * @param int $src_h The height to crop.! * @param int $dst_w Optional. The destination width.! * @param int $dst_h Optional. The destination height.! * @param boolean $src_abs Optional. If the source crop points are absolute.! * @return boolean|WP_Error! */! abstract public function crop( $src_x, $src_y, $src_w, $src_h, $dst_w = null,! ! ! ! ! ! ! ! ! ! $dst_h = null, $src_abs = false );
  30. 30. Rotate.! /**! * Rotates current image counter-clockwise by $angle.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param float $angle! * @return boolean|WP_Error! */! abstract public function rotate( $angle );
  31. 31. Flip!! /**! * Flips current image.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param boolean $horz Horizontal Flip! * @param boolean $vert Vertical Flip! * @return boolean|WP_Error! */! abstract public function flip( $horz, $vert );
  32. 32. Stream.! /**! * Streams current image to browser.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param string $mime_type! * @return boolean|WP_Error! */! abstract public function stream( $mime_type = null );
  33. 33. Save or Convert.! /**! * Saves current image to file.! *! * @since 3.5.0! * @access public! * @abstract! *! * @param string $destfilename! * @param string $mime_type! * @return array|WP_Error {path=>string, file=>string, width=>int! * height=>int, mime-type=>string}! */! abstract public function save( $destfilename = null, $mime_type = null );
  34. 34. Time for an Example! // 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 ); }
  35. 35. To load an attachment... No current alternative to load_image_to_edit(), so:wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
  36. 36. Extend to create your ownimage-manip engines or functions.
  37. 37. Let’s extend Imagick foreveryone’s favorite filter:
  38. 38. Sepia!
  39. 39. Sepia makes the world go brown.
  40. 40. Extend from WP_Image_Editor.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() ); } }}
  41. 41. Enqueue your Editor./** * Add Sepia Editor to beginning of editor search array. * * The new editor doesnt need to be at beginning if specifically requesting * an editor with sepia() method, but its 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 );
  42. 42. Require and run the new method.// 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();}
  43. 43. And, that’s it!
  44. 44. Image Editor 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/
  45. 45. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×