Dealing with media
3 likes14,801 views
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.
![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](https://image.slidesharecdn.com/dealingwithmedia-130714050800-phpapp02/85/Dealing-with-media-45-320.jpg)
Ad
More Related Content
What's hot (14)
Similar to Dealing with media (20)
Ad
More from Marko Heijnen (20)
Ad
Recently uploaded (20)
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
- 8. Galleries
- 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)
- 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
- 29. Dealing with images • Having multiple image sizes • Making changes • But you can have issues like: • Weird color differences • Missing information in sizes
- 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
- 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