Dougal Campbell's geek ramblings

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:

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:

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:

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:

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.