How to theme a radio button field on node edit form?

Question

The standard way the radio buttons field is rendered on a node add/edit form is that there is a wrapper div with classes:

form-item form-type-radio form-item-mymodule-imglayout-und

and inside there are input and label elements. Where to hook to change this? I would like the wrapper div to have classes:

form-item form-type-radio form-item-mymodule-imglayout-und mycustomclass

And the custom class should be dependent on the option the button represents, or just be sequential: first, second, third, ...etc

Additional info:

My point is to be able to add a distinct big background image to each radio button, depending on the option it represents. Like below - note that each radio button has an associated image, representing its option visually.

Answer 1

I think what you need to do is just altering the form array. You can accomplish this in your own hook_form_alter implementation.

For example:

function YOURMODULE_form_alter(&$form, &$form_state, $form_id) {
    if($form_id == 'YOUR_CONTENT_TYPE_node_form') {
        $form['YOUR_ELEMENT_NAME']['#attributes']['class'][] = 'your-custom-class';
    }
}

Answer 2

Here is a possible solution to this problem which can be implemented in a custom module

function mymodule_preprocess_radio (&$variables) {
  $element = &$variables['element'];
  if ((isset($element['#name'])) && substr($element['#name'],0,18) == 'mymodule_imglayout') {
    $variables['theme_hook_suggestion'] = 'radio__imglayout';
  }
}

function theme_radio__imglayout($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'radio';
  element_set_attributes($element, array('id', 'name', '#return_value' => 'value'));

  if (isset($element['#return_value']) && $element['#value'] !== FALSE && $element['#value'] == $element['#return_value']) {
    $element['#attributes']['checked'] = 'checked';
  }
  _form_set_class($element, array('form-radio'));

  $output = '<input' . drupal_attributes($element['#attributes']) . ' />';
  $id = $element['#id'];
  $mydiv = "<div class = 'imglayout {$id}'></div>";
  return   $mydiv .'<br/>'. $output  ;
}

function mymodule_theme($existing, $type, $theme, $path) {
   return array(
     'radio__imglayout' => array(
       'render element' => 'element',
     ),
  );
}

The $mydiv has a distinct class and is placed before the <input> and <label> elements, so just float it to the left and give each one width and height and a distinct background image - it will be displayed just above the radios (not below as I wanted originally but that's minor).

Answer 3

I accomplished this in the theme layer with the following theme function:

function THEME_form_element($variables) {
  $element = &$variables['element'];

  // This function is invoked as theme wrapper, but the rendered form element
  // may not necessarily have been processed by form_builder().
  $element += array(
    '#title_display' => 'before',
  );

  // Add element #id for #type 'item'.
  if (isset($element['#markup']) && !empty($element['#id'])) {
    $attributes['id'] = $element['#id'];
  }
  // Add element's #type and #name as class to aid with JS/CSS selectors.
  $attributes['class'] = array('form-item');
  if (!empty($element['#type'])) {
    $attributes['class'][] = 'form-type-' . strtr($element['#type'], '_', '-');
  }
  if (!empty($element['#name'])) {
    $attributes['class'][] = 'form-item-' . strtr($element['#name'], array(' ' => '-', '_' => '-', '[' => '-', ']' => ''));
  }
  // Add a class for disabled elements to facilitate cross-browser styling.
  if (!empty($element['#attributes']['disabled'])) {
    $attributes['class'][] = 'form-disabled';
  }
  if (isset($element['#type']) && isset($element['#return_value']) && $element['#type'] == 'radio') {
    $attributes['class'][] = 'form-radio-option-' . drupal_html_class($element['#return_value']);
  }
  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";

  // If #title is not set, we don't display any label or required marker.
  if (!isset($element['#title'])) {
    $element['#title_display'] = 'none';
  }
  $prefix = isset($element['#field_prefix']) ? '<span class="field-prefix">' . $element['#field_prefix'] . '</span> ' : '';
  $suffix = isset($element['#field_suffix']) ? ' <span class="field-suffix">' . $element['#field_suffix'] . '</span>' : '';

  switch ($element['#title_display']) {
    case 'before':
    case 'invisible':
      $output .= ' ' . theme('form_element_label', $variables);
      $output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
      break;

    case 'after':
      $output .= ' ' . $prefix . $element['#children'] . $suffix;
      $output .= ' ' . theme('form_element_label', $variables) . "\n";
      break;

    case 'none':
    case 'attribute':
      // Output no label and no required marker, only the children.
      $output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
      break;
  }

  if (!empty($element['#description'])) {
    $output .= '<div class="description">' . $element['#description'] . "</div>\n";
  }

  $output .= "</div>\n";

  return $output;
}

This overrides theme_form_element, assigning a value-based class to each unique radio element container.