Question

我正在使用Bootstrap 3 Wordpress主题。为了使我的图像响应，我在我的functions.php中使用以下代码向他们添加了Bootstrap的img-responsive类。

＆＃13;

<?php 
 
   function bootstrap_responsive_images( $html ){
  $classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<img.*? class="/', $html) ) {
    $html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
  } else {
    $html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
  }
  // remove dimensions from images,, does not need it!
  $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
  return $html;
}
add_filter( 'the_content','bootstrap_responsive_images',10 );
add_filter( 'post_thumbnail_html', 'bootstrap_responsive_images', 10 );

＆＃13;

这很有效，所有人都得到他们的等级=＆＃34; img-responsive＆＃34;除了画廊里的拇指。他们只有ha = class =＆＃34; attachment-thumbnail或attachment-medium＆＃34;取决于选择的图像大小。

有什么想法吗？

Answer 1

使用相同的CSS引导程序用于.img-responsive并为您的图片库创建一个选择器并将该CSS应用于您的新选择器

添加Bootstrap img-responsive类到Wordpress图像失败，因为图库大拇指

1 个答案: