This document discusses changes to media handling in WordPress 3.5, including a new media manager, ability for multiple galleries, drag and drop functionality, and backend API rewrite. It notes some issues with the new system and proposes extensions like media tags, faster image insertion, and media folders. It also covers using the WP_Image_Editor class to programmatically edit images and plugins that improve image handling.

1. Dealing with media

2. 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

3. Sometimes you need to make a change
WordPress 3.5 did that for media

4. WordPress 3.5
• New media manager
• Ability for multiple galleries
• Insert multiple images
• Rewrite of backend API
• Support for ImageMagick

5. Old media manager

6. New media manager

7. Drag and drop

8. Galleries

9. Edit the gallery

10. Demo - gallery

11. A lot of changes at once

13. 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

14. How can we make it better?

15. Work together with the
WordPress UI team

16. Extend it with plugins
• Media tags (taxonomies)
• Faster image insert
• Multimedia box
• Media folders (dev)

17. Faster image insert

18. Multimedia box

19. Media folders

20. Features
• Ability to put media into
folders
• Show folders on media
page
• Drag & Drop support

21. Still missing
• Better way to change
the folder name
• Media dialog tab
• Gallery folder support
• Upload straight into a
folder

22. Demo - Media folders

23. How to

24. // 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();

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

26. Magic function when loading all WordPress related code
wp_enqueue_media()

27. So we talked about
media in general

28. Dealing with images

29. Dealing with images
• Having multiple image sizes
• Making changes
• But you can have issues like:
• Weird color differences
• Missing information in sizes

30. Using add_image_size ()

31. $awesome = new
WP_Image_Editor

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

33. Midden crop
$editor->resize( 300, 300, true );
Links boven
$editor->crop( 0, 0, 300, 300,
300, 300, false );
Midden crop met
rotatie 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

34. Using this code in your own plugin
Look at what WPThumb has done

35. 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.

36. WP_Image
• https://github.com/markoheijnen/WP_Image
• WP_Image_Editor layer for attachments
• add_image_size()
• store_image()
• get_editor()
• get_meta_data()

37. As mentioned not just a big
refactoring of the codebase

38. ImageMagick &
GraphicMagick support
The improvement photographers will like

39. The difference

40. 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

41. Image editor
The one thing that didn’t got changed in 3.5

42. 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

43. Demo - My editor playground

44. Dealing with video/audio

45. 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

46. Thanks for listening!
Any questions?
• markoheijnen.com
• @markoheijnen
• nl.linkedin.com/in/markoheijnen