0

Could someone point me in the right direction to write the value of a field A to the css classes array of field B?

In my case I'm using a field collection (with text and file/image field, to make a sort of paragraph) and want to make a select field (with 4 preset options) so the node creator can choose if they want the file/image field displayed top, left, or right.

I don't really want to mess around with dynamic views or special formatters, just write the value of my select list to the class of the file/image field wrapper.

1
  • You can do it with JQuery. Just find out the class of the field you want to align and through Jquery define conditional css. Dec 11, 2013 at 19:15

1 Answer 1

2

Here is some sample code to help you further which adds a class on a field (field_image) based on the value of another field (List field of type text) (field_alignment).

You will need to implement 2 preprocess hooks:

  1. On node preprocess to retrieve the objects / values of the fields and add extra datamember which contains the class value
  2. On field preprocess to retrieve the previously added extra datamember and merge it with the default classes_array part of a field
function YOURTHEME_preprocess_node(&$variables) 
{
    if (!isset($variables['field_image']) || !isset($variables['field_alignment'])) {
        return false; // if 1 of both fields is not available, don't do anything
    }

    $alignment = reset($variables['field_alignment']); // retrieve first item of array
    $variables['content']['field_image']['#extra_classes'] = array($alignment['value']); // add an extra datamember containing an array with the value of the other field
}

function YOURTHEME_preprocess_field(&$variables)
{
    $field = $variables['element'];
    if ($field['#field_name'] !== 'field_image') {
        return false; // only manipulate the image field
    }

    if (!isset($field['#extra_classes'])) {
        return false; // don't do anything if the array with extra classes is not available
    }

    $variables['classes_array'] = array_merge(
        $variables['classes_array'], $field['#extra_classes']); // merge the default field classes with the new added class
}

Update - When assigning class to field_image which sits within a field collection (named field_collection)

function YOURTHEME_preprocess_node(&$variables) 
{
    if (!isset($variables['field_collection']) || !isset($variables['field_classes'])) {
        return false; 
    }

    if (!isset($variables['content']['field_collection'])) {
        return false;
    }

    $alignment = reset($variables['field_classes']);
    foreach (element_children($variables['content']['field_collection']) as $index) {
         foreach ($variables['content']['field_collection'][$index]['entity']['field_collection_item'] as &$field_collection_item) {
              if (!isset($field_collection_item['field_image'])) {
                  continue;
              } 

              $field_collection_item['field_image']['#extra_classes'] = array($alignment['value']);
         }
    }
}
8
  • THank you!! This works, but not on fields inside my 'field collection'. Do you know anything about that by chance?
    – petergus
    Dec 13, 2013 at 19:02
  • I've updated the coded with an example when working with a field collection. Dec 14, 2013 at 21:32
  • THank you again! wonderful! :) Got it all working up to the point of setting the #extra_classes and somehow though i can't seem to get the classes_array merger to happen in the preprocess_field... Also, (i guess this is more a php question), i have more than 1 field collection, so ['field_collection'][0] doesnt work. :/ Have to loop or something huh?
    – petergus
    Dec 15, 2013 at 21:42
  • Are you using a reference in the foreach loop when assigning the #extra_classes array value by using the &$field_collection_item syntax (with the & in front? Dec 17, 2013 at 21:49
  • I've update the code when having multiple items in a field collection. Dec 17, 2013 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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