I am developing a theme with Underscores for WordPress.

When the user adds an image using the TinyMCE editor the following code is inserted:

<img class="wp-image-45 size-full aligncenter" src="http://example.com/wp-content/uploads/2016/06/process.png" alt="process" width="849" height="91" />

When I look at the final page generated by Wordpress, the HTML appears in the DOM

<img class="wp-image-45 size-full aligncenter" src="http://example.com/wp-content/uploads/2016/06/process.png" alt="process" width="849" height="91" srcset="http://example.com/wp-content/uploads/2016/06/process.png 849w, http://example.com/wp-content/uploads/2016/06/process-300x32.png 300w, http://example.com/wp-content/uploads/2016/06/process-768x82.png 768w" sizes="(max-width: 849px) 100vw, 849px">

I have created a function to generate a thumbnail with a width of 300px:

add_action( 'after_setup_theme', 'images_theme_setup' );
function images_theme_setup() {
    add_image_size( 'preload-thumb', 300 ); // 300 pixels wide (and unlimited height)

Now I want to use Pil (https://github.com/gilbitron/Pil) compatible markup to serve images so I can serve the preload-thumb and then serve the larger image

I need to change to the markup to match this below

<figure class="pil">
    <img src="img/my-image.jpg" data-pil-thumb-url="img/thumb-my-image.jpg" data-full-width="5616" data-full-height="3744" alt="">

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-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'.

| improve this answer | |
  • How can I get a medium size, $url = wp_get_attachment_image_src( $id, 'medium' ); returns blank – Simon Jul 7 '16 at 14:54
  • For correctness, title and alt attributes are not the same thing. After the $url argument $size, $alt are available for the function, if someone cares to use them. – Cazuma Nii Cavalcanti Jul 14 '18 at 23:15

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.

| improve this answer | |
  • As I understand it, image_send_to_editor only works on tinyMCE but then wordpress will replace it with their responsive image's markup. make.wordpress.org/core/2015/11/10/… – Simon Jul 7 '16 at 11:04
  • Also, it returns 'unexpected T_RETURN' for 'return $html;' – Simon Jul 7 '16 at 11:13
  • As I said: ''untested". There was a ' missing. I've corrected that. Your link points to an additional filter that adds the srcset attribute. That could probably be overriden. If $url doesn't pass try adding $url = wp_get_attachment_url($id); – cjbj Jul 7 '16 at 11:18
  • Apologies. Their is also another ' missing for $metadata['width']. I added $url = wp_get_attachment_url($id); - within TinyMCE the url is displayed, however within the rendered post page the url has disappeared. – Simon Jul 7 '16 at 11:27
  • Do you sitll have the srcset attribute? You could try to disable the responsive stuff. That might also leave the src alone. Here's a discussion about that: wordpress.stackexchange.com/questions/211375/… – cjbj Jul 7 '16 at 11:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.