自动在div中换行多个图像

时间:2018-03-01 作者:jonnyfishman

有几个问题与此类似,但我没有发现任何与最新版本的WordPress兼容的问题。我正在尝试将相邻图像包装到一个div中。

<p>
  <img> />
  <img> />
  <img> />
  Some text.
</p>
进入:

<p>
 <div>
  <img> />
  <img> />
  <img> />
 </div>  
Some text.
</p>
我可以使用以下方法将每个图像包装到自己的div中:

function wrapImagesInDiv($content) {
   $pattern = \'/(<img[^>]*class=\\"([^>]*?)\\"[^>]*>)/i\';
   $replacement = \'<div>$1</div>\';
   $content = preg_replace($pattern, $replacement, $content);
   return $content;
}
add_filter(\'the_content\', \'wrapImagesInDiv\');
我认为可以编辑正则表达式,使用{2,}包装多个img标记,但未能使其工作。

有什么想法吗?

Edit

感谢Beee,这可以满足我的需要,但感觉很笨重。欢迎任何改进。

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

1 个回复
SO网友:Beee

这是我用来为每个图像添加包装的函数。我知道这不是你百分之百想要的,但我想这可能会给你一个工作的机会。

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

结束