WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x...
Transcript of WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x...
![Page 1: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/1.jpg)
Image Manipulation in WordPress 3.5
WordCamp Phoenix 2013
Mike Schroder (DH-Shredder)@GetSource - http://www.getsource.net
![Page 2: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/2.jpg)
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
![Page 3: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/3.jpg)
What was wrong?
![Page 4: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/4.jpg)
GD was used directly.
![Page 5: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/5.jpg)
This meant a mess of functions for Developers.
![Page 6: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/6.jpg)
What changed?
![Page 7: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/7.jpg)
GD was abstracted.
![Page 8: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/8.jpg)
WP_Image_Editor is born.
![Page 9: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/9.jpg)
What’s WP_Image_Editor?
Centralized way to read an image file directly, manipulate it, and output
![Page 10: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/10.jpg)
Community Built.
Primarily Marko Heijnen and I, with awesome help from Japh Thomson, Kurt Payne,
Andrew Nacin and Cristi Burcă
![Page 11: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/11.jpg)
3.5 comes with Editors for GD and Imagick support
![Page 12: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/12.jpg)
Imagick 2.2.0+ compiled with Imagemagick 6.2.9+
for full support
![Page 13: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/13.jpg)
With Imagick, this means support for Color Profiles
![Page 14: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/14.jpg)
GD Imagick
![Page 15: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/15.jpg)
GD ImagickGD
![Page 16: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/16.jpg)
GD ImagickImagick
![Page 17: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/17.jpg)
GD ImagickGD
![Page 18: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/18.jpg)
GD ImagickImagick
![Page 19: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/19.jpg)
What’s the catch?
Deprecated filters from GD abstraction
![Page 20: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/20.jpg)
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
![Page 21: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/21.jpg)
What’s it missing?
Centralized way to read an image attachment from the database and
manage its sizes and properties
![Page 22: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/22.jpg)
That’s WP_Image....Hopefully
![Page 23: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/23.jpg)
Okay.
So, what can I do with it?
![Page 24: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/24.jpg)
Resize, Batch Resize, Crop, Flip, Rotate, and Stream.
wp-includes/class-wp-image-editor.php
![Page 25: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/25.jpg)
![Page 26: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/26.jpg)
/** * 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() ) { ... }
Check for Support.
![Page 27: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/27.jpg)
/** * 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() ) { ... }
Instantiate an Editor.
![Page 28: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/28.jpg)
! /**! * 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 );
Resize.
![Page 29: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/29.jpg)
! /**! * 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 );
Batch Resize.
![Page 30: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/30.jpg)
! /**! * 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 );
Crop.
![Page 31: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/31.jpg)
! /**! * 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 );
Rotate.
![Page 32: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/32.jpg)
! /**! * 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 );
Flip!
![Page 33: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/33.jpg)
! /**! * 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 );
Stream.
![Page 34: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/34.jpg)
! /**! * 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 );
Save or Convert.
![Page 35: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/35.jpg)
// 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!
![Page 36: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/36.jpg)
To load an attachment...
No current alternative to load_image_to_edit(), so:
wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
![Page 37: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/37.jpg)
Extend to create your ownimage-manip engines or functions.
![Page 38: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/38.jpg)
Let’s extend Imagick for everyone’s favorite filter:
![Page 39: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/39.jpg)
Sepia!
![Page 40: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/40.jpg)
Sepia makes the world go brown.
![Page 41: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/41.jpg)
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() ); } }}
Extend from WP_Image_Editor.
![Page 42: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/42.jpg)
/** * 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' );
Enqueue your Editor.
![Page 43: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/43.jpg)
// 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(); }
Require and run the new method.
![Page 44: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/44.jpg)
And, that’s it!
![Page 45: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/45.jpg)
![Page 46: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/46.jpg)
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/
![Page 47: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/47.jpg)
![Page 48: WCPHX - Image Manipulation in WordPress 3 - · PDF file! * @param int $src_x The start x position to crop from.! * @param int $src_y The start y position to crop from.! * @param int](https://reader033.fdocuments.net/reader033/viewer/2022042801/5a78e2f67f8b9a21538ece60/html5/thumbnails/48.jpg)
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