it-swarm.com.de

Bildattribute für Lazyload-Plugin (data-src) ersetzen

Ich möchte JQuery Lazyload Plugin anwenden. Damit dies funktioniert, muss ich ein neues Attribut erstellen, bei dem data-src den src-Wert dort platziert und dann den src-Wert durch einen bestimmten Wert '...nothing.gif' ersetzt. Ich habe eine Lösung auf wordpress.org gefunden

Das ist mein angepasster Code -

function add_lazyload($content) 
{
    global $post;
    $search = '/src\=\"([^\s]+(?=\.(bmp|gif|jpeg|jpg|png))\.\2)\"/';
    $content = replacer($content, $search, '/src/', 'data-original');
    $search = '/img\ class\=\"/';
    $content = replacer($content, $search, '/class\=\"/', 'class="lazy ');
    $search = '/alt/';
    $content = replacer($content, $search, '/alt/', 'src="'.get_template_directory_uri().'/library/images/nothing.gif"');
    return $content;
}

function replacer($src, $search, $find, $replace)
{
    preg_match_all($search, $src, $result, PREG_OFFSET_CAPTURE);
    foreach($result[0] as $entry)
    {
        $org = $entry[0];
        $rep = preg_replace($find, $replace, $entry[0]);
        $org = "/" .str_replace(array("=",":","/",".","-","_",'"',"'"," "),     array("\=","\:","\/","\.","\-","\_",'\"',"\'","\ "), $org). "/";
        $src = preg_replace($org, $rep, $src);
    }
return $src;
}

add_filter('the_content', 'add_lazyload');

Das Problem mit diesem Code ist, dass er jede alt Zeichenfolge (z. B. in einem Absatz) durch .../library/images/nothing.gif ersetzt, nicht nur das alt image-Attribut.

Weiß jemand, wie man das löst?

4
Alvaro

anstatt das Alt-Tag zu ersetzen, könnten Sie ein-Attribut-zu-einem-Tag-hinzufügen

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().'/library/images/nothing.gif';
         $node->setAttribute("src", $newsrc);
     }
     $newHtml = $dom->saveHtml();
     return $newHtml;
}

hinweis: ich habe diesen code nicht ganz getestet, also sei vorsichtig :)

7
pcarvalho

Ich habe Peteroaks ausgezeichnete Lösung für die Konvertierung in utf-8 modifiziert und den Doctype, HTML und Body von der Ausgabe entfernt.

function add_lazyload($content) {

    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $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/nothing.gif';
        $node->setAttribute("src", $newsrc);
    }
    $newHtml = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
    return $newHtml;
}
add_filter('the_content', 'add_lazyload');
7
Shieeet

Ich habe der Shieeets-Lösung einige Funktionen hinzugefügt:

  • srcset support (ändert srcset in data-srcset)
  • noscript Fallback (zeigt das Originalbild an)
  • video/Embed/Iframe-Unterstützung (Youtube und Co)
  • zusätzlicher Haken, um Thumbnails zu beeinflussen (zusätzlich zum Posten von Bildern)
  • die Klassen "Lazy" und "Lazy-Hidden" werden automatisch hinzugefügt

Hier ist der PHP Code:

// Lazyload Converter
function add_lazyload($content) {

    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $dom = new DOMDocument();
    @$dom->loadHTML($content);

    // Convert Images
    $images = [];

    foreach ($dom->getElementsByTagName('img') as $node) {  
        $images[] = $node;
    }

    foreach ($images as $node) {
        $fallback = $node->cloneNode(true);

        $oldsrc = $node->getAttribute('src');
        $node->setAttribute('data-src', $oldsrc );
        $newsrc = get_template_directory_uri() . '/images/placeholder.gif';
        $node->setAttribute('src', $newsrc);

        $oldsrcset = $node->getAttribute('srcset');
        $node->setAttribute('data-srcset', $oldsrcset );
        $newsrcset = '';
        $node->setAttribute('srcset', $newsrcset);

        $classes = $node->getAttribute('class');
        $newclasses = $classes . ' lazy lazy-hidden';
        $node->setAttribute('class', $newclasses);

        $noscript = $dom->createElement('noscript', '');
        $node->parentNode->insertBefore($noscript, $node); 
        $noscript->appendChild($fallback); 
    }


    // Convert Videos
    $videos = [];

    foreach ($dom->getElementsByTagName('iframe') as $node) {
        $videos[] = $node;
    }

    foreach ($videos as $node) {  
        $fallback = $node->cloneNode(true);

        $oldsrc = $node->getAttribute('src');
        $node->setAttribute('data-src', $oldsrc );
        $newsrc = '';
        $node->setAttribute('src', $newsrc);

        $classes = $node->getAttribute('class');
        $newclasses = $classes . ' lazy lazy-hidden';
        $node->setAttribute('class', $newclasses);

        $noscript = $dom->createElement('noscript', '');
        $node->parentNode->insertBefore($noscript, $node); 
        $noscript->appendChild($fallback); 
    }

    $newHtml = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
    return $newHtml;
}
add_filter('the_content', 'add_lazyload');
add_filter('post_thumbnail_html', 'add_lazyload');
1