Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Perfect Your Images Using WordPress

Mike Schroder
October 05, 2013

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

Mike Schroder

October 05, 2013
Tweet

More Decks by Mike Schroder

Other Decks in Technology

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