Skip to main content
knackforge blog knowledge base

Add class to image tags and panel titles

      Nowadays twitter bootstrap theme has become famous among 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 https://getbootstrap.com/css/ for more details about classes. Is it easy to add class to drupal site pages ? If yes, what to do to add class to panel title and image tags ? Lets come to the heart of the topic.

Adding class to panel title

      Eventhough it is easy to apply responsive css to the web page, when comes to drupal site we need to follow some standard approaches for adding classes. I need to add class to panel title in one of my requirements. By sticking with standard approach for this, I found this hook template_preprocess_panels_pane very useful to add class to panel title. 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 need to be written in 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 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 has 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.