Wordpress - How to change the markup Wordpress inserts for post images
As far as I know you could hook into the filter image_send_to_editor
like this:
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' />";
$html5 .= "</figure>";
return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );
For additional tags like data-pil-thumb-url
and data-full-width
and data-full-height
you could add the appropriate code inside that function and add them to the $html5
string.
See also this page for an example featuring a caption <figcaption>
at css-tricks or check this more detailed 'walk through'.
There's a filter called image_send_to_editor
that lets you specify the markup. You will also need wp_get_attachment_metadata
to retrieve width and height. It is called like this (untested):
add_filter( 'image_send_to_editor', 'wpse_231693_img_markup', 10, 7 );
function wpse_231693_img_markup ($html, $id, $alt, $title, $align, $url, $size ) {
$metadata = wp_get_attachment_metadata ($id);
$url = wp_get_attachment_url($id);
$html = '<figure class="pil"><img src="' . $url .
'" data-pil-thumb-url="XXX" data-full-width="' . $metadata['width'] .
'" data-full-height="' . $metadata['height'] .
'" alt="' . $alt . '"></figure>';
return $html;
}
You will need some clever regex to construct XXX from $url, but I'll leave that to you.