Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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 ?

share|improve this question
add comment

5 Answers

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

share|improve this answer
    
Well i have to say theme function are still very blury for me right now. Would you by anychance have some link to resources that could clarify that ? –  silkAdmin Oct 16 '11 at 15:43
    
So the idea is to copy the code on the linked page into your theme's template.php file (if your theme doesn't have one, make it) then change the word "theme" in theme_image_style to the name of your theme, which might be zen_image_style or garland_image_style, etc. –  Ryan Price Oct 17 '11 at 13:55
add comment

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);
}
share|improve this answer
    
very helpful - thank you. –  squarecandy Dec 7 '12 at 3:07
add comment

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.

share|improve this answer
add comment

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 }

share|improve this answer
add comment

Use preprocess function

You want that class on the actual image, adding through JS/jQuery is messy and breaks if content is ajax loaded.

function THEMENAME_preprocess_field(&$variables) {


    if($variables['element']['#field_name'] == 'field_photo'){

        foreach($variables['items'] as $key => $item){

            $variables['items'][ $key ]['#item']['attributes']['class'][] = 'img-circle';

        }

    }

}

Why I don't use theme_image_style() for this

The issue with doing this through theme_image_style() is that it overrides the output function for just one field, what if you have multiple fields in different places... too many THEME_field__field_photo__team($variables) achieving the same as the above using theme_image_style() would look like this:

// Override the field 'field_photo' on the content type 'team'
function THEMENAME_field__field_photo__team($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['img-circle'],
    );

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

}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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