By Mark_L6n on

In a template file, before running the code print render($content['field_image']); I would like to add a CSS class to the image in the $content['field_image'] render array. How can I do this?

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

I think this will work.

<?php
$class = array();
if ( !empty($content['field_image']) ) {
  if ( !empty($content['field_image']['#attributes']) ) {
    if ( !empty($content['field_image']['#attributes']['class']) ) {
      $c = $content['field_image']['#attributes']['class'];
      if ( is_array($c) ) {
        $class = $c;
      }
      else {
         $class = explode(' ', $c);
      }
    }
  }
  $class[] = 'your_class';
  $content['field_image']['#attributes']['class'] = $class;
}
Mark_L6n’s picture

Mark_L6n commented

You would think that'd work, wouldn't you! I did that, and double-checked with debug code that $content['field_image']['#attributes']['class'][0] = 'your_class' exists. However, 'your_class' doesn't get added to any HTML code from that.

nevets’s picture

nevets commented

What's the field type?

Mark_L6n’s picture

Mark_L6n commented

#field_type = image

Mark_L6n’s picture

Mark_L6n commented

Here's the render array after adding the #attributes part:

Array
(
    [#theme] => field
    [#weight] => 2
    [#title] => Image
    [#access] => 1
    [#label_display] => hidden
    [#view_mode] => full
    [#language] => und
    [#field_name] => field_image
    [#field_type] => image
    [#field_translatable] => 1
    [#entity_type] => node
    [#bundle] => ll_basic_page
    [#object] => stdClass Object
    [#items] => Array
        (
            [0] => Array
                (
                    [fid] => 6777
                    [alt] => alt text
                    [title] => 
                    [uid] => 1
                    [filename] => imageFile.jpg
                    [uri] => public://imageFile.jpg
                    [filemime] => image/jpeg
                    [filesize] => 28742
                    [status] => 1
                    [timestamp] => 1314312382
                    [rdf_mapping] => Array
                        (
                        )
                )
        )
    [#formatter] => image
    [0] => Array
        (
            [#theme] => image_formatter
            [#item] => Array
                (
                    [fid] => 6777
                    [alt] => alt text
                    [title] => 
                    [uid] => 1
                    [filename] => imageFile.jpg
                    [uri] => public://imageFile.jpg
                    [filemime] => image/jpeg
                    [filesize] => 28742
                    [status] => 1
                    [timestamp] => 1314312382
                    [rdf_mapping] => Array ()
                )
            [#image_style] => 
            [#path] => 
        )
    [#attributes] => Array
        (
            [class] => Array
                (
                    [0] => your_class
                )
        )
)

And here's the HTML that gets output: 

<div class="field field-name-field-image field-type-image field-label-hidden" thmr="thmr_96">
  <div class="field-items">
    <div class="field-item even">
      <span thmr="thmr_97">
        <span thmr="thmr_98">
          <img typeof="foaf:Image" src="http://..../sites/default/files/imageFile.jpg" alt="alt text" />
        </span>
      </span>
    </div>
  </div>
</div>

Some parts of the render array and HTML don't seem to be correlated: where do the classes come from? <div class="field field-name-field-image field-type-image field-label-hidden" > They don't appear in the render array.

dubs’s picture

dubs commented

For anyone stumbling across this for Drupal 7, you will not be able to apply attributes without overriding a theme function. Attributes are not passed from the render array to the theme image functions. I have proposed a fix for the image module here: -

http://drupal.org/node/1451820

I've also written a blog article about how to work around the problem here.

Mark_L6n’s picture

Mark_L6n commented

Thread moved over to http://drupal.stackexchange.com/questions/10133/how-do-you-add-a-css-cla... . Please post any further comments there. Thanks!

kareldryg’s picture

kareldryg commented

For theme fields, it is necessary to copy a file modules/field/theme/field.tpl.php in a folder templates your theme and to give it a new name according to one of templates:

field - FIELD_TYPE.tpl.php - the template will be applied to all fields of type FIELD_TYPE. For example, that themes all fields of type Image, it is necessary to create a template with a name field - image.php.

field - FIELD_NAME.tpl.php - the template will be applied to a field with name FIELD_NAME. For example, that themes a field with a name field_images, it is necessary to create a template with a name field - field_images.tpl.php.

field - BUNDLE.tpl.php - the template will be applied to all fields added to essence with type BUNDLE. For example, that themes all fields in a type material page, it is necessary to create a template with a name field - page.tpl.php.

field - FIELD_NAME - BUNDLE.tpl.php - the template will be applied only to field FIELD_NAME which is added to essence with type BUNDLE. For example, that themes a field field_images in a type material page, it is necessary to create a template with a name field - field_images - page.tpl.php.

FVANtom’s picture

FVANtom commented

This issue seems fixed in core 7.23

In the node tpl add this at the top:

<?php
$content['field_name'][0]['#item']['attributes']['class'][] = 'your-class';
?>
pamatt’s picture

pamatt
Location Brussels
commented

I can confirm that this works as of Drupal 7.24.

thepaladin’s picture

thepaladin commented

I can confirm that this works as of Drupal 7.26.

oeklesund’s picture

oeklesund commented

On Drupal 7.43, in theme_preprocess_node.

This didn't work:
$variables['content'][FIELD_NAME]['#items'][0]['attributes']['class'][] = 'your-class';
but this worked:
$variables['content'][FIELD_NAME][0]['#options']['attributes']['class'][] = 'your-class';