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
   

   View Slide

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
   

   View Slide

3. WordCamp Europe 2013 The Netherlands
   W w wrong?
   

   View Slide

4. WordCamp Europe 2013 The Netherlands
   GD w directly
   

   View Slide

5. WordCamp Europe 2013 The Netherlands
   I abstracted
   

   View Slide

6. WordCamp Europe 2013 The Netherlands
   WP_I _E r
   • Centralized way to read an image file
   • manipulate it
   • save IT
   • STREAM IT
   

   View Slide

7. WordCamp Europe 2013 The Netherlands
   H w w MADE?
   

   View Slide

8. WordCamp Europe 2013 The Netherlands
   I r COOPERATION.
   

   View Slide

9. WordCamp Europe 2013 The Netherlands
   G v w r f core
   

   View Slide

10. WordCamp Europe 2013 The Netherlands
    GD Imagick S r
    

    View Slide

11. WordCamp Europe 2013 The Netherlands
    Imagick color profiles
    

    View Slide

12. WordCamp Europe 2013 The Netherlands
    Difference
    GD Imagick
    

    View Slide

13. WordCamp Europe 2013 The Netherlands
    W ’ catch?
    

    View Slide

14. WordCamp Europe 2013 The Netherlands
    N r direct
    

    View Slide

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
    

    View Slide

16. WordCamp Europe 2013 The Netherlands
    W ’ ?
    Centralized way to read an image attachment from
    the database and manage its sizes and properties
    

    View Slide

17. WordCamp Europe 2013 The Netherlands
    M b WP_I ...
    https://github.com/markoheijnen/WP_Image
    

    View Slide

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 ) );
    

    View Slide

19. WordCamp Europe 2013 The Netherlands
    O , w can w w ?
    

    View Slide

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 );
    

    View Slide

21. WordCamp Europe 2013 The Netherlands
    

    View Slide

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' );
    }
    

    View Slide

23. WordCamp Europe 2013 The Netherlands
    A r
    ©Massimo Catarinella (CC-SA)
    

    View Slide

24. WordCamp Europe 2013 The Netherlands
    A r
    

    View Slide

25. WordCamp Europe 2013 The Netherlands
    Extend r r w
    - engines r
    functions.
    

    View Slide

26. WordCamp Europe 2013 The Netherlands
    Tiff: I r ?
    

    View Slide

27. WordCamp Europe 2013 The Netherlands
    Y v Imagick
    f r v r ’ f v r r:
    

    View Slide

28. WordCamp Europe 2013 The Netherlands
    Sepia!
    

    View Slide

29. WordCamp Europe 2013 The Netherlands
    

    View Slide

30. WordCamp Europe 2013 The Netherlands
    

    View Slide

31. WordCamp Europe 2013 The Netherlands
    f r !
    A q ?
    @getSource & @markoHeijnen
    

    View Slide

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
    

    View Slide

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 !
    

    View Slide

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 !
    

    View Slide