Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Insert Images within Figure Element from Media Uploader

For your functions.php file or a functionality plugin:

function html5_insert_image($html, $id, $caption, $title, $align, $url) {
  $html5 = "<figure id='post-$id media-$id' class='align-$align'>";
  $html5 .= "<img src='$url' alt='$title' />";
  if ($caption) {
    $html5 .= "<figcaption>$caption</figcaption>";
  }
  $html5 .= "</figure>";
  return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

It also takes what you enter as a caption and inserts it within the <figure> tag as a <figcaption>. Example inserted code:

<figure id='post-18838 media-18838' class='align-none'>
  <img src='http://youresite.com/wp-content/uploads/2012/10/image.png' alt='Title of image'>
  <figcaption>Caption for image</figcaption>
</figure>

Comments

  1. That’s nice, but it can be improved. :)

    function html5_insert_image($html, $id, $caption, $title, $align, $url) {
      $src  = wp_get_attachment_image_src( $id, $size, false );
      $html5 = "<figure id='post-$id media-$id' class='align$align'>";
      $html5 .= "<img src='$src[0]' alt='$title' width='$src[1]' height='$src[2]' />";
      $html5 .= "</figure>";
      return $html5;
    }
    add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

    Note that $url doesn’t hold the image’s source URL, but the value of the “Link URL” field from the “Add Media” window. Getting the actual image source URL via wp_get_attachment_image_src() and $id should be much safer.

    For my part, I’d also screw the $caption part which should be done via the image_add_caption_shortcode filter. But the above function could use a statement for optional links on images.

    • @Caspar

      Thanks for that tidbit; I can’t seem to find any docs on the image_add_caption_shortcode filter, any chance you’d be willing to expand on that, or point me to some docs?

      @Chris, thanks a bunch for posting this last year; it really saved my bacon with a project!

  2. Karl
    Permalink to comment#

    Dang, this doesn’t appear to work in WordPress 3.5. Couldn’t understand why no-one had picked up on this snippet not working at first but a quick switch to a localhost running 3.4 shows it worked just fine. Question is: what’s changed / broken?

    All the best, Karl

  3. Really digging this little snippet! Just gave it a shot on my latest build and it worked without issue! Thanks for sharing Chris!

  4. Elie Herrera
    Permalink to comment#

    Not working on 3.6.1
    Any changes to adapt it to new versions?

    Regards

    E

  5. Jovian
    Permalink to comment#

    One problem with such HTML custom code for images:
    if you try to delete an ebedded image to a post, wysiwyg just delets an <img/> (or <a><img/></a>), but leaves <figure>"blank"</figure>.
    It really very bad. And I need to find a solution… Any help. Even just poit to the right direction where to look is appreciated.

  6. Permalink to comment#

    Hi, thanks for all the help above. On WP 3.7 I had a few difficulties with the code on the page so far. I’ve played around with it and now I’m using the following code to put out nice HTML figures and captions:

    function html5_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt) {
      $src  = wp_get_attachment_image_src( $id, $size, false );
      $html5 = "<figure class='align$align'>";
      $html5 .= "<img src='$src[0]' alt='$alt' />";
      if ($caption) {
        $html5 .= "<figcaption>$caption</figcaption>";
      }
      $html5 .= "</figure>";
      return $html5;
    }
    add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );
    
  7. Permalink to comment#

    Thanks guys, but what to do if some images has links to big size?

  8. Arnd
    Permalink to comment#

    Thanks for the hack, but Jovian is right: It doesn’t work with TinyMCE. So alas it is practically useless – all will be messed up when the end user tries to delete or move images. :-(
    Any ideas, anybody…?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```