Removing W3C validation errors caused by using lozadjs in sage 9

removing-w3c-validation-errors-caused-by-using-lozadjs-in-sage-9.md

Removing W3C validation errors caused by using lozadjs in sage 9

important The advice in this gist will increase the size of the documents you send to the browser (ever so slightly), so technically it's bad for performance. However, if for any reason you want to achieve zero W3C validation errors when using lozad.js in Roots/sage you can follow the instructions below.

Create a reusable (transparent and very small) base 64 encoded image

Open app/controllers/app.php and add the following to the class:

public static function fakeImg()
{
  return 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
}

Source of image

Edit the wp_get_attachment_image_attributes filter

Replace unset($attr['src']); with $attr['src'] = App::fakeImg();.

Adding images to your templates

<img src="{{App::fakeImg()}}" data-src="/the-real-src.png" class="lozad" alt="..." width="..." height="..." />