Perfect Your Images Using WordPress

Previous to 3.5, image manipulation in WordPress was an alchemy of mixing GD functions and WordPress functions together to turn out the desired result. GD is now 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.

Presented at WordCamp Europe 2013 by Mike Schroder and Marko Heijnen

Transcript

1. WordCamp Europe 2013 The Netherlands P rf Y r I U W r Pr Mike Schroder & Marko Heijnen
2. WordCamp Europe 2013 The Netherlands M M r DH-Shredder @GetSource Recent rockstar 3.5 WP-CLI contributor WordPress Core rep Happy DreamHost Employee @MarkoHeijnen Recent rockstar 3.4 GlotPress lead developer Founder of CodeKitchen
3. WordCamp Europe 2013 The Netherlands W w wrong?
4. WordCamp Europe 2013 The Netherlands GD w directly
5. WordCamp Europe 2013 The Netherlands I abstracted
6. WordCamp Europe 2013 The Netherlands WP_I _E r • Centralized way to read an image file • manipulate it • save IT • STREAM IT
7. WordCamp Europe 2013 The Netherlands H w w MADE?
8. WordCamp Europe 2013 The Netherlands I r COOPERATION.
9. WordCamp Europe 2013 The Netherlands G v w r f core
10. WordCamp Europe 2013 The Netherlands GD Imagick S r
11. WordCamp Europe 2013 The Netherlands Imagick color profiles
12. WordCamp Europe 2013 The Netherlands Difference GD Imagick
13. WordCamp Europe 2013 The Netherlands W ’ catch?
14. WordCamp Europe 2013 The Netherlands N r direct
15. WordCamp Europe 2013 The Netherlands D r r • 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
16. WordCamp Europe 2013 The Netherlands W ’ ? Centralized way to read an image attachment from the database and manage its sizes and properties
17. WordCamp Europe 2013 The Netherlands M b WP_I ... https://github.com/markoheijnen/WP_Image
18. WordCamp Europe 2013 The Netherlands T No current alternative to load_image_to_edit(), so: wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
19. WordCamp Europe 2013 The Netherlands O , w can w w ?
20. WordCamp Europe 2013 The Netherlands • resize( $max_w, $max_h, $crop ); • multi_resize( { ['size'] => {'width', 'height',['crop']}, ... } ); • 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 );
21. WordCamp Europe 2013 The Netherlands
22. WordCamp Europe 2013 The Netherlands A r // Get instance of WP_Image_Editor selected by WordPress $editor = wp_get_image_editor( '/path/to/image.png' ); // Returns WP_Error on failure, so check. if ( ! is_wp_error( $editor ) ) { // Resize the image with a center crop $editor->resize( 300, 300, true ); // Uses extension for type, unless optional mime parameter is used. $editor->save( 'new_image.gif' ); }
23. WordCamp Europe 2013 The Netherlands A r ©Massimo Catarinella (CC-SA)
24. WordCamp Europe 2013 The Netherlands A r
25. WordCamp Europe 2013 The Netherlands Extend r r w - engines r functions.
26. WordCamp Europe 2013 The Netherlands Tiff: I r ?
27. WordCamp Europe 2013 The Netherlands Y v Imagick f r v r ’ f v r r:
28. WordCamp Europe 2013 The Netherlands Sepia!
29. WordCamp Europe 2013 The Netherlands
30. WordCamp Europe 2013 The Netherlands
31. WordCamp Europe 2013 The Netherlands f r ! A q ? @getSource & @markoHeijnen
32. WordCamp Europe 2013 The Netherlands • 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/ • Improved GD Editor: http://wordpress.org/plugins/improved-gd-image-editor/ E r
33. WordCamp Europe 2013 The Netherlands • 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 M r R r !
34. WordCamp Europe 2013 The Netherlands • https://github.com/getsource/imagick-sepia/ • https://github.com/humanmade/WPThumb/ • https://github.com/markoheijnen/gmagick-editor • https://github.com/markoheijnen/Improved-image-editor • https://github.com/interconnectit/my-eyes-are-up-here M r R r !