Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Image manipulation in WordPress 3.5


Published on

This presentation was given at WordCamp Toronto - Developers

Published in: Technology

Image manipulation in WordPress 3.5

  1. 1. Improved image WordCamp Toronto - Developersmanipulation in WordPress November 4, 2012
  2. 2. Marko Heijnen• WordPress and mobile developer• Working with WordPress for more then six years• WordPress contributor of 3.0, 3.3, 3.4 and 3.5• Recent rockstar of 3.4• Founder of WP Rockstars
  3. 3. Dealing with problems• I like dealing with problems• My first try of contributing was on the rewrite API• For 3.4 I worked on the XML-RPC with Max Cutler & Westwood• And now dealing with all the image manipulation API’s
  4. 4. What am I going to talk about• How the current code looks like• In short how the process went• How the new API code looks like with the help of example code• The future steps that still need to be done
  5. 5. How it currently looks likeTotally chaos of calls to GD functions and no way to really use it as a developer
  6. 6. All kinds of functions that can be used• wp_load_image • wp_save_image• wp_stream_image • wp_crop_image• wp_save_image_file • image_resize• image_edit_apply_changes • image_make_intermediate_size• stream_preview_image
  7. 7. It all started at the Working with mainlyhackday in San Francisco Mike Schroder and Japh Thomson
  8. 8. The progress• Start at hackday San Francisco on August 5• All the coding happened on Github• In the end we got great help from Kurt Payne with creating unit tests• And obviously getting some great feedback from the WordPress community• Code got committed on October 1
  9. 9. So what can this new API do
  10. 10. Default functionality• ->resize( $max_w, $max_h, $crop );• ->multi_resize( $sizes ); // Key is the name• ->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 );
  11. 11. What are the default benefits• As developer the same usage as WordPress• Filename and Mime type control• You can change the default mime type ( default is still jpeg )• Better set quality support• No more calling to GD functionality• Imagick ( ImageMagick ) support
  12. 12. ExamplesLet’s play with some of the code WordPress now has
  13. 13. Example 1Same usage as you where using add_image_size but now you can create full control for which image you want to create one
  14. 14. The code$file = /path/to/image.png;$editor = WP_Image_Editor::get_instance( $file );$editor->resize( 300, 300, true );$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png$new_image_info = $editor->save( /path/to/image.jpg );$new_image_info = $editor->save( null, image/jpeg ); // Save the file as /path/to/image -300x300.jpg
  15. 15. Info wat save() returns array(5) { ["path"]=> string(65) "/path/to/image-300x300.png" ["file"]=> string(20) "toronto-300x300.png" ["width"]=> int(300) ["height"]=> int(300) ["mime-type"]=> string(10) "image/png" }
  16. 16. Example 2Create a crop where you want it
  17. 17. The code$file = /path/to/image.png;$editor = WP_Image_Editor::get_instance( $file );$editor->crop( 0, 0, 300, 300, 300, 300, false );$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png
  18. 18. Example 3Multiple calls so lets have some play time
  19. 19. The code$file = /path/to/image.png;$editor = WP_Image_Editor::get_instance( $file );$editor->flip( false, true );$editor->rotate( 30 );$editor->crop( (1589-(960*0.7))/2, (1472-(1280*0.7))/2, 960*0.7, 1280*0.7, 300, 300, false );$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png
  20. 20. How does it workHow does it find the right editor to use
  21. 21. WP_Image_Editor::get_instance public final static function get_instance( $path = null ) { $implementation = self::choose_implementation(); if ( $implementation ) { $editor = new $implementation( $path ); $loaded = $editor->load(); if ( is_wp_error ( $loaded ) ) return $loaded; return $editor; } return new WP_Error( no_editor, __(No editor could be selected) ); }
  22. 22. WP_Image_Editor::choose_implementation(); private final static function choose_implementation() { if ( null === self::$implementation ) { $request_order = array( WP_Image_Editor_Imagick, WP_Image_Editor_GD ); foreach ( $request_order as $editor ) { if ( ! call_user_func( array( $editor, test ) ) ) continue; self::$implementation = $editor; break; } } return self::$implementation; }
  23. 23. Why using the word “default”
  24. 24. Because you can write your own implementation
  25. 25. How to do this• WP_Image_Editor::choose_implementation() has an filter called ‘wp_image_editors’• With this you can add your own implementation class name to it• When you want to use an implementation only for an certain image you can use the filter ‘wp_image_editor_class’
  26. 26. How to add your own class add_filter( ‘wp_image_editors’, ‘my_image_editors’ ); function my_image_editors( $implementations ) { array_unshift( $implementations, ‘My_Image_Editor_Phpthumb’ ); return $implementations; } class My_Image_Editor_Phpthumb() { //With all the needed functions }
  27. 27. What your class need to have• ->test()• ->load()• ->supports_mime_type( $mime_type );• ->resize( $max_w, $max_h, $crop );• ->multi_resize( $sizes ); // Key is the name• ->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 );
  28. 28. Going into the codeAnyone has a question before we do?
  29. 29. Whats needs to be done for 3.5• Adding the changes I showed into core• Add more unit tests• Testing if there is difference between GD and Imagick by creating a plugin what generates images on one page• And test till 3.5 got released over and over again
  30. 30. Whats needs to be done for 3.6 and later• Creating a WP_Image class and make it easier to add a new image to the size array of an attachment• Ability to have default color filters inside WordPress• Finding a way to allow generation on the fly
  31. 31. Questions?@markoheijnen -