Grow your CSS skills. Land your dream job.

Last updated on:

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

Reference URL

Comments

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

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

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

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

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

Leave a Comment

Current day month ye@r *

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