添加Bootstrap图片CSS类到图片

Bootstrap 3 为图片设有CSS类-- http://v3.bootcss.com/css/#images .drupal中template.php中一个预处理函数可以被用来添加CSS类

<?php
/**
*
*/
function THEMENAME_preprocess_image_style(&$vars) {
        $vars['attributes']['class'][] = 'img-thumbnail'; // can be 'img-rounded', 'img-circle', or 'img-thumbnail'
}
?>

响应式图片

上面的建议是为你的缩略图定制样式, 既可以使他们是圆又可以是圆角。

<img src="https://cn4jd.com/..." class="img-responsive" alt="Responsive image">

这样做是为了确保你的图片并没有超出它的容器,很多网站就简单的应用这个样式到所有图片,因为很少有情况,你想你的图片来超出它的包裹容器。

<style>
img {max-width: 100%; height: auto;}
</style>

或你可以简单添加到上述主题函数

<?php
/**
*
*/
function THEMENAME_preprocess_image_style(&$vars) {
        $vars['attributes']['class'][] = 'img-responsive'; // http://getbootstrap.com/css/#overview-responsive-images
}
?>

或这样...

<?php
function THEME_preprocess_field(&$variables) {
    if($variables['element']['#field_name'] == 'field_photo'){
        foreach($variables['items'] as $key => $item){
            $variables['items'][ $key ]['#item']['attributes']['class'][] = 'img-responsive'; // http://getbootstrap.com/css/#overview-responsive-images
        }
    }
}
?>

或用评论中建议的:

<?php
function THEME_preprocess_image_style(&$vars) {
     if($vars['style_name'] == 'MYSTYLE'){
            $vars['attributes']['class'][] = 'img-responsive'; // http://getbootstrap.com/css/#overview-responsive-images
        }
}
?>

添加新评论