The awesome things you can do with images

WordCamp NorwayJanuary 26, 2012Marko Heijnen

Who am I?

• Marko Heijnen

• WordPress and mobile developer

• WordPress contributor of 3.0, 3.3, 3.4 and 3.5

• Recent rockstar of 3.4

• Co author of the new image manipulation code - WP_Image_Editor

• Love to hack around in WordPress

So let’s talk about 3.5(.1) for a bit

Features

• Media library redesign

• TwentyTwelve

• Links are removed

• New welcome screen

• New color picker

• Favorite plugins

• oEmbed support for SoundCloud, Slideshare en Instagram

• HiDPI Dashboard

• Taxonomy metaboxes are smaller with a few items

• Admin column for taxonomies

• Orderen on IDs in 'post__in'

• Default PHP limit of 40 MB

• WP_Post class

• XML-RPC default on

• WP_Image_Editor class

• Multi site improvements like switch_to_blog()

Features

• Media library redesign

• TwentyTwelve

• Links are removed

• New welcome screen

• New color picker

• Favorite plugins

• oEmbed support for SoundCloud, Slideshare en Instagram

• HiDPI Dashboard

• Taxonomy metaboxes are smaller with a few items

• Admin column for taxonomies

• Orderen on IDs in 'post__in'

• Default PHP limit of 40 MB

• WP_Post class

• XML-RPC default on

• WP_Image_Editor class

• Multi site improvements like switch_to_blog()

Media library redesign

Complete rewrite in 3.5

Media bibliotheek redesign

We all know the ugly box before 3.5

New media dialog

A huge drag en drop area

A 1000 times better way to create a gallery

Changing a gallery is just easy now

And you see a simple representation of the gallery now

Gallery on the front-end

Little demo

https://gist.github.com/4635255

That was fun but there issomething we are missing

WP_Image_Editor

The backend API that we now have for manipulating images

WP_Image_Editor

• No more GD

• You can now use Imagick (core) or Gmagick (plugin)

• Possible to change the quality of PNG’s too

• Possible to change the mime type if needed

But what is Imagick?

GD

Imagick

So happy clients who are usinghigh quality pictures

$image = wp_get_image_editor( 'cool_image.jpg' );if ( ! is_wp_error( $image ) ) { $image->rotate( 90 ); $image->resize( 300, 300, true ); $image->save( 'new_image.jpg' );}

Code example

Midden crop$editor->resize( 300, 300, true );

Links boven$editor->crop( 0, 0, 300, 300, 300, 300, false );

Midden crop metrotatie en flip

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

WP_Image_Editor examples

WPThumb

https://github.com/humanmade/WPThumb

• Used a lot for caching custom image sizes

• Previous it was using PHPThumb but now it’s using WP_Image_Editor

What’s next for core

WP_Image

• A way to retrieve a WP_Image_Editor by attachment ID

• Creating custom images and saved them in the image meta data

• Hopefully it helps out one day to not create images on the fly

A better image editor

• A popup to change an image

• No more opening a new venster from the new image dialog

• The image editor should be extendable

• Better ways to say on which image size it should apply

• Be able to use image filters. No Instagram anymore but just WordPress for all your images

And yes I got something to show you

Thanks for listening!Any questions?

• markoheijnen.com

• @markoheijnen

• nl.linkedin.com/in/markoheijnen