wake-up-neo.com

Wie verwende ich <picture> -Elemente anstelle von <img> -Tags in WordPress-Post-Inhalten mit WebP-Unterstützung?

Ich entwickle gerade mein benutzerdefiniertes Design und versuche herauszufinden, wie der Standardcode für WordPress-Bilder, die in den Inhalt des Posts eingefügt werden, geändert werden kann, damit das WebP-Format unterstützt wird und das Element <picture> verwendet wird.

Ich generiere .webp Bilder mit der cwebp Bibliothek auf meinem Server und PHP exec(), während Bilder in WordPress Admin auf die Medien hochgeladen werden.

Der Code lautet:

function my_image_webp($meta, $id){

    if(!isset($meta['sizes'])) {
        return $meta['full'];
    }

    $upload_path = wp_upload_dir();
    $path = $upload_path['basedir'];

    // media upload direktorij
    if(isset($path)){
        $file = trailingslashit($upload_path['basedir'].'/').$meta['file'];
    }else{
        $file = trailingslashit($upload_path['path']).$meta['file'];
    }

    list($orig_type) = @getimagesize($file);
    switch ($orig_type) {
            case IMAGETYPE_PNG:
            $png_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
            exec("cwebp ".$file." -o ".$png_image.".webp");
            break;
            case IMAGETYPE_JPEG:
            $jpg_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
            exec("cwebp ".$file." -o ".$jpg_image.".webp");
            break;
        }

        // return
        wp_update_attachment_metadata($id, $meta);
        return $meta;

    }
}
add_filter('wp_generate_attachment_metadata','my_image_webp', 10, 2);

Gegenwärtig enthält mein Beitragsinhalt ein <img>-Element, um die Miniaturansicht im <p>-Tag anzuzeigen, aber das <img>-Tag ist ein <a>-Link, der auf das Bild in voller Größe verweist.

Zur Zeit habe ich folgendes für das Vollbild im Beitragsinhalt:

<p>
    <a href="http://www.example.com/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
        <img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example.com/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
    </a>
</p>

Ich versuche, es zu ändern, um dieses als Resultat zu erhalten:

<p>
    <a href="http://www.example.com/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
        <picture>
            <source srcset="http://www.example.com/wp-content/uploads/2018/11/image-thumb.webp" type="image/webp" />
            <img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example.com/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
        </picture>
    </a>
</p>

Ich habe ein oder mehrere Bilder so eingefügt. Müsste man also den gesamten Beitragsinhalt überprüfen und irgendwie modifizieren/ersetzen?

Soll ich eine Funktion von preg_replace () oder WordPress image_send_to_editor () verwenden?

Vielleicht mit etwas Filter?

Haben Sie Ideen, wie Sie das ändern können?

Ich habe einige Lösungen für das Element <figure> gefunden, kann es jedoch nicht mit <picture> zum Laufen bringen.

postsfunctionsimagespost-thumbnailshtml5
1
Kiki FIstrek Novi

Sie müssen alle Bilder in $postthe_content() mit foreach() durchlaufen.

Womit wir regex für die Gruppenübereinstimmung des <img>-Tags erhalten. Setzen Sie alle Bilder in array().

Beginnen Sie mit dem Zählen ab -1, da 0 das erste Bild bereits in array() enthält.

Durchlaufen Sie array() mit Bildern, suchen Sie das Bild mit "size-full" mit Gruppenübereinstimmung 3. Wenn ja, erhalten Sie den Wert für src mit Gruppenübereinstimmung 7.

Ersetzen Sie anschließend die src="value"-Erweiterung - .png, .jpg ..., und weisen Sie die ersetzte Zeichenfolge einer neuen Variablen zu. Verwenden Sie die neue Variable und fügen Sie der Variablen die Erweiterung ".webp" hinzu.

Ersetzen Sie vorhandene <img>-Tags durch das <picture>-Element und rufen Sie die Funktion für $content auf.

function webp_picture_fix($content){
    global $post;
    preg_match_all("/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?)('|\")(.*?)>/i", $content, $images);

    if(!is_null($images)){
        $i = -1;
        foreach ($images as $key) {
            $i++;
            //echo $key[$i];
            if(strpos($images[3][$i], 'size-full') !== false){
                //echo "hi";
                $slika_ekstenzija = $images[7][$i];
                $sewebp = preg_replace('/\\.[^.\\s]{3,4}$/', '', $slika_ekstenzija);
                $webp_slika_src = $sewebp.".webp";
                $replacement = '<picture><source srcset="'.$webp_slika_src.'" type="image/webp" /><img'.$images[1][$i].'class='.$images[2][$i].$images[3][$i].$images[4][$i].$images[5][$i].'src='.$images[6][$i].$images[7][$i].$images[8][$i].$images[9][$i].'></picture>';
                $content = str_replace($images[0][$i], $replacement, $content);
            }
        }
    }

    return $content;
}
add_filter('the_content', 'webp_picture_fix', 9999);
0
Fritex