Add Class to Image Tags and Panel Titles

Nowadays Twitter bootstrap theme has become famous in the Drupal world due to its flexibility for responsive websites. It is very easy to apply responsive CSS to the web page by adding appropriate bootstrap classes. If you are new to the Twitter bootstrap theme, see here http://getbootstrap.com/css/ for more details about classes. Is it easy to add classes to drupal site pages? If yes, what to do to add class to panel title and image tags? Let's come to the heart of the topic.

Adding class to the panel title

Even though it is easy to apply responsive CSS to the web page when comes to the drupal site we need to follow some standard approaches for adding classes. I need to add a class to the panel title in one of my requirements. By sticking with the standard approach for this, I found this hook template_preprocess_panels_pane very useful to add class to panel title. The below code snippet will explain more detail about the usage.

function themename_preprocess_panels_pane(&$variables) {
  $variables['title_attributes_array']['class'][] = 'your class';
}

The above code snippet needs to be written in the theme's template.php file.

Adding class to img tags

Then I need to add class to img tags to make the image responsive as one of my requirements. Similar to the panel, I found this hook template_preprocess_image very useful to achieve this. See the below code snippet to know in detail

function themename_preprocess_image(&$variables) {
  $variables['attributes]['class'][] = 'your class';
}

To add class to img tags which have specific image style

function themename_preprocess_image(&$variables) {
  if ($variables['style_name'] == 'your style name') {
    $variables['attributes']['class'][] = 'your class';
  }
}

Hope this blog helps you.