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="https://wordpress.stackexchange.com/questions/231693/$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-heightyou 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’.

Leave a Comment