Image manipulation in WordPress 3.5

71 %
29 %
Information about Image manipulation in WordPress 3.5

Published on November 4, 2012

Author: markoheijnen



This presentation was given at WordCamp Toronto - Developers

Improved image WordCamp Toronto - Developersmanipulation in WordPress November 4, 2012

Marko Heijnen• WordPress and mobile developer• Working with WordPress for more then six years• WordPress contributor of 3.0, 3.3, 3.4 and 3.5• Recent rockstar of 3.4• Founder of WP Rockstars

Dealing with problems• I like dealing with problems• My first try of contributing was on the rewrite API• For 3.4 I worked on the XML-RPC with Max Cutler & Westwood• And now dealing with all the image manipulation API’s

What am I going to talk about• How the current code looks like• In short how the process went• How the new API code looks like with the help of example code• The future steps that still need to be done

How it currently looks likeTotally chaos of calls to GD functions and no way to really use it as a developer

All kinds of functions that can be used• wp_load_image • wp_save_image• wp_stream_image • wp_crop_image• wp_save_image_file • image_resize• image_edit_apply_changes • image_make_intermediate_size• stream_preview_image

It all started at the Working with mainlyhackday in San Francisco Mike Schroder and Japh Thomson

The progress• Start at hackday San Francisco on August 5• All the coding happened on Github• In the end we got great help from Kurt Payne with creating unit tests• And obviously getting some great feedback from the WordPress community• Code got committed on October 1

So what can this new API do

Default functionality• ->resize( $max_w, $max_h, $crop );• ->multi_resize( $sizes ); // Key is the name• ->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 );

What are the default benefits• As developer the same usage as WordPress• Filename and Mime type control• You can change the default mime type ( default is still jpeg )• Better set quality support• No more calling to GD functionality• Imagick ( ImageMagick ) support

ExamplesLet’s play with some of the code WordPress now has

Example 1Same usage as you where using add_image_size but now you can create full control for which image you want to create one

The code$file = /path/to/image.png;$editor = WP_Image_Editor::get_instance( $file );$editor->resize( 300, 300, true );$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png$new_image_info = $editor->save( /path/to/image.jpg );$new_image_info = $editor->save( null, image/jpeg ); // Save the file as /path/to/image -300x300.jpg

Info wat save() returns array(5) { ["path"]=> string(65) "/path/to/image-300x300.png" ["file"]=> string(20) "toronto-300x300.png" ["width"]=> int(300) ["height"]=> int(300) ["mime-type"]=> string(10) "image/png" }

Example 2Create a crop where you want it

The code$file = /path/to/image.png;$editor = WP_Image_Editor::get_instance( $file );$editor->crop( 0, 0, 300, 300, 300, 300, false );$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png

Example 3Multiple calls so lets have some play time

The code$file = /path/to/image.png;$editor = WP_Image_Editor::get_instance( $file );$editor->flip( false, true );$editor->rotate( 30 );$editor->crop( (1589-(960*0.7))/2, (1472-(1280*0.7))/2, 960*0.7, 1280*0.7, 300, 300, false );$new_image_info = $editor->save(); // Save the file as /path/to/image-300x300.png

How does it workHow does it find the right editor to use

WP_Image_Editor::get_instance public final static function get_instance( $path = null ) { $implementation = self::choose_implementation(); if ( $implementation ) { $editor = new $implementation( $path ); $loaded = $editor->load(); if ( is_wp_error ( $loaded ) ) return $loaded; return $editor; } return new WP_Error( no_editor, __(No editor could be selected) ); }

WP_Image_Editor::choose_implementation(); private final static function choose_implementation() { if ( null === self::$implementation ) { $request_order = array( WP_Image_Editor_Imagick, WP_Image_Editor_GD ); foreach ( $request_order as $editor ) { if ( ! call_user_func( array( $editor, test ) ) ) continue; self::$implementation = $editor; break; } } return self::$implementation; }

Why using the word “default”

Because you can write your own implementation

How to do this• WP_Image_Editor::choose_implementation() has an filter called ‘wp_image_editors’• With this you can add your own implementation class name to it• When you want to use an implementation only for an certain image you can use the filter ‘wp_image_editor_class’

How to add your own class add_filter( ‘wp_image_editors’, ‘my_image_editors’ ); function my_image_editors( $implementations ) { array_unshift( $implementations, ‘My_Image_Editor_Phpthumb’ ); return $implementations; } class My_Image_Editor_Phpthumb() { //With all the needed functions }

What your class need to have• ->test()• ->load()• ->supports_mime_type( $mime_type );• ->resize( $max_w, $max_h, $crop );• ->multi_resize( $sizes ); // Key is the name• ->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 );

Going into the codeAnyone has a question before we do?

Whats needs to be done for 3.5• Adding the changes I showed into core• Add more unit tests• Testing if there is difference between GD and Imagick by creating a plugin what generates images on one page• And test till 3.5 got released over and over again

Whats needs to be done for 3.6 and later• Creating a WP_Image class and make it easier to add a new image to the size array of an attachment• Ability to have default color filters inside WordPress• Finding a way to allow generation on the fly

Questions?@markoheijnen -

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

WordPress › Support » image manipulation doesn't work

After upgrate to 3.5.1 image manipulation doesent work as follow: 1)Libary/Edit Media/Edit ... I also spotted a lot of WordPress sites with the same issue.
Read more

WordPress new image manipulation – Marko Heijnen

WordPress new image manipulation. After two months hard work the new image manipulation code ... There are still a lot of things to clean out before 3.5 is ...
Read more

WordPress › Support » WP Image Manipulation

WP Image Manipulation (4 posts) urs Member ... It has been written for WordPress 1.0.1. If you have questions or features to add, let me know [2].
Read more

Image Manipulation Archives -

... Image Manipulation in WordPress 3.5. Just finished my talk at WordCamp Phoenix 2013! It was great to be able to share WP_Image_Editor, ...
Read more

Image Manipulation — Blogs, Pictures, and more on WordPress Start a Blog; Sign In; Tags » Image Manipulation Diary of an Internet Nobody. K'lee ... sourced from Bing Image Search. ...
Read more

Image Manipulation | LinkedIn

View 237846 Image Manipulation posts, ... Image Manipulation Images talk. ... Image Manipulation in WordPress 3.5 ...
Read more

WP_Image_Editor is incoming! – Make WordPress Core

WP_Image_Editor is incoming! In WordPress 3.5, GD has been abstracted out of core’s image manipulation functions. What does that mean for you, you ask?
Read more

Version 3.5 « WordPress Codex

... 2012, WordPress Version 3.5, ... For Version 3.5, ... Insert multiple images at once with Shift/Ctrl+click
Read more