I'm trying to associate an image with each radio button in a radio group and not having any luck. I've searched Drupal.org with no luck, actually just found a lot of unanswered variations on my question. Is the way to do this so convoluted that it's been lost to the ages or is this simply not a feature? Could it be added so developers can use this kind of code:

// Create associated options array
$some_num = 3;
for ($i=0; $i<$some_num; $i++) {
  $options[] = array(
    'title' => $i,
    'prefix' => '<div class="radio_image"><img src="/' . $i . '.png" />',
    'suffix' => t('Element ') . $i . '</div>',
  );
}

// Create Drupal "radios" form element
$form['form_name']['element_name'] = array(
  '#type' => 'radios',
  '#title' => t('Title'),
  '#default_value' => 2,
  '#options' => $options,
);

...or something like...

// Create Drupal "radios" form group with unique image/button association
$form['form_name']['element_name'] = array(
  '#type' => 'radios',
  '#title' => t('Title'),
  '#default_value' => 0,
  '#options' => array(t('Item 1'), t('Item 2'), t('Item 3')),
  // Options are each given a unique image
  '#option_prefixes' => array('<img src="item_1.png" />','<img src="item_2.png" />','<img src="item_3.png" />'),
  '#option_suffixes' => array(),
  // Radios grouping is wrapped in div classed 'radios_with_images'
  '#prefix' => '<div class="radios_with_images">',
  '#suffix' => '</div>',
);

What say the folks behind the curtain? Does this already work?

Comments

ashsc’s picture

I found something that works. Unfortunately it *IS* convoluted. At least more so than it seems it should be.

I am trying to style a CCK radio content type. I want each radio to have a unique picture assigned with it. Unfortunately I can't access $form['cck field'] directly and therefor I can't access $form['cck field']['cck field options'] either.

The solution I used was to create a custom module which has its own database table and uses hook_form_alter to add the radio buttons. The radios are *NOT* added with CCK. In this example I create a fieldset to encompass my radio buttons. To do this I needed three files in my module directory; my_module.module, my_module.info, and my_module.install. Here's the code for each file. I used the example_nodeapi.module to make this work...

my_module.module:


<?php
// $Id $

/**
 * Implementation of hook_form_alter().
 */
function my_module_form_alter(&$form, $form_state, $form_id) {
  switch($form_id) {
    case 'cck_content_type_name_node_form': // <- replace 'cck_content_type_name' with the cck content type name
      
      $options = array(
        'Bungles',
        'Bingles',
        'Topnaggles',
        'Bungie',
      );
      
      $form['group_layout'] = array(
        '#type' => 'fieldset',
        '#title' => 'Layout',
        '#collapsible' => false,
        '#collapsed' => false,
        '#weight' => 8,
      );
      
      $node = $form['#node'];
      
      $form['group_layout']['my_module_layout'] = array(
        '#type' => 'radios',
        '#title' => t('Optional Layouts'),
      );
      
      $count = 0;
      foreach ($options as $option) {
        $form['group_layout']['my_module_layout'][$count] = array(
          '#type' => 'radio',
          '#return_value' => $count,
          '#prefix' => '<img src="/image_path/layout_img_' . $count . '.png" alt="" />',
          '#parents' => array('my_module_layout'),
          '#default_value' => isset($node->my_module_layout) ? $node->my_module_layout : 0,
          '#title' => $option,
        );
        
        $count++;
      }
      
      
      break;
    
  }
}


/**
 * Implementation of hook_node_api()
 */
function my_module_nodeapi(&$node, $op, $a3 = null, $a4 = null) {
  switch($op) {
    case 'validate':
      break;
    case 'load':
      // Load data from database
      $layout = db_result(
        db_query('
        SELECT layout
        FROM {my_module}
        WHERE
        nid = %d', $node->nid)
      );
      return array('my_module_layout' => $layout);
      break;
      
    case 'insert':
      db_query('
        INSERT INTO {my_module}
          (nid, layout)
        VALUES
          (%d, %d)', $node->nid, $node->my_module_layout
      );
      break;
      
    case 'update':
      db_query('
        DELETE FROM {my_module}
        WHERE nid = %d', $node->nid
      );
      db_query('
        INSERT INTO {my_module}
          (nid, layout)
        VALUES
          (%d, %d)', $node->nid, $node->my_module_layout
      );
      break;
      
    case 'delete':
      db_query('
        DELETE FROM {my_module}
        WHERE nid = %d', $node->nid
      );
      break;
      
    case 'view':
      // Here is some theming for when the node is viewed by a user. This is not necessary to make the field work.
      $node->content['my_module'] = array(
        //'#value' => $node->my_module_layout, // <- if no theming required
        '#value' => theme('my_module_layout', $node->my_module_layout),
        '#weight' => -1,
      );
      break;
  }
}


/**
 * Implementation of hook_theme()
 */
function my_module_theme() {
  return array(
    'my_module_layout' => array(
      'arguments' => array('layout'),
    ),
  );
}


/**
 * Custom theme function
 * This function is not necessary but allows users to see a styled version of what admins see
 */
function theme_my_module_layout($layout) {
  $options = array(
    'Bungles',
    'Bingles',
    'Bongles',
    'Bangles',
  );
  
  $output = '<div class="my_module">';
  $output .= t('Layout: %layout', array('%layout' => $options[(int) $layout]));
  $output .= '</div>';
  
  return $output;
}

?>

my_module.info:

; $Id$
name = My module
description = "Adds styled radio buttons to CCK node form."
dependencies[] = user
core = 6.x

my_module.install:

<?php
// $Id $

/**
 * Implementation of hook_install()
 */
function my_module_install() {
  drupal_install_schema('my_module');
}


/**
 * Implementation of hook_uninstall()
 */
function my_module_uninstall() {
  drupal_uninstall_schema('my_module');
}


/**
 * Implementation of hook_schema()
 */
function my_module_schema() {
  $schema['my_module'] = array(
    'fields' => array(
      'nid' => array(
        'type' => 'int',
        'unsigned' => true,
        'not null' => true,
        'default' => 0,
      ),
      'layout' => array(
        'type' => 'int',
        'unsigned' => true,
        'not null' => true,
        'default' => 0,
      ),
    ),
    'primary key' => array('nid'),
  );
  
  return $schema;
}

/**
 * Update function
 */
function my_module_update_1() {
  return array('my_module');
}

?>

So, lots of code to make this work. Seems like it would be easier (at least from a Drupal site developer's standpoint) to have something like what's mentioned in my question. Maybe D7 will have this?

sun’s picture

Status: Active » Closed (duplicate)

This is possible in D7 now.

MvdVelde’s picture

Maybe the solution for Drupal 6 can be found in: http://drupal.org/node/772446

bel.inna’s picture

Please, explain, how do this in D7?

Karthick_s’s picture

in D7 if you want to add img it is available in field settings itself