dealing with media
DESCRIPTION
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_EditorTRANSCRIPT
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