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 );
Oh my gawd! Thanks!!! Great function! So easy, but still so powerful!
The URLs aren’t working, can someone help? :/
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.
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.The $url parameter just needs a minor adjustment with one extra line of code – try the following:
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.
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.
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?
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 );
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!
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.
You can also update the
[caption]
shortcode instead.Hi,
at this point, no editings (alignment) are possible after inserting.
zerosignalproductions made a gist with support for and anchors and tinymce for removing figure tags with the images https://gist.github.com/zerosignalproductions/8325712
i adopted it to also support alignment-changes with the mouseover buttons: https://gist.github.com/netzgestaltung/7722e46cb39eca253afb2f7b724d511d
maybe someone will find it usefull…
I think you need to add this on the first line
$url = wp_get_attachment_url($id);