Tuesday, 27 August 2013

Lazy load function adds new Doctype

Lazy load function adds new Doctype

I have an image heavy wordpress site.
I'd like to use a lazyload plugin to load the images.
The plugin requites a 'img' element like this
<img data-original="img/example.jpg" src="img/grey.gif" width="640"
height="480">
The output from Wordpress is
<img class="" alt="" src="img/example.jpg" width="440" height="664" />
I'm using this function to create the required 'img' element.
function add_lazyload($content) {
$dom = new DOMDocument();
@$dom->loadHTML($content);
foreach ($dom->getElementsByTagName('img') as $node) {
$oldsrc = $node->getAttribute('src');
$node->setAttribute("data-original", $oldsrc );
$newsrc =
''.get_template_directory_uri().'/images/placeholder.png';
$node->setAttribute("src", $newsrc);
}
$newHtml = $dom->saveHtml();
return $newHtml;
}
add_filter('the_content', 'add_lazyload');
This creates the 'img' elements I need but it surrounds them in a new
doctype, html and body elements.
Is it possible to create the 'img' elements without the new doctype, html
and body.

No comments:

Post a Comment