advertisement

Perfect your images using WordPress - WordCamp Europe 2013

50 %
50 %
advertisement
Information about Perfect your images using WordPress - WordCamp Europe 2013
Technology

Published on October 8, 2013

Author: markoheijnen

Source: slideshare.net

Description

Perfect your images using WordPress - WordCamp Europe 2013
advertisement

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!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

WordCamp Europe 2013 - Perfect Your Images Using WordPress

I was humbled to be invited to speak alongside Marko Heijnen on WP_Image_Editor at the first WordCamp Europe in Leiden, The Netherlands. Thanks to the ...
Read more

Schedule | WordCamp Europe 2013

WordCamp Europe 2013 Leiden, ... Running a European WordPress Development Agency Remkus de Vries, ... Perfect Your Images Using WordPress Marko Heijnen, ...
Read more

Sponsors | WordCamp Europe 2013

WordCamp Europe 2013 ... defining and executing your online ... With WooThemes businesses and individuals can get professional WordPress sites ...
Read more

Hi WordCamp Europe, My Name is Jeremy

Continue reading Hi WordCamp Europe, My ... I’m excited to arrive with perfect ... I’ll talk all day about the benefits of using Vagrant in your ...
Read more

WordCamp San Diego 2016 | Event | WordPress.tv

Posts about WordCamp San Diego 2016 written by WordPress.tv. ... Setting up Your Local Environment; AJ Zane: Using WordPress ... WordCamp Europe 2013 ...
Read more

Blog Tool, Publishing Platform, and CMS — WordPress

Over 60 million people have chosen WordPress to power ... Read the Documentation and become a WordPress expert yourself, impress your ... WordCamp ...
Read more

WordCamp Seattle 2011 | Event | WordPress.tv

Posts about WordCamp Seattle 2011 written by WordPress.tv and ... for Using and Integrating WordPress CMS to ... the Perfect Mobile WordPress ...
Read more

Theme Directory — Free WordPress Themes

Upload Your Theme; 15. Featured; Popular; ... Featured Images; Flexible Header; ... WordCamp; WordPress.TV; BuddyPress; bbPress; WordPress.com;
Read more

WordCamp Europe - Day One Recap | CodeinWP Blog

WordCamp Europe – Day One Recap. October 13th, 2013 • in Conferences • by Ionut Neagu - No Comments. ... Perfect Your Images Using WordPress
Read more