Dougal Campbell's geek ramblings

WordPress, web development, and world domination.

WordPress 2.9 Media Embedding

As promised in my previous post on WordPress 2.9 features, this post will be a demonstration of the super easy media embeds coming in WordPress 2.9. What I find particularly interesting and useful about the new embedding feature, and oEmbed in particular, is that it is truly multimedia. It’s not just about embedding videos. You can embed images, audio, slideshows, or even HTML. Anything that could possibly be included in a web page can be embedded from a remote service via oEmbed.

What’s great about the new media embed feature in WordPress is that it’s so easy to use. How easy? Really easy.

There are two ways to use the new media embedding feature in WordPress 2.9 — raw URLs or the embed shortcode. The first is the simplest — simply include the URL to a page on a supported service on a line all by itself in your post. For our examples, we’ll include a static image from Flickr:

http://www.flickr.com/photos/dougal/3963145416/sizes/s/

Note that this link points to a full web page, not just an image. But with the oEmbed support, WordPress will be able to find out what it needs to fetch, and how to embed it properly in your content. When the post is rendered in the browser, the image will be fetched in place of the URL:

Matt and Dougal

Note that even though the URL pointed to the ‘small’ version of the image, the embed gave us the ‘medium’ size instead. This is what Flickr considers the ‘canonical’ version of the image. That might be something to keep in mind. Other services might detect which version of a resource you are embedding and serve up an appropriate version, or Flickr may change this behavior in the future. The important thing here is that all we did was put the URL on a line by itself in our post, and WordPress magically figured out what to do.

Using the embed shortcode is just about as easy. Simply wrap the shortcode around the URL:

[­embed]http://www.flickr.com/photos/dougal/3963145416/sizes/s/[/embed]

Which will embed into your post like so:

Matt and Dougal

That worked exactly like the first example, huh? So, if it’s so easy to embed something using a raw URL, why use the embed shortcode? Because it allows parameters! Let’s say you want to put that picture in your post, but you need it to be a particular size, so that it fits into your theme layout better. Simply specify the size inside the opening embed shortcode.

[­embed width="200"]http://www.flickr.com/photos/dougal/3963145416/sizes/s/[/embed]

Which will give us the 200px wide image like this:

Matt and Dougal

Another advantage of the shortcode is that you can wrap other HTML around it. For example, on this site, I sometimes put an image inside a div with a class of pull-quote, which results in a highlighted section which floats to the right of the surrounding text (you have to switch from the Visual editor to the HTML editor for this). The code would typically look something like this:

<div class="pull-quote"><img src="/pics/Chocolatebunnies.jpg" /><p>Funny Bunnies</p><div>

I can do the same thing with an embed using the shortcode so that this:

<div class="pull-quote">[­embed width="200"]http://www.flickr.com/photos/dougal/3963145416/sizes/s/[/embed]<p>Matt and Dougal at WordCamp Birmingham 2009</p><div>

Gives us the floated, highlighted area that I want:

Matt and Dougal

Matt and Dougal at WordCamp Birmingham 2009

So there you go, a quick example of how to use the new embed features in WordPress 2.9. I was going to mix things up with embeds from different sites, but not all of the oEmbed services listed were working right for me. I might need to do some testing and file some bug reports later.

About Dougal Campbell

Dougal is a web developer, and a "Developer Emeritus" for the WordPress platform. When he's not coding PHP, Perl, CSS, JavaScript, or whatnot, he spends time with his wife, three children, a dog, and a cat in their Atlanta area home.
This entry was posted in WordPress and tagged , , , , , , , , , , . Bookmark the permalink.

42 Responses to WordPress 2.9 Media Embedding

  1. Pingback: uberVU - social comments

  2. Pingback: WordPress 2.9 a chystané novinky (2): Jednoduché vkládání médií z externích služeb (nap?. YouTube) do p?ísp?vk? prost?ednictvím oEmbed | Separatista

  3. Pingback: Reflections » WordPress 2.9 Enhancements Every Developer Must Know

Leave a Reply