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. Doug Stewart says:

    Methinks you were trying to embed the images, but I don’t see them being displayed…

    Something amok?

  2. Viper007Bond says:

    Looks like oEmbed fetching failed. Edit the post (you don’t have to change anything) and hit save — that will dump the oEmbed cache (stored in the post meta) and refetch it all.

  3. Donna says:

    This post is very confusing. If you’re trying to use it to demonstrate embedded images in WP 2.9, I’m not seeing any images embedded in it at all, just links to Flickr.

  4. Dougal says:

    @Doug, @Donna — sorry about the confusion. It seems that Flickr had a hiccup of some sort around the time of my last edit to the post. Things seem to be back to normal now.

  5. Doug Stewart says:

    Bah, SuperCache is preventing me from refreshing the site — d’oh!

    • Dougal says:

      Flush your browser cache, and I’ll flush SuperCache on this end.

      • Doug Stewart says:

        Ahhhh, muchas muchas gracias!

        Works like a charm. Good deal.

      • Viper007Bond says:

        FYI your caching is being weird, Dougal. It’s not busting the cache when a new comment is made (and no, it’s not my browser).

        • Dougal says:

          Ah, thanks for pointinting that out. I think I still had “Lock Down” mode enabled. Which actually doesn’t seem to work properly on my setup. I need to ping Donncha about that.

          I’ve disabled Lock Down, so it should update properly now.

          • Viper007Bond says:

            No, it’s supposed to do that. ;)

            Prepare your server for an expected spike in traffic by enabling the lock down. When this is enabled, new comments on a post will not refresh the cached static files.

          • Dougal says:

            Yeah, but it doesn’t actually save the cached file for Apache to pick up. I think it’s because I run WP out of a subdirectory (‘wordpress’), and have a custom permalink structure that’s different (‘blog’). Need to do more testing to be sure, though. I just know that it didn’t create the static file that it was supposed to.

  6. Does this work in the HTML, non-visual editor? One of the first things I do with new WP installs is disable the rich editor, maybe that’s just me? I used VideoPress which had a similar embed styles (used [video] i believe) and that didn’t seem to work with my setup.

    • Viper007Bond says:

      You’re not the only one who hates the rich editor. ;)

      Yes, this is editor independent as the URL to embed is done on display, not on writing.

      • > done on display, not on writing.

        Nice! Thanks for the reply.

      • Kelson says:

        Does it contact the third-party server on display, too, or does it grab it once (say on post update) and store the resulting HTML code locally?

        If it contacts the third-party server every time someone views the post, that sounds like a very bad case of overhead, doubling the number of requests sent to (for instance) Flickr and making the page itself dependent on a third party server to load within a reasonable time period.

        I’m guessing that since no one above said anything about the page not loading, just about images being missing, during the time that Flickr was down, it probably means this pulls the oEmbed data once and stores it. Though I suppose that could have been Super Cache.

        Could someone please clarify?

    • Dougal says:

      Yeah, I had to use the HTML (code) editor for this post, because the Visual editor kept wanting to translate the HTML entities I needed to use to make my code examples display properly. And the trick I’m using to keep the embed tags from being interpreted doesn’t work right in Safari (a soft-hyphen).

  7. Pingback: uberVU - social comments

  8. Gareth says:

    Minor thing, but the flickr TOS require any embedded image to be a link to the photo page. Can this technique do that easily?

  9. Ulysses says:

    So simple. Another round of applause to the WP Dev Team.

  10. Jeff G. says:

    I like this addition I never realized images could be embedded like that..good stuff WP team – and damn y’all do a lot of updates!

  11. 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

  12. Sweety says:

    nice thing, a useful update that I can use very well for my blog, I’m looking forward already!
    greetings sweety

  13. Christiaan says:

    Can you use this to embed, say, a whole Flickr photo set at once to create a gallery?

  14. Jauhari says:

    I like this featured, I will try it

  15. Wonderful help, and on the quick. Thanks for the pointers, the new oEmbed is helping me to lay out http://dotdotdot.ca/videos/ to make it look reasonable.

    Thanks, K

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

  17. shirls says:

    Hi Dougal & Viper007Bond,

    Thanks for the great work ! I just started to use this feature and am loving it.

    However, just a couple of questions : –
    1. Dougal, I used your tips for resizing the photos, it works great if reducing size. However, when I want to increase the width to higher than 500px, it does not seem working. Any tips?
    2. I like your tips on too. Yet, all I hope to do is to center the photos, are there easier ways, instead of creating a new div?

    Thanks a million in advance for your time and help ! :)

    • Viper007Bond says:

      The “width” parameter is passed on to the provider as a “max width” value. It’s up to them if they want to supply an image at your requested size or smaller.

  18. r-a-y says:

    I need someone to test something for me.
    Does the [embed] shortcode with a width parameter work with videos?

    I’m just testing this on my local sandbox and it appears the width parameter is being ignored.

    Try:
    [embed width="200"]YOUTUBE URL[/embed]

    and see if the width of your video is 200.

  19. Michael says:

    So, I uploaded a mp3 to the media library and tried the embed short code and nothing. Does this not work for you own media library files? If not, will this come in 3.0. The reason I ask is because I use WordPress for my Podcast and hate using plugins for this…they always break or do not activate.

    Thank you…great post.

    • Dougal says:

      This functionality is for use with third-party services which provide oEmbed. WordPress itself is not an oEmbed provider. I know that there are several plugins which make it super easy to add an MP3 player to WordPress, though.

      Try looking at these:

      SSG WordPress Google Audio Player
      Flash MP3 Player
      oEmbed Provider plugin mentions providing post excerpts as oEmbed from WordPress, but I don’t know if it handles media.

      • Lea Hayes says:

        Hey, great post!I would like to embed videos that are uploaded into my WordPress website. I guess that this is similar to Michaels requirement with MP3 music.Is there a built-in mechanism to achieve this? or do I too need to use a third-party plugin?Thanks,Lea Hayes

Leave a Reply

%d bloggers like this: