Perfect your images using WordPress - WordCamp Europe 2013
Upcoming SlideShare
Loading in...5
×
 

Perfect your images using WordPress - WordCamp Europe 2013

on

  • 2,612 views

Perfect your images using WordPress - WordCamp Europe 2013

Perfect your images using WordPress - WordCamp Europe 2013

Statistics

Views

Total Views
2,612
Views on SlideShare
2,536
Embed Views
76

Actions

Likes
1
Downloads
7
Comments
0

2 Embeds 76

https://twitter.com 75
http://www.slideee.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Perfect your images using WordPress - WordCamp Europe 2013 Perfect your images using WordPress - WordCamp Europe 2013 Presentation Transcript

  • WordCamp Europe 2013 The Netherlands Perfect Your Images Using WordPress Mike Schroder & Marko Heijnen
  • WordCamp Europe 2013 The Netherlands Mike Marko 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
  • WordCamp Europe 2013 The Netherlands What was wrong?
  • WordCamp Europe 2013 The Netherlands GD was used directly
  • WordCamp Europe 2013 The Netherlands Image manipulation abstracted
  • WordCamp Europe 2013 The Netherlands WP_Image_Editor • Centralized way to read an image file • manipulate it • save IT • STREAM IT
  • WordCamp Europe 2013 The Netherlands How was it MADE?
  • WordCamp Europe 2013 The Netherlands International COOPERATION.
  • WordCamp Europe 2013 The Netherlands Gives you the power of core
  • WordCamp Europe 2013 The Netherlands GD and Imagick Support
  • WordCamp Europe 2013 The Netherlands Imagick has color profiles
  • WordCamp Europe 2013 The Netherlands The Difference GD Imagick
  • WordCamp Europe 2013 The Netherlands What’s the catch?
  • WordCamp Europe 2013 The Netherlands No more direct image manipulation
  • WordCamp Europe 2013 The Netherlands Deprecated filters • 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
  • WordCamp Europe 2013 The Netherlands What’s still missing? Centralized way to read an image attachment from the database and manage its sizes and properties
  • WordCamp Europe 2013 The Netherlands Maybe WP_Image... https://github.com/markoheijnen/WP_Image
  • WordCamp Europe 2013 The Netherlands To load an attachment No current alternative to load_image_to_edit(), so: wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
  • WordCamp Europe 2013 The Netherlands Okay, what can we do with it?
  • 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 ); The actions
  • WordCamp Europe 2013 The Netherlands
  • WordCamp Europe 2013 The Netherlands A simple resize // 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' ); }
  • WordCamp Europe 2013 The Netherlands A simple resize ©Massimo Catarinella (CC-SA)
  • WordCamp Europe 2013 The Netherlands A simple resize
  • WordCamp Europe 2013 The Netherlands Extend to create your own image-manip engines or functions.
  • WordCamp Europe 2013 The Netherlands Tiff: Image or not?
  • WordCamp Europe 2013 The Netherlands You can even extend Imagick for everyone’s favorite filter:
  • WordCamp Europe 2013 The Netherlands Sepia!
  • WordCamp Europe 2013 The Netherlands
  • WordCamp Europe 2013 The Netherlands
  • WordCamp Europe 2013 The Netherlands Thanks for listening! Any questions? @getSource & @markoHeijnen
  • 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/ Editor examples
  • 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 More Resources!
  • 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 More Resources!