Preparing and Dealing with Social Media Negativity and Activism
Dealing with media
-
Upload
marko-heijnen -
Category
Technology
-
view
4.062 -
download
1
description
Transcript of Dealing with media
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