使用background-image(preg_replace)将IMG转换为div

时间:2014-05-01 23:13:33

标签: php wordpress image preg-replace src

我正在尝试一些东西,但由于我不熟悉PHP,所以感觉就像在随机墙上砸我的脑袋一样。

我需要改变图像标签的输出。我想用背景图像替换div的img标签,以达到这种效果。

我正在使用functions.php中的这个函数。这只需要完整的图像代码并将其输出到背景图像网址中。我需要提取SRC。

function turnItIntoDiv( $content ) {

// A regular expression of what to look for.
   $pattern = '/(<img([^>]*)>)/i';
// What to replace it with. $1 refers to the content in the first 'capture group', in parentheses above
   $replacement = '<div class="full-image" style="background-image: url("$1")"></div>';

// run preg_replace() on the $content
   $content = preg_replace( $pattern, $replacement, $content );

// return the processed content

   return $content;
}

add_filter( 'the_content', 'turnItIntoDiv' );

提前谢谢大家

1 个答案:

答案 0 :(得分:1)

也许它可以很好地拆分。

if (preg_match("/img/i",$content))
{
    ..
    $pattern = '/src="([^"]+)"/i';   
    ..

然后您将获得确切的文件名。应该设置div的高度。

整个代码 - 匹配所有图片:

if (preg_match("/img/i",$content))
{
  if (preg_match_all('/src[ ]?=[ ]?"([^"]+)"/i',$content,$matches))
  { 
    foreach ($matches[1] as $i => $match)
    {
       $replacement = '<div class="full-image" style="background-image: url(\'' . trim($match) . '\')"></div>';

        $content = preg_replace("~(<img(.*){$matches[0][$i]}[^>]+>)~i",$replacement,$content);
     }
  }
}

!必须设置div高度