Dealing with media

Me

• WordPress core contributor

• GlotPress core developer

• Recent rockstar of 3.4

• Co author of WP_Image_Editor

• Working a lot with media

• Hacking plugins together

Sometimes you need to make a changeWordPress 3.5 did that for media

WordPress 3.5

• New media manager

• Ability for multiple galleries

• Insert multiple images

• Rewrite of backend API

• Support for ImageMagick

Old media manager

New media manager

Drag and drop

Galleries

Edit the gallery

Demo - gallery

A lot of changes at once

Complains

• Opening media dialog shows library instead of upload screen

• Adding a featured image is more convoluted

• Inputting meta data has become more difficult

• Gallery sorting for the shortcode dissappeared

• General response of not working due to plugins breaking stuff

How can we make it better?

Work together with the WordPress UI team

Extend it with plugins

• Media tags (taxonomies)

• Faster image insert

• Multimedia box

• Media folders (dev)

Faster image insert

Multimedia box

Media folders

Features

• Ability to put media into folders

• Show folders on media page

• Drag & Drop support

Still missing

• Better way to change the folder name

• Media dialog tab

• Gallery folder support

• Upload straight into a folder

Demo - Media folders

How to

// Create the media frame. image_frame = wp.media.frames.formatImage = wp.media({ // Set the title of the modal. title: $el.data('choose'),

// Tell the modal to show only images. library: { type: 'image' },

// Customize the submit button. button: { // Set the text of the button. text: $el.data('update') } });

image_frame.open();

// If the media frame already exists, reopen it. if ( image_frame ) { image_frame.open(); }

Magic function when loading all WordPress related code

wp_enqueue_media()

So we talked aboutmedia in general

Dealing with images

Dealing with images

• Having multiple image sizes

• Making changes

• But you can have issues like:

• Weird color differences

• Missing information in sizes

Using add_image_size ()

$awesome = new WP_Image_Editor

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

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

More examples

Using this code in your own pluginLook at what WPThumb has done

WP_Thumb

• https://github.com/humanmade/WPThumb

• On demand image resizing for WordPress

• Automatic images resizing, cropping and caching.

• Ideal for when you want to change the dimensions of default image sizes.

WP_Image

• https://github.com/markoheijnen/WP_Image

• WP_Image_Editor layer for attachments

• add_image_size()

• store_image()

• get_editor()

• get_meta_data()

As mentioned not just a big refactoring of the codebase

ImageMagick & GraphicMagick support

The improvement photographers will like

The difference

Plugins

• https://github.com/markoheijnen/Improved-GD-Image-Editor

• https://github.com/interconnectit/my-eyes-are-up-here

• https://github.com/markoheijnen/gmagick-editor

• https://github.com/getsource/imagick-sepia

Image editorThe one thing that didn’t got changed in 3.5

A better image editor

• A popup to change an image

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

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

• The image editor should be extendable

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

Demo - My editor playground

Dealing with video/audio

Dealing with Video/Audio

• Core support in 3.6

• MediaElement.js

• [video width="600" height="480" mp4="source.mp4" ogv="source.ogv" webm="source.webm"]

• http://my.mp3s.com/cool/songs/coolest.mp3

Thanks for listening!Any questions?

• markoheijnen.com

• @markoheijnen

• nl.linkedin.com/in/markoheijnen