10

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 ?

6 Answers 6

4

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

2
  • 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, 2011 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, 2011 at 13:55
4

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);
}
0
4

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);

}
3
  • 1
    Agreed, using a preprocessor is a good way to go here. Since the field preprocessor can be called many times per page, what about using a node preprocessor instead? For a field 'field_images', you can add the classes via $variables['content']['field_images'][$key]['#item']['attributes']['class'][] = [your_css_class].
    – mesch
    May 13, 2015 at 15:52
  • You are right perhaps calling this using a node preprocessor would be more efficient.
    – Duncanmoo
    Aug 31, 2015 at 8:34
  • 1
    This helped me add a property to comply with Schema.org metadata. Thanks!
    – Patrick
    Apr 7, 2016 at 19:04
1

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 }

1

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.

0

A suggestion for this answer.

Change the

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

to

$variables['attributes']['class'][] = $variables['style_name'];

so the image style name is appended to the class array and nothing is inadvertently squashed.

Full snippet:

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']['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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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