Insert Images with Figure/Figcaption

For a simple plugin or functions.php file:

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 );

Comments

  1. User Avatar
    Robert Mayer
    Permalink to comment#

    Oh my gawd! Thanks!!! Great function! So easy, but still so powerful!

  2. User Avatar
    Namanyay Goel
    Permalink to comment#

    The URLs aren’t working, can someone help? :/

  3. User Avatar
    Jan
    Permalink to comment#

    This isn’t working because $url does not refer to the image source url but rather the link you want the image to wrap in.
    But even if you’d use wp_get_attachment_image_src() or get_image_tag() to generate the image the WYSIWYG editor does not accept the figure element and will append a new line in front and after it everytime you save the article.
    I decided to use a shortcode for this and swap the image when the article is being rendered.

    • User Avatar
      Ahrengot
      Permalink to comment#

      I’m having these issues as well, and on top of that I can’t seem to find the size chosen in the editor (large, medium, thumbnail) which wp_get_attachment_image_src() needs as an argument.

  4. User Avatar
    John O'Nolan
    Permalink to comment#

    The $url parameter just needs a minor adjustment with one extra line of code – try the following:

    
    /**
     * Swap P Tags for Figure Tags on Images
     */
    function html5_insert_image($html, $id, $caption, $title, $align, $url) {
        $url = wp_get_attachment_url($id);
        $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 );
    
    • User Avatar
      John O'Nolan
      Permalink to comment#

      Note: This filter in general (both original and my version) is not retro-active. It only filters images as they get inserted into the post via the editor – it will not correct any images in posts which have already been published.

    • User Avatar
      John O'Nolan
      Permalink to comment#

      Second note: You will no longer be able to add a caption to an image after it has already been inserted into a post. Caption must be added when the image is inserted. If you have already added an image and want to add a caption to it, delete the image from the post editor, then re-insert it with a caption.

  5. User Avatar
    Kyle
    Permalink to comment#

    Now here’s a question – this all works great, but what if I want to wrap that image in a a href tag? Doesn’t seem to be able to include the link, strips it out on insert. Of course, I can go in and manually do it, but that seems to defeat the purpose of this. I’m not exactly a PHP or WordPress genius so don’t want to screw anything major up (seems easy as adding an “if (urllink)” type thing as in the caption, but again, don’t want to mess it up.

  6. User Avatar
    Attila Hajzer
    Permalink to comment#

    What’s this line for?

    add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

    what is it’s use? and how does it work?

  7. User Avatar
    kadir
    Permalink to comment#

    At Kyle and probably people coming here at a later point.
    Adding the URL parameter to the tag is pretty simple.

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

  8. User Avatar
    Pedro Xaramillo
    Permalink to comment#

    I just tried the one that Kadir linked based on Chris’s code and it seems to work fine in WordPress 4.1, both with new posts and with prior posts. Thanks Kadir and Chris!

  9. User Avatar
    Nick Toye
    Permalink to comment#

    Ok, this doesn’t work if you change the alignment of the image. By that I mean if you set it to align right in the image dialog box, nothing happens. So you have to set it in the popup bar.

    But then if you need to switch it to align left, it doesn’t update.

  10. User Avatar
    Todd
    Permalink to comment#

    You can also update the [caption] shortcode instead.

    if ( !function_exists('update_caption_shortcode') ) {
    
        function update_caption_shortcode ($val, $attr, $content = null) {
    
            $a = shortcode_atts(array(
                'id' => '',
                'align' => 'alignnone',
                'width' => '',
                'caption' => ''
            ), $attr);
    
            $html = '<figure id="'.esc_attr($a['id']).'" class="wp-post-attachment '.esc_attr($a['align']).'" style="width:'.esc_attr($a['width']).'px;">';
            $html .= do_shortcode($content);
            if ( $a['caption'] !== '' ) {
                $html .= '<figcaption class="wp-caption">' . esc_attr($a['caption']) . '</figcaption>';
            }
            $html .= '</figure>';
    
            return $html;
        }
        add_filter( 'img_caption_shortcode', 'update_caption_shortcode', 10, 3 );
    }
    

Submit a Comment

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.

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