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 http://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