1

I have content type with a multi value image field. When adding images is it possible to add a class to some of these images? The mark up I'm trying to achieve is some thing like:

<div class="field-item even">
<div class="field-item odd">
<div class="field-item even">
<div class="field-item odd my-class">
<div class="field-item even my-class">
<div class="field-item odd">

So when creating a new node I would like to add 'my-class' to come of the images. I've looked as Field Formatter modules but these seem to add the class on all items in the field.

1

I think you should use the field preprocess function. You place it in your theme's template.php. You can make it only fire for specific fields, something like this:

    function MY_THEME_preprocess_field(&$variables, $hook) {
      $element = $variables['element'];
      if (isset($element['#field_name'])) {
        // Test to see if matches your field.
        if ($element['#field_name'] == 'field_MY_MULTI_IMAGE_FIELD') { // Add your additional logic here
          $variables['classes_array'][] = 'my-class';
        }
      }
    }

(Adapted from: https://stackoverflow.com/a/7582794/716845)

  • Thanks for the reply. This seems like it can work, what I have done is created a file entity for the image field with a text select list. In this select list I have defined 'full-width' and 'half-width' options. Is it possible to output that logic into the above code? So if a image is uploaded and I select 'Half Width' from the options, that class gets applied to the image. – T Mardi Mar 2 '15 at 11:08
  • What happens if you print the value of $variables (if you have the devel module enabled dpm($variables))? I think the entire node is available there so you could check the setting. – bloke_zero Mar 2 '15 at 15:23
  • Thanks for your help guys. I ended up solving what I needed to do using the Paragraphs module. Rather than adding classes in the template and then positioning with CSS, I set up different Paragraphs bundles to allow site users to display images in different ways. – T Mardi Mar 3 '15 at 22:28
  • Thanks for your help guys. I ended up solving what I needed to do using the Paragraphs module. Rather than adding classes in the template and then positioning with CSS, I set up different Paragraphs bundles to allow site users to display images in different ways. – T Mardi Mar 3 '15 at 22:28
1

You can create a tpl.php file for your image field.

Possible override templates are:

field.tpl.php
field--field-type.tpl.php
field--field-name.tpl.php
field--content-type.tpl.php
field--field-name--content-type.tpl.php

code for field--field-name.tpl.php file as below.

 <?php

/**
 * @file field--field-name.tpl.php
 * Default template implementation to display the value of a field.
 *
 * This file is not used and is here as a starting point for customization only.
 * @see theme_field()
 *
 * Available variables:
 * - $items: An array of field values. Use render() to output them.
 * - $label: The item label.
 * - $label_hidden: Whether the label display is set to 'hidden'.
 * - $classes: String of classes that can be used to style contextually through
 *   CSS. It can be manipulated through the variable $classes_array from
 *   preprocess functions. The default values can be one or more of the
 *   following:
 *   - field: The current template type, i.e., "theming hook".
 *   - field-name-[field_name]: The current field name. For example, if the
 *     field name is "field_description" it would result in
 *     "field-name-field-description".
 *   - field-type-[field_type]: The current field type. For example, if the
 *     field type is "text" it would result in "field-type-text".
 *   - field-label-[label_display]: The current label position. For example, if
 *     the label position is "above" it would result in "field-label-above".
 *
 * Other variables:
 * - $element['#object']: The entity to which the field is attached.
 * - $element['#view_mode']: View mode, e.g. 'full', 'teaser'...
 * - $element['#field_name']: The field name.
 * - $element['#field_type']: The field type.
 * - $element['#field_language']: The field language.
 * - $element['#field_translatable']: Whether the field is translatable or not.
 * - $element['#label_display']: Position of label display, inline, above, or
 *   hidden.
 * - $field_name_css: The css-compatible field name.
 * - $field_type_css: The css-compatible field type.
 * - $classes_array: Array of html class attribute values. It is flattened
 *   into a string within the variable $classes.
 *
 * @see template_preprocess_field()
 * @see theme_field()
 *
 * @ingroup themeable
 */
?>
<!--
THIS FILE IS NOT USED AND IS HERE AS A STARTING POINT FOR CUSTOMIZATION ONLY.
See http://api.drupal.org/api/function/theme_field/7 for details.
After copying this file to your theme's folder and customizing it, remove this
HTML comment.
-->
<div class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php if (!$label_hidden): ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <div class="field-items"<?php print $content_attributes; ?>>
<?php $i = 0; ?>        
<?php foreach ($items as $delta => $item): ?>
<?php $i++; ?>
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?> custom-class-<?php print $i;?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
    <?php endforeach; ?>
  </div>
</div>

For more info check field.tpl.php

To override node.tpl.php check

You can also check this link https://api.drupal.org/api/drupal/includes%21theme.inc/function/template_preprocess/7

  • Thanks for the reply. But it seems that with this approach I cannot control which images from the multi-value field will have the class applied? This will apply the class to all images or images in a set order. I need to be able to select which images have the class applied as I upload them as the class could be applied in any order or none at all. – T Mardi Mar 1 '15 at 13:13
  • you can add your css in the foreach loop – bisw Mar 2 '15 at 6:32
  • <?php $i = 0; ?><?php foreach ($items as $delta => $item): ?> <?php $i++; ?> <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?> customclass-<?php print $i;?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div> <?php endforeach; ?> – bisw Mar 2 '15 at 6:32
  • But this will add it to all field-items? I need to be able to select which field-items have the class when creating a node. – T Mardi Mar 2 '15 at 11:03
  • I have change the code and file name also mention your file name as field--field-name.tpl.php and this you can change class name only for this field for all node. If you want to change the field class for particular content type then create a file like this field--field-name--content-type.tpl.php. – bisw Mar 2 '15 at 11:22

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.