Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dealing with media
Me
• WordPress core contributor
• GlotPress core developer
• Recent rockstar of 3.4
• Co author of WP_Image_Editor
• Worki...
Sometimes you need to make a change
WordPress 3.5 did that for media
WordPress 3.5
• New media manager
• Ability for multiple galleries
• Insert multiple images
• Rewrite of backend API
• Sup...
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
• Inp...
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
...
Demo - Media folders
How	 to
// Create the media frame.
image_frame = wp.media.frames.formatImage = wp.media({
// Set the title of the modal.
title: $e...
// 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 about
media in general
Dealing with images
Dealing with images
• Having multiple image sizes
• Making changes
• But you can have issues like:
• Weird color differenc...
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( 3...
Midden crop
$editor->resize( 300, 300, true );
Links boven
$editor->crop( 0, 0, 300, 300,
300, 300, false );
Midden crop m...
Using this code in your own plugin
Look at what WPThumb has done
WP_Thumb
• https://github.com/humanmade/WPThumb
• On demand image resizing for WordPress
• Automatic images resizing, crop...
WP_Image
• https://github.com/markoheijnen/WP_Image
• WP_Image_Editor layer for attachments
• add_image_size()
• store_ima...
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-he...
Image editor
The 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...
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="s...
Thanks for listening!
Any questions?
• markoheijnen.com
• @markoheijnen
• nl.linkedin.com/in/markoheijnen
Dealing with media
Upcoming SlideShare
Loading in …5
×

Dealing with media

7,756 views

Published on

WordPress does changed a lot in 3.5 and it has some awesome new functionality. This presentations shows what changed, why it changed and what you can do with it. It also shows some of the complains users have.

Check http://www.slideshare.net/markoheijnen/image-manipulation-in-wordpress-35 for more information on WP_Image_Editor

Published in: Technology, Art & Photos

Dealing with media

  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
  12. 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
  13. How can we make it better?
  14. Work together with the WordPress UI team
  15. Extend it with plugins • Media tags (taxonomies) • Faster image insert • Multimedia box • Media folders (dev)
  16. Faster image insert
  17. Multimedia box
  18. Media folders
  19. Features • Ability to put media into folders • Show folders on media page • Drag & Drop support
  20. Still missing • Better way to change the folder name • Media dialog tab • Gallery folder support • Upload straight into a folder
  21. Demo - Media folders
  22. How to
  23. // 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();
  24. // If the media frame already exists, reopen it. if ( image_frame ) { image_frame.open(); }
  25. Magic function when loading all WordPress related code wp_enqueue_media()
  26. So we talked about media in general
  27. Dealing with images
  28. Dealing with images • Having multiple image sizes • Making changes • But you can have issues like: • Weird color differences • Missing information in sizes
  29. Using add_image_size ()
  30. $awesome = new WP_Image_Editor
  31. $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' ); }
  32. 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
  33. Using this code in your own plugin Look at what WPThumb has done
  34. 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.
  35. WP_Image • https://github.com/markoheijnen/WP_Image • WP_Image_Editor layer for attachments • add_image_size() • store_image() • get_editor() • get_meta_data()
  36. As mentioned not just a big refactoring of the codebase
  37. ImageMagick & GraphicMagick support The improvement photographers will like
  38. The difference
  39. 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
  40. Image editor The one thing that didn’t got changed in 3.5
  41. 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
  42. Demo - My editor playground
  43. Dealing with video/audio
  44. 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
  45. Thanks for listening! Any questions? • markoheijnen.com • @markoheijnen • nl.linkedin.com/in/markoheijnen

×