web-dev-qa-db-fra.com

Comment utiliser l'élément <picture> au lieu des balises <img> dans le contenu de publication WordPress prenant en charge WebP?

Je développe mon thème personnalisé et j'essaie de comprendre comment modifier le code par défaut pour une image WordPress insérée dans le contenu du message afin de pouvoir ajouter un support pour le format webP et de l'insérer dans l'élément <picture>.

Je génère des images .webp à l'aide de la bibliothèque cwebp sur mon serveur et de PHP exec() lors du téléchargement d'une image sur le support dans WordPress Admin.

Le code est:

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);

Actuellement, le contenu de mon message contient l'élément <img> qui permet d'afficher la vignette dans la balise <p>, mais la balise <img> est un lien <a> qui pointe vers l'image en taille réelle.

Actuellement, j'ai cette image en taille réelle dans le contenu du message:

<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>

J'essaie de le modifier pour obtenir cela comme résultat:

<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>

J'ai une ou plusieurs images insérées comme ceci. Donc, aurait besoin de vérifier le contenu de la publication et de le modifier/remplacer?

Devrais-je utiliser une fonction preg_replace () ou WordPress image_send_to_editor ()?

Peut-être en utilisant un filtre?

Avez-vous des idées pour le changer?

J'ai trouvé des solutions pour l'élément <figure>, mais je ne parviens pas à le faire fonctionner avec <picture>.

postsfunctionsimagespost-thumbnailshtml5
1
Kiki FIstrek Novi

Vous devez parcourir toutes les images à l'intérieur de $postthe_content() à l'aide de foreach().

Ce qui nous donne, regex pour la correspondance de groupe de la balise <img>. Mettez toutes les images dans array().

Commencez à compter à partir de -1 puisque 0 a déjà la 1ère image dans array().

Parcourez array() avec des images, recherchez une image avec "size-full" avec une correspondance de groupe 3, si oui, obtenez la valeur src avec la correspondance de groupe 7.

Ensuite, remplacez src="value" extenstion - .png, .jpg ..., affectez la chaîne remplacée à la nouvelle variable. Utilisez la nouvelle variable et ajoutez l’extension ".webp" à la.

Remplacez les balises <img> existantes par l'élément <picture> et appelez la fonction sur $content.

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