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>
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
$urldoesn’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 viawp_get_attachment_image_src()and$idshould be much safer.For my part, I’d also screw the
$captionpart which should be done via theimage_add_caption_shortcodefilter. 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_shortcodefilter, 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!
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
Really digging this little snippet! Just gave it a shot on my latest build and it worked without issue! Thanks for sharing Chris!
Not working on 3.6.1
Any changes to adapt it to new versions?
Regards
E
Working fine for me on a 3.6.1 install.
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.
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:
Thanks guys, but what to do if some images has links to big size?
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…?
old post but maybe this helps someone:
https://gist.github.com/zerosignalproductions/8325712
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 .=’:
@ Tobias
This is very cool and works like a charm, but…
which lines of code can I comment out to remove the srcset?
How to add the filter on a specific Add Media button on another form?
If you want the
<figure>element to be removed (or any other parent element you wrap your image in) when a user deletes the photo, here’s a nifty little TinyMCE plugin I wrote that you can incorporate in WP: