How to add a CSS attribute to Image generated with image style

Question

Pretty much all in the title. I would like to add a CSS classes to images generated via a image style theme function, so that the output looks like :

<img class="MYCLASS" alt="" src="site.com/sites/default/files/styles/profile_picture/public/pictures/picture-1-1318455022.jpg" typeof="foaf:Image"> 

Is there anyway to do so ?

Answer 1

If you are comfortable overriding theme functions in your theme's template.php you can just create a YOURTHEME_image_style() function:

http://api.drupal.org/api/drupal/modules--image--image.module/function/theme_image_style/7

Answer 2

Here's some code based on Ryan's answer.

1. Copy and paste the code from theme_image_style to your theme's template.php.
2. replace theme in theme_image_style with your theme's name.

3. add the following lines to the function

     $variables['attributes'] = array(
         'class' => 'my-class',
     );
   

Instead of 'my-class' I wanted to use the actual style's name, so I used $variables['style_name'] instead. Image style names are always valid css class names, so there should be no problem with this approach. The function should look like this:

function MYTHEME_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'];

  $variables['attributes'] = array(
    'class' => $variables['style_name'],
  );

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

Answer 3

I think you want to use this for captions. After much hunting around, use Jquery. This stuff is for Drupal 7.

create your js file. Call it caption.js. You can call it something else. Store it inside your theme somewhere.

Make sure the script gets called by editing your theme.info file and adding scripts[] = pathtoyourfile/caption.js

caption.js should contain the following code

(function ($) {
Drupal.behaviors.caption = {
attach: function(context, settings) {
$('.views-field-field-useimage img').addClass('caption');
  }}})
(jQuery);

Substitute .views-field-field-useimage img for your own selector.

Hit the empty cache button and give it a go.

Answer 4

If the reason you want to add the class is to provide some extra css for the images, then you can circumvent this by going to an upper level in the dom tree. Your images should be included in a field div that has a class like .field-type-image. With this in mind, you can write a selector that picks the images, something like:
div.field-type-image img {border: 1px solid #ccc }

or a more specific one like:

div.field-type-image div.field-items div.field-item img {border: 1px solid #ccc }

Answer 5

If use this function, then Drupal add class but view error "Notice: Undefined index: style_name in template_preprocess_image.." on front page.

I'm paste "_style" and be ok.

function <TEMPLATENAME>_preprocess_image_style(&$variables)  {
    // If this image is of the type 'Staff Photo' then assign additional classes to it:
    if ($variables['style_name'] == 'staff_photo') {
        $variables['attributes']['class'][] = 'lightbox';
        $variables['attributes']['class'][] = 'wideborder';
    }
}