Skip to content

Instantly share code, notes, and snippets.

@florianbrinkmann
Last active August 5, 2020 10:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save florianbrinkmann/abdf929694a72e75c33d7a4254301f42 to your computer and use it in GitHub Desktop.
Save florianbrinkmann/abdf929694a72e75c33d7a4254301f42 to your computer and use it in GitHub Desktop.
<?php
/**
* Add skip-lazy class to first image in content.
*/
add_filter( 'the_content', function( $content ) {
// Check if we have no content.
if ( empty( $content ) ) {
return $content;
}
// Check if content contains caption shortcode.
if ( has_shortcode( $content, 'caption' ) ) {
return $content;
}
if ( ! class_exists( '\Masterminds\HTML5' ) || ! class_exists( '\FlorianBrinkmann\LazyLoadResponsiveImages\Helpers' ) ) {
return $content;
}
// Disable libxml errors.
libxml_use_internal_errors( true );
// Create new HTML5 object.
$html5 = new \Masterminds\HTML5( array(
'disable_html_ns' => true,
) );
// Preserve html entities and conditional IE comments.
// @link https://github.com/ivopetkov/html5-dom-document-php.
$content = preg_replace( '/&([a-zA-Z]*);/', 'lazy-loading-responsive-images-entity1-$1-end', $content );
$content = preg_replace( '/&#([0-9]*);/', 'lazy-loading-responsive-images-entity2-$1-end', $content );
$content = preg_replace( '/<!--\[([\w ]*)\]>/', '<!--[$1]>-->', $content );
$content = str_replace( '<![endif]-->', '<!--<![endif]-->', $content );
// Load the HTML.
$dom = $html5->loadHTML( $content );
$xpath = new \DOMXPath( $dom );
// Get all image nodes.
// @link https://stackoverflow.com/a/19348287/7774451.
$nodes = $xpath->query( "//img[not(ancestor-or-self::noscript)]" );
$is_modified = false;
$counter = 0;
foreach ( $nodes as $node ) {
$counter++;
if ( $counter > 1 ) {
break;
}
// Check if it is an element that should not be lazy loaded.
// Get the classes as an array.
$node_classes = explode( ' ', $node->getAttribute( 'class' ) );
if ( in_array( 'skip-lazy', $node_classes ) ) {
continue;
}
// Check if it is one of the supported elements and support for it is enabled.
if ( 'img' === $node->tagName ) {
// Get the classes.
$classes = $node->getAttribute( 'class' );
// Add lazyload class.
$classes .= ' skip-lazy';
// Set the class string.
$node->setAttribute( 'class', $classes );
$is_modified = true;
}
}
if ( true === $is_modified ) {
$helpers = new \FlorianBrinkmann\LazyLoadResponsiveImages\Helpers();
$content = $helpers->save_html( $dom, $html5 );
}
// Restore the entities and conditional comments.
// @link https://github.com/ivopetkov/html5-dom-document-php/blob/9560a96f63a7cf236aa18b4f2fbd5aab4d756f68/src/HTML5DOMDocument.php#L343.
if ( strpos( $content, 'lazy-loading-responsive-images-entity') !== false || strpos( $content, '<!--<script' ) !== false ) {
$content = preg_replace('/lazy-loading-responsive-images-entity1-(.*?)-end/', '&$1;', $content );
$content = preg_replace('/lazy-loading-responsive-images-entity2-(.*?)-end/', '&#$1;', $content );
$content = preg_replace( '/<!--\[([\w ]*)\]>-->/', '<!--[$1]>', $content );
$content = str_replace( '<!--<![endif]-->', '<![endif]-->', $content );
}
return $content;
}, 99 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment