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='//youresite.com/wp-content/uploads/2012/10/image.png' alt='Title of image'>
  <figcaption>Caption for image</figcaption>
</figure>

Comments

  1. User Avatar
    Caspar Hübinger
    Permalink to comment#

    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.

    • User Avatar
      Jeff Byrnes
      Permalink to comment#

      @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. User Avatar
    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. User Avatar
    Taylor McRae
    Permalink to comment#

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

  4. User Avatar
    Elie Herrera
    Permalink to comment#

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

    Regards

    E

  5. User Avatar
    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. User Avatar
    John King
    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. User Avatar
    Mixa
    Permalink to comment#

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

  8. User Avatar
    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…?

    • User Avatar
      Roman
      Permalink to comment#

      old post but maybe this helps someone:

  9. User Avatar
    Tobias
    Permalink to comment#

    Thanks for the code! I also wanted responsive images with this one, I am no programmer actually, but this is how I got it to work, using the selected size as the fallback, please let me know how this can be written smarter, I had problems having all the arrays in one line, thus the multiple lines of ‘$html .=’:

    function html5_insert_image($html, $id, $caption, $title, $align, $url, $size) {
        $src = wp_get_attachment_image_src( $id, $size, false );
        $srclarge = wp_get_attachment_image_src( $id, large, false );
        $srcmedium = wp_get_attachment_image_src( $id, medium, false );
        $srcsmall = wp_get_attachment_image_src( $id, thumbnail, false );
        $html5 = "<figure id='post-$id media-$id' class='align$align'>";
        $html5 .= "<img src='$src[0]' srcset='";
        $html5 .= "$srcsmall[0] 320w, ";
        $html5 .= "$srcmedium[0] 640w, ";
        $html5 .= "$srclarge[0] 1100w";
        $html5 .= "' alt='$title' />";
        $html5 .= "<figcaption>$caption</figcaption>";
        $html5 .= "</figure>";
        return $html5;
      }
      add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );
    
  10. User Avatar
    Greg Ledger
    Permalink to comment#

    @ Tobias
    This is very cool and works like a charm, but…
    which lines of code can I comment out to remove the srcset?

  11. User Avatar
    Bane
    Permalink to comment#

    How to add the filter on a specific Add Media button on another form?

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag