1

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.

2 Answers 2

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.

1
  • THanks @David Thomas, Your solution satisfy my requirement. Jun 23, 2013 at 14:28
1

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.

3
  • 1
    Thanks @Cornelius Black, I am little comfortable with the jQuery, but the requirement is I need to do this in the Drupal way. Jun 23, 2013 at 14:29
  • this is certainly the Drupal way, here you are using the Drupal object, and the behaviors are attached automatically every time the page loads, even when you load it via ajax Jun 23, 2013 at 21:57
  • 1
    Hi @Cornelius Black, Understood. I accept the attachBehavior Drupal technic. But I was looking for an approach through the template.php. Sorry, I have not mentioned this in my question clearly. Jun 24, 2013 at 1:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.