it-swarm.com.de

Ändern Sie die HTML-Struktur aller img-Tags in Wordpress

Ich habe einen Wordpress-Blog und versuche, das Skript foresight.js image zu implementieren. Kurz gesagt, ich muss alle Post-Bilder als Ziel festlegen und die src, width, & height-Attribute durch data-src, data-width, & data-height-Attribute ersetzen. Ich muss dann die Bildzeile duplizieren und sie in <noscript> Tags einwickeln. Dies ist die Struktur, die Wordpress erzeugen/erstellen soll:

<img data-src="wordpress/image/url/pic.jpg" data-width="{get width of image with PHP & pass-in that value here} data-height="{get height of image with PHP and pass-in that value here}" class="fs-img">
<noscript>
    <img src="wordpress/image/url/pic.jpg">
</noscript>

Ich habe den Wordpress-Codex durchsucht und der beste Weg, den ich finden kann, besteht darin, Filter zu verwenden (dh 'get_image_tag' & 'image_tag' ), um die HTML-Dateien zu ändern, die Wordpress jeweils ausgibt Bild. Ich denke, dass eine dieser Optionen funktionieren sollte, oder dass ich einen Mustervergleich mit Regex durchführen kann (ich weiß, nicht ideal) , einen preg_replace einwerfen und diesen dann wieder in den the_content-Filter einfügen.

Ich habe einige dieser Optionen ausprobiert, kann aber keine zum Laufen bringen. Könnte jemand bitte etwas Hilfe anbieten? Ich habe einen Vorschlag gefunden hier , kann ihn aber nicht zum Laufen bringen!

Versuch 'get_image_tag':

Habe dieses im Web gefunden, müsste aber an meine Logik angepasst werden (siehe obige Struktur) ... kann nicht verstehen, was das preg_replace-Array alleine macht.

<?php function image_tag($html, $id, $alt, $title) {
    return preg_replace(array(
        '/'.str_replace('//','\/\/',get_bloginfo('url')).'/i',
        '/\s+width="\d+"/i',
        '/\s+height="\d+"/i',
        '/alt=""/i'
    ),
    array(
        '',
        '',
        '',
        alt='"' . $title . '"'
    ),
    $html);
}
add_filter('get_image_tag', 'image_tag', 0, 4);
?>

Ein weiterer "get_image_tag" -Versuch:

<?php function get_image_tag($id, $alt, $title, $align, $size='full') {
    list($width, $height, $type, $attr) = getimagesize($img_src);
    $hwstring = image_hwstring($width, $height);

    $class = 'align' . esc_attr($align) . ' size-' . esc_attr($size) . ' wp-image-' . $id;
    $class = apply_filters('get_image_tag_class', $class, $id, $align, $size);

    $html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" data-width="' . $width . '" data-height="' . $height . '" class="' . $class . ' fs-img" />';
    $html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size);

    return $html;
}
?>

Mustervergleichsversuch:

Ich habe versucht, meinen eigenen regulären Ausdruck für diesen zu erstellen, bin mir aber nicht sicher, ob er korrekt ist.

<?php function restructure_imgs($content) {
    global $post;
    $pattern = "/<img(.*?)src=('|\")(.*?).(bmp|gif|jpeg|jpg|png)(|\")(.*?)>/i";

    list($width, $height, $type, $attr) = getimagesize($2$3.$4$5);
    $hwstring = image_hwstring($width, $height);

    $replacement = '<img$1data-src=$2$3.$4$5 title="'.$post->post_title.'" data-width="'.$width.'" data-height="'.$height.'" class="fs-img"$6>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'restructure_imgs');
?>

Leider kann keines dieser Beispiele funktionieren. Jede Hilfe oder Weitergabe Ihrer vorab geschriebenen Skripte/Funktionen wäre sehr dankbar! Vielen Dank, dass Sie einem Schüler beim Lernen helfen!

3
kaffolder

Die Filter, die Sie verwenden möchten, werden mit Bildeinfügung ausgeführt. Es ist daher nicht möglich, alle in Ihren Posts vorhandenen Bilder mit diesen Filtern auszutauschen. Es sollte jedoch funktionieren, wenn Sie beabsichtigen, zu img tags von nun an zu wechseln.

Der Filter the_content wird jedoch auf den Beitrag angewendet, nachdem er aus der Datenbank abgerufen wurde und bevor er auf dem Bildschirm angezeigt wird. Ich glaube, dass Sie diesen Filter verwenden können, um Änderungen an Ihren vorhandenen Posts vorzunehmen, ohne die Bilder erneut einzufügen.

Sie können the_content mit der Klasse PHP DOMDocument analysieren. Wenn es um das Parsen von HTML in PHP geht, verwenden Sie nicht regex .

Ich habe eine Beispielfunktion für das geschrieben, was Sie tun möchten. Sie ist etwas ausführlich, um die Passagen zu erklären. Fühlen Sie sich frei, es nach Belieben zu optimieren.

<?php
function foresight_hires_img_replace($the_content) {
    // Create a new istance of DOMDocument
    $post = new DOMDocument();
    // Load $the_content as HTML
    $post->loadHTML($the_content);
    // Look up for all the <img> tags.
    $imgs = $post->getElementsByTagName('img');

    // Iteration time
    foreach( $imgs as $img ) {
        // Let's make sure the img has not been already manipulated by us
        // by checking if it has a data-src attribute (we could also check
        // if it has the fs-img class, or whatever check you might feel is
        // the most appropriate.
        if( $img->hasAttribute('data-src') ) continue;

        // Also, let's check that the <img> we found is not child of a <noscript>
        // tag, we want to leave those alone as well.
        if( $img->parentNode->tagName == 'noscript' ) continue;

        // Let's clone the node for later usage.
        $clone = $img->cloneNode();

        // Get the src attribute, remove it from the element, swap it with
        // data-src
        $src = $img->getAttribute('src');
        $img->removeAttribute('src');   
        $img->setAttribute('data-src', $src);

        // Same goes for width...
        $width = $img->getAttribute('width');
        $img->removeAttribute('width');
        $img->setAttribute('data-width', $width);

        // And height... (and whatever other attribute your js may need
        $height = $img->getAttribute('height');
        $img->removeAttribute('height');
        $img->setAttribute('data-height', $height);

    // Get the class and add fs-img to the existing classes
        $imgClass = $img->getAttribute('class');
        $img->setAttribute('class', $imgClass . ' fs-img');

        // Let's create the <noscript> element and append our original
        // tag, which we cloned earlier, as its child. Then, let's insert
        // it before our manipulated element
        $no_script = $post->createElement('noscript');
        $no_script->appendChild($clone);
        $img->parentNode->insertBefore($no_script, $img);
    };

     return $post->saveHTML();
 }

 add_filter('the_content', 'foresight_hires_img_replace');
 ?>

Ich habe es nicht speziell mit Wordpress getestet, aber ich habe es mit einer Beispiel-Post-Ausgabe getestet und es sollte funktionieren.

6
Sunyatasattva