Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress Media Essentials

WordPress Media Essentials

WordPress San Diego meetup presentation about the built-in WordPress media options, plugin-solutions, as well as a few distribution things like CDNs.

Derek Springer

April 29, 2014

More Decks by Derek Springer

Other Decks in Technology


  1. Who is this guy? Derek Springer Code Wrangler, Automattic (R)Ads

    Team BeerXML Shortcode Plugin @derekspringer Used to build satellite plugins, now I build WordPress plugins
  2. Overview 1) Why use media in WordPress? 2) A quick

    note on HTML5 3) Images 4) Audio 5) Video 6) Embeds 7) CDNs 8) Stuff to check out
  3. This isn't a talk about • Using the WP media

    uploader – Though I am going to discuss some of the cool new features of WP 3.9. • The finer points of implementing some of the topics I discuss. • Developer level code tweaks.
  4. Why use media in WP? • Adding images, video, and

    audio stimulates your users’ minds, giving them something more than text to dig through, and a reason to come back. • Media breaks up the text, improves the flow, and makes a long post seem much shorter and more enjoyable to read. • Maybe that is the whole point of your site! (*cough* membership sites *cough*)
  5. What is media in WP? • “An agency by which

    something is accomplished, conveyed, or transferred.” • In WP this includes any rich way of displaying information in your posts. • Text • Images • Audio • Video • Tweets • Calendars • Polls
  6. HTML5: The Wild West Here's what we have now: •

    <Video> element – H.264* (mp4) – Theoria (ogg) – VP8 (WebM) • <Audio> element – MPEG-1 Audio Layer 3* (mp3) – Advance Audio Coding* (aac) – Vorbis (ogg) Note: none are *required* to be supported in HTML5! Flash *licensed
  7. Why use HTML5 media? • You want to support iOS/Apple

    & other mobile products. • You hate Flash. • <embed> and <object> tags are a mess. • Looking to use cutting edge web tech. • Board meeting bullet point. • You want to be a “cool kid.”
  8. The Good • Simple, robust, and standard(ish) way to include

    audio & video on a page. • You can still fall back to Flash (or vice versa). • Support for mobile devices. – Easy to send different files optimized for different devices. • Ability to create custom skins and controls. – Super controllable w/ JavaScript. • Built-in accessibility options.
  9. The Bad • No browser supports every media format. –

    Some browser don't support even the *most* popular formats. (Even Chrome and Chromium aren't equal). – More formats means more effort. • Time, hosting, code, etc. – HTML5 spec is still in flux. • Lots of vendor-specific implementations & hacks.
  10. The Ugly • It is up to you to know

    which browsers support which containers and codecs. • If you want maximum compatibility you have to use licensed codecs. • Two letters: IE – <= IE 8 – Nope! – IE 9 – User must install compatibility plugins • Copy protection is not dealt with in HTML5, so if you need DRM out of the box you're out of luck. • After all is said and done you might *still* have to use Flash.
  11. Maximum compatibility 1) Make one version that uses WebM. 2)

    Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container. 3) Make another version that uses Theora video and Vorbis audio in an Ogg container. 4) Link to all three video files from a single <video> element, and fall back to a Flash-based video player.
  12. Sane compatibility • Video – WebM + H.264 • Audio

    – MP3 + Vorbis • Free – WebM, Theora, Vorbis
  13. WordPress 3.6 • New shortcodes [audio] and [video] using the

    MediaElement.js library. • Uses consistent HTML markup, so it's super easy to use CSS to skin the players. • Can swap out default MediaElement.js support via 'wp_video_shortcode_library' filter. • Easy insertion via new post formats UI. • Additional metadata extraction via getID3 library.
  14. MediaElement.js • Video *and* audio support. • Consistent HTML5 *and*

    Flash fallback player. • Backfills support for IE6-8 and adds extra media types for Firefox, Opera, & Safari. • This is what is integrated into WordPress 3.6! http://mediaelementjs.com/
  15. Images in WP 3.9 • Drop directly into the editor,

    no need to open media manager. • Resize the image in the editor. • See galleries live in the editor. • Support for imgur images and galleries.
  16. Optimize your images • Most folks don't realize they're serving

    images that are *way* bigger than they need to be. • Furthermore, you're serving lots of images at the bottom of posts that might not even been seen by your users. • That's a lot of bandwidth to waste! • Also slow!
  17. Built-in audio • Audio – [audio src="audio-source.mp3"] – [audio mp3="source.mp3"

    ogg="source.ogg" wav="source.wav"] – http://my.mp3s.com/cool/songs/coolest.mp3
  18. Built-in video • Video – [video src="video-source.mp4"] – [video width="600"

    height="480" mp4="source.mp4" ogv="source.ogv" webm="source.webm"] – http://www.example.com/videos/video-source.mp4
  19. JW Player 6 • Video *and* audio support. – Flash

    fallback. • Free for non-commercial use, but costs money to remove watermark & unlock extra features. • Cloud hosting and configuration. • Tailored toward “professional” users. – Analytics – Advertisement http://www.longtailvideo.com/jw-player/
  20. Embeds • Super-easy to embed videos, images, audio, and other

    content into your WordPress site. • Just paste a supported URL is on its own line. • Optionally wrap URL in the [embed] shortcode. – It also allows you to set a maximum (but not fixed) width and height, like so [embed width="123" height="456"]...[/embed] • For security purposes, WP only embeds URLs matching an internal whitelist.
  21. Supported embeds • blip.tv • Bunkr • DailyMotion • Flickr

    • FunnyOrDie • Hulu • Imgur • Instagram • Meetup.com • SmugMug • SoundCloud • Spotify • Revision3 • Scribd • SlideShare • Photobucket • PollDaddy • Rdio • YouTube • WordPress.tv • VideoPress • Twitter • Viddler • Vimeo
  22. oEmbed discovery • To prevent accidental embedding from malicious websites

    oEmbed discovery is disabled by default. • You can get around this though! – Install Enable oEmbed Discovery plugin. – Gives unfiltered_html users (Administrators and Editors) the ability to embed from websites that have oEmbed discovery tags in their <head>. • Caveat administrator.
  23. CDNs • “Content Delivery Network” • Images / Audio /

    Video are the heavyweights of bandwidth for your site. • Far away user → super slow downloads! • Let a pro host your files and distribute them across the world for snappy downloads.
  24. Photon - Jetpack • Service for Jetpack-connected WP sites. •

    Acts on images in posts, pages, and featured images (post thumbnails). To start using Photon: • From the Jetpack page in your blog dashboard, click 'Activate' button for Photon. • You’re done! http://jetpack.me/support/photon/
  25. 1-2 punch • Step 1: Install W3 Total Cache •

    Step 2: Sign up with your favorite CDN. – MaxCDN – EdgeCast – Amazon Cloudfront • If media is a big portion of your site this is not something you should skimp on! (It's okay to pay for important things)
  26. Also! • Use Google's CDN to host your common javascript

    files to save even more bandwidth. • Check out: Use Google Libraries
  27. Recommended reading • Audio & Video Support in Core •

    Editor/Audio/Video updates in 3.9 • WordPress Embeds • Jetpack (Gallery, Photon, & VideoPress) • Devin Walker's slides on site optimization • Yoast's Opinion on Sliders • Source and Attribute Creative Commons
  28. In conclusion • Update to 3.9 ASAP. – Check out

    the new image, audio, and video features. • Don't be afraid to host your files elsewhere and embed. • Don't let bandwidth run wild, invest in a good CDN!