web-dev-qa-db-fra.com

Envelopper automatiquement plusieurs images dans div

Quelques questions ressemblent à cela, mais je n'ai rien trouvé qui fonctionne avec la dernière version de WordPress. J'essaie d'envelopper des images adjacentes dans le div.

<p>
  <img> />
  <img> />
  <img> />
  Some text.
</p>

dans:

<p>
 <div>
  <img> />
  <img> />
  <img> />
 </div>  
Some text.
</p>

Je peux envelopper chaque image dans sa propre division en utilisant:

function wrapImagesInDiv($content) {
   $pattern = '/(<img[^>]*class=\"([^>]*?)\"[^>]*>)/i';
   $replacement = '<div>$1</div>';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter('the_content', 'wrapImagesInDiv');

et je pense qu'il serait possible de modifier l'expression régulière pour envelopper plusieurs balises img en utilisant {2,}, mais cela n'a pas fonctionné.

Des idées?

Modifier

Grâce à Beee, cela répond à mes besoins mais je me sens très maladroit. Toute amélioration est la bienvenue.

add_filter( 'the_content', 'add_image_wrapper', 99, 1 );
function add_image_wrapper( $content ) {
    $content = preg_replace_callback( '/<img[^>]+>|<p>|<br>/im',
        function( $matches ) use (&$inimg) {

        $fulltag   = $matches[0];    
        preg_match('/<(img)[^>]+>|<(p)>|<(br)>/',$fulltag,$tag);  

        $tag = $tag[1];

        if ( $tag === 'img') {
            ( $inimg == true) ? $tag = 1 : $tag = 0;
            ( $inimg == false ) ? $inimg = true : $inimg;
        }                          
        else {
            ( $inimg == true) ? $tag = 2 : $tag = 3;                    
            ( $inimg == true ) ? $inimg = false : $inimg;
        }

        switch ($tag) {
          case 0: //no preceding img tag
              return sprintf( '<div>%s', $fulltag );
              break;
          case 1: //preceding img tag
              return sprintf( '%s', $fulltag );
              break;
          case 2: //last image tag
              return sprintf( '</div>%s', $fulltag );
              break;
          case 3:
              return sprintf( '%s', $fulltag );
              break;
       }
    }, $content );

    return $content;
}
functionscustomizationimagescontent
1
jonnyfishman

C’est une fonction que j’utilise pour ajouter un wrapper à chaque image. Je sais que ce n'est pas à 100% ce que vous voulez, mais je pensais que cela pourrait vous donner une poignée de travail.

function add_image_wrapper( $content ) {
    $content = preg_replace_callback( '/<img[^>]+>/im', function ( $matches ) {
        $image   = $matches[0];
        $classes = array();
        preg_match( '/class="align([^"]+)"/im', $image, $classes );

        $align = ( ! empty( $classes ) ? $classes[1] : null );
        $class = '';
        if ( in_array( $align, array( 'left', 'right' ) ) ) {
            $class = 'media--align-' . $align;
        }

        return sprintf(
            '<div class="media %s">%s</div>',
            $class, $image
        );
    }, $content );

    // Remove unnecessary classes from media-wrappers inside figures
    $content = preg_replace_callback( '/<figure[^>]+>.+<\/figure>/im', function ( $matches ) {
        $figure = $matches[0];

        return preg_replace( '/class="media[^"]+"/im', 'class="media"', $figure );
    }, $content );

    return $content;
}
add_filter( 'the_content', 'add_image_wrapper', 99, 1 );
1
Beee