Perfect Your Images Using WordPress

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

46fa959634a063abefcac94eaf191eca?s=128

Mike Schroder

October 05, 2013
Tweet

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 !