Weird borders in some browsers from missing src attribute.

[inbetweencode]

I'm not very happy with with the weird unremovable borders that appear (alongside the alt text) because of the initial missing (mandatory) src attribute. That isn't pretty on a production website.

I'm thinking that it might be a good idea (in my current case at least) to insert an initial src attribute with some base64 encoded transparent gif.

Do you have an opinion about that? Do you have an insight which filter I could use best?

[inbetweencode]

At this time i use the image-template.php:

<img<?php
  echo $view->get_image_attribute_string();
  if(false !== $view->image_attributes['attachment_id']){
    echo $view->get_sizes();
    echo ' srcset="' . $view->format_srcset($template_data) . '"';
    echo ' src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"';
  }
  ?> />

[kylereicks]

This is interesting. You can add the original src attribute back in with the picturefill_wp_output_src filter:

add_filter('picturefill_wp_output_src', '__return_true');

This creates an output more inline with the spec, but out of line with the current recommendation for picturefill, which puts an emphasis on avoiding extra HTTP requests.

Your solution is clever; however, rather than edit the image-template.php file in the plugin, you may want to use the picturefill_wp_image_template_file_path filter to point to another template file, or the picturefill_wp_image_template filter to edit the output directly.

What I might do is use the picturefill_wp_image_attribute_string filter to append a placeholder src attribute. Something like this:

// Don't use the picturefill_wp_output_src filter, just append a src to the picturefill_wp_image_attribute_string filter
add_filter('picturefill_wp_image_attribute_string', 'add_placeholder_src');

function add_placeholder_src($attribute_string){
 return $attribute_string . ' src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"'
}

[inbetweencode]

Good, satisfying enough.