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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".