How do I add classes to an img tag inside the node?

Question

I want to add classes to the image that is getting displayed only inside the node. I want to do it in the Drupal way.

Here is the img tag HTML.

<img typeof="foaf:Image" src="../image/imagefield_98F1iQ.png" width="220" height="78" alt="Capto cui esca" title="Damnum duis eum">

I want to add the classes like the below

<img class="medium img-polaroid" typeof="foaf:Image" src="../image/imagefield_98F1iQ.png" width="220" height="78" alt="Capto cui esca" title="Damnum duis eum">

I just want to add "medium img-polaroid" like class to the img field.

Answer 1

You can do it server side by overriding theme_image_style

e.g, in template.php

/**
 * Theme override
 * 
 * Add custom class to image styles
 */
function MY_THEME_image_style($variables) {
  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'],
    'height' => $variables['height'],
  );

  image_style_transform_dimensions($variables['style_name'], $dimensions);

  $variables['width'] = $dimensions['width'];
  $variables['height'] = $dimensions['height'];

  // Determine the URL for the styled image.
  $variables['path'] = image_style_url($variables['style_name'], $variables['path']);

  /* Begin custom snippet */
  // Add or append custom classes, to avoid clobbering existing
  if (isset($variables['attributes']['class'])) {
    $variables['attributes']['class'] += array('my-class', $variables['style_name']);
  }else{
    $variables['attributes']['class'] = array('my-class', $variables['style_name']);
  }
  /* End custom snippet */
  return theme('image', $variables);
}

Note: This is just a clone of theme_image_style with the custom classes added at the end.

You can add some conditional logic based on style_name for specific classes, and also do a similar thing with theme_image if needed.

Answer 2

you could preprocess the content in the template, but it would be a little difficult, or you could do it via attachBehaviors in jQuery.

If you mind the jQuery way you can add this script:

(function($) {
  Drupal.behaviors.classadd = {
    attach: function(){
      $('.node img').addClass('class1 class2 class3');
    }
  }
}

This way you can easily add classes to your node with .node class. even when you load content dinamicly via ajax. the attachBehavior is a useful Drupal technic to attach actions to your content, and it's widely implemented in all the Drupal framework.