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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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