Dealing with media

6,057 views
5,868 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
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
6,057
On SlideShare
0
From Embeds
0
Number of Embeds
1,417
Actions
Shares
0
Downloads
25
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

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

×