/**
* Get's the content that's about to be output
* and fixes the images to follow the responsive.io service conventions.
* @param string $content the unmodified html
* @return string the modified html
*/
public function update_images($content)
{
require_once plugin_dir_path(__FILE__) . 'includes/SmartDOMDocument.class.php';
// Create a DOMDocument instance
$dom = new SmartDOMDocument();
$dom->formatOutput = true;
$dom->preserveWhiteSpace = false;
if (empty($content)) {
return;
}
// Loads our content as HTML
@$dom->loadHTML($content);
// Get all of our img tags
$images = $dom->getElementsByTagName('img');
// Loop through all the images in this content
foreach ($images as $image) {
// Get some attributes
$src = $image->getAttribute('src');
$ext = strtolower(pathinfo($src, PATHINFO_EXTENSION));
$alt = $image->getAttribute('alt');
// Only interested in those who have a src set
// and that are not gifs
if (empty($src) || strpos($ext, 'gif') !== false) {
continue;
}
// Create our fallback image before changing this node
$imageClone = $image->cloneNode();
// Add the src as a data-src attribute instead
$image->setAttribute('data-src', $src);
// Empty the src of this img
$image->setAttribute('src', '');
// Now prepare our <noscript> markup
$noscript = $dom->createElement("noscript");
// Insert it
$noscriptNode = $image->parentNode->insertBefore($noscript, $image);
// Append the image fallback
$noscriptNode->appendChild($imageClone);
}
// Return our modified content
$html = $dom->saveHTMLExact();
return $html;
}
