Bootstrap 3 has css classes for images -- Responsive images . A preprocess function in template.php can be used to add the css class.

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

And "Clear Cache" (admin/config/development/performance).

Responsive Images

The above suggests image styling your thumbs, by making them either round or rounded corner.

However, img-responsive is likely the more practical use for images:

<img src="..." class="img-responsive" alt="Responsive image">

What this does is makes sure that your image does not go beyond its container. Many sites simply apply this to all images, as there is rarely a case where you would want your image to extend beyond its container.

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

Or you can simply add it to the above theme function:

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

And "Clear Cache" (admin/config/development/performance).

Or, this...

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

And "Clear Cache" (admin/config/development/performance).

Or as suggested in the comment below:

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

And "Clear Cache" (admin/config/development/performance).

Comments

Melissamcewen’s picture

Melissamcewen commented

Ah, this works for views too. I wanted a view that displayed my images with that bootstrap class, but I didn't want all the images on my site to have that class, so I used an if with the style

function themename_preprocess_image_style(&$vars) {
     if($vars['style_name'] == 'MYSTYLE'){

        	$vars['attributes']['class'][] = 'img-thumbnail'; // can be 'img-rounded', 'img-circle', or 'img-thumbnail'
        }     
}
laurentiu86stan’s picture

laurentiu86stan commented

I've logged in just to say a big THANK YOU!!! I was really looking for this...you're awesome!

vlooivlerke’s picture

vlooivlerke commented

This does not work with the picture module (Coming in drupal 8 core)

The theme only overrides the "noscript" section, and not the @media responsive images

<noscript><img class="img-thumbnail" src="/files/styles/slideshow_custom_user_mobile_1x/public/img_2635.jpg?itok=LLHzxCQT" width="322" height="215" alt="" /></noscript>

<img width="720" height="480" alt="" title="" src="/files/styles/slideshow_custom_user_desktop_1x/public/img_2635.jpg?itok=YP5MEoy7">

notice the class="img-thumbnail" inside the "noscript" section, but none in the media responsive image

nnmlss’s picture

nnmlss commented

Probably the reason it is not working is because you have width="720" height="480" into the img tag. I have a style with width and height of the image and did not work also, but once I removed them, it works fine. Tested on a Drupal 7, with a custom Bootstrap theme.

Jaya M’s picture

Jaya M commented

With Drupal 8, theme_preprocess_image_style did not work for me, but I could implement the same functionality by implementing theme_preprocess_image.

jasonflaherty’s picture

jasonflaherty commented

I have found that when you are using a sub theme you need to target the parent:

function Bootstrap_preprocess_image(&$vars) {

I also noticed that using:

function Bootstrap_preprocess_image_style(&$vars) {

didn't want to work, however, using:

function Bootstrap_preprocess_image(&$vars) {

does work... not sure why.... anyhow, in the end this is what I used to do a couple different things:

function Bootstrap_preprocess_image(&$vars) {
	if (isset($vars['style_name'])) {
	  if($vars['style_name'] == 'homepage_feature_thumbnail') {
		$vars['attributes']['class'][] = "img-circle";
	  }
	}
	$vars['attributes']['class'][] = "img-responsive";
}

Hope that helps someone!

futuredesignUK’s picture

futuredesignUK commented

Hi,

I have the same problem but targeting the base theme or current theme does not apply a class to all images?

Both functions Below do not work - or if I change the function to theme_name_preprocess_image(&$vars)

Any ideas?

/**
 * Add class="img-responsive" to all theme images
 *  makes sure that your image does not go beyond it's container
 * when you are using a sub theme you need to target the parent eg bootstrap
 */
function bootstrap_preprocess_image(&$vars) 
{
	$vars['attributes']['class'][] = 'img-responsive'; 
	// http://getbootstrap.com/css/#overview-responsive-images
}

function bootstrap_preprocess_image_style(&$vars) 
{
	$vars['attributes']['class'][] = 'img-responsive'; 
	// http://getbootstrap.com/css/#overview-responsive-images
}
rpayanm’s picture

rpayanm
he/him
Primary language Spanish
commented

Put in your template.php file (Drupal 7) or THEMENAME.theme (Drupal 8):

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

or 

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

and then "Clear Cache" (admin/config/development/performance)

It's all.

Greetings.

while(alive){learn();}

futuredesignUK’s picture

futuredesignUK commented

Thanks

Yes as I posted above the code below is in template.php and does not apply the class to any images.

Even if targetting the base theme 'bootstrap' or the sub theme 'subthemename' the hook does not work?



function bootstrap_preprocess_image(&$vars)
{
    $vars['attributes']['class'][] = 'img-responsive';
    // http://getbootstrap.com/css/#overview-responsive-images
}
function bootstrap_preprocess_image_style(&$vars)
{
    $vars['attributes']['class'][] = 'img-responsive';
    // http://getbootstrap.com/css/#overview-responsive-images
}

function subthemename_preprocess_image(&$vars)
{
    $vars['attributes']['class'][] = 'img-responsive';
    // http://getbootstrap.com/css/#overview-responsive-images
}
function subthemename_preprocess_image_style(&$vars)
{
    $vars['attributes']['class'][] = 'img-responsive';
    // http://getbootstrap.com/css/#overview-responsive-images
}
rpayanm’s picture

rpayanm
he/him
Primary language Spanish
commented

Remember "Clear cache" after of include this function in your template.php.

Greetings.

while(alive){learn();}

Infillion’s picture

Infillion commented

I had it working well with a subtheme.
Just be sure to replace the "subthemename" in the function with the actual name of the your subtheme.

wkmit’s picture

wkmit commented

Thanks for the tips

I put the following code into template.php (within bootstrap subtheme folder) and it seems to be working fine.

function {name of bootstrap subtheme}_preprocess_image(&$vars) {
$vars['attributes']['class'][] = "img-responsive";
}

Bowevil’s picture

Bowevil commented

Thanks @wkmit that works great.

Jaber ME’s picture

Jaber ME commented

good it is working for me thnks ;)

Hookset Media’s picture

Hookset Media commented

Thank you for this. It worked in Drupal 8 with only one change. For the theme name, I had to change "Bootstrap" to all lower case "bootstrap" and of course, the image style to my image style.

chrischinchilla’s picture

chrischinchilla commented

Adding to the 'thank you' comments :)

gobnat’s picture

gobnat commented

This works great for images uploaded through the default upload or that are part of the site, but it does not work for images uploaded through wysiwig editors using modules such as IMCE.

Is there a way to have all images everywhere on the site always have an 'img-responsive' class?

Or failing that is there a way to make IMCE add it by default?

hmartens’s picture

hmartens commented

Images loaded within CKeditor using the IMCE image upload does not get the class added. I wonder how one can make it add the class to every image displayed on the site?

Living life in a grande way.

randell’s picture

randell commented

For Drupal 8, this is what worked for me:

<?php
function template_preprocess_image_style(&$variables) {
  if ($variables['style_name'] == 'my_style_name') {
    $variables['image']['#attributes']['class'][] = 'img-circle';
  }
}
?>