Set a custom CSS class to an image in Drupal 7

Drupal I’m working for a customer to create a Bootstrap 3 theme from scratch, since I’ve to create a kind of portfolio-like page with some thumbnails I needed to apply the Bootstrap’s CSS class img-thumbnail to all the images.

It took some time but the action is possible and take few steps, it assume that you are using a custom image style type to display your image(s):

1. In your template.php file you need to define a new override function like this:

function fancythemename_preprocess_image(&$variables) {
 if (isset($variables['style_name'])) {
  if ($variables['style_name'] == 'fancystylename')
   $variables['attributes']['class'][] = 'img-thumbnail'; //bootstrap class
 }
}

That is,
happy coding!

Advertisements

One thought on “Set a custom CSS class to an image in Drupal 7

Your opinion is important!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s