web-dev-qa-db-fra.com

Changer la structure HTML de toutes les balises img dans Wordpress

J'ai un blog Wordpress et j'essaie d'implémenter le script foresight.js image. En bref, je dois cibler toutes les images de publication, échanger les attributs src, width, & height avec les attributs data-src, data-width, & data-height. J'ai ensuite besoin de dupliquer la ligne d'image et de l'envelopper dans les balises <noscript>. C'est la structure que j'essaie de faire générer/créer par Wordpress:

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

J'ai cherché le codex Wordpress et le meilleur chemin possible est d'utiliser des filtres (c'est-à-dire 'get_image_tag' & 'image_tag' ) pour modifier le code HTML généré par Wordpress image. Je pense qu’une de ces options devrait marcher ou que je peux faire une correspondance de motif avec regex (je sais, pas idéal) , jetez un preg_replace et réinjectez-le dans le filtre the_content.

J'ai essayé certaines de ces options mais je ne parviens pas à en faire fonctionner. Quelqu'un pourrait-il s'il vous plaît offrir de l'aide? J'ai trouvé une suggestion ici , mais n'arrive même pas à la faire fonctionner!

tentative 'get_image_tag':

J'ai trouvé celui-ci sur le Web, mais il faudrait le modifier pour qu'il corresponde à ma logique (voir la structure ci-dessus) ... ne permet pas de comprendre ce que le tableau preg_replace fait seul. 

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

Une autre tentative 'get_image_tag':

<?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;
}
?>

Tentative de correspondance de modèle:

J'ai essayé de créer ma propre expression régulière sur celui-ci, mais je ne suis pas sûr que ce soit correct.

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

Malheureusement, aucun de ces exemples ne peut fonctionner. Toute aide ou partage de vos scripts/fonctions pré-écrits serait très apprécié! Merci d'avoir aidé un étudiant à apprendre !!

imagesfiltersregexcustomization
3
kaffolder

Les filtres que vous essayez d'utiliser fonctionnent sur image insertion , il n'est donc pas possible d'échanger toutes les images déjà présentes dans vos publications à l'aide de ces filtres. Cela devrait toutefois fonctionner si vous avez l'intention de passer aux balises imgà partir de maintenant _.

Le filtre the_content est toutefois appliqué à la publication après sa récupération dans la base de données et avant son affichage à l'écran. Je pense que, pour modifier vos messages existants sans réinsérer les images, vous pouvez utiliser ce filtre.

Vous pouvez analyser the_content en utilisant le PHP DOMDocument class . En ce qui concerne l’analyse HTML en PHP, n’utilisez pas regex .

J'ai écrit un exemple de fonction pour ce que vous voulez faire, c'est un peu commenté pour expliquer les passages. N'hésitez pas à le modifier à volonté.

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

Je ne l'ai pas testé spécifiquement avec Wordpress, mais je l'ai testé avec un exemple de post-sortie et cela devrait fonctionner.

6
Sunyatasattva