By nhero on

I would like to add a custom button next to each radio button in my form. I know I can do this using jQuery but I thought it would be better to build it into the module itself. Any suggestions would be appreciated.

⋅ Categories: Drupal 6.x

Comments

jaypan’s picture

jaypan
Location Victoria, BC
commented 
function my_module_myform($form_state)
{
  $options = array('yes', 'no', 'maybe');
  $form['container']['radios'] = array
  (
    '#type' => 'radios',
    '#title' => t('Are you a man?'),
    '#options' => $options,
  );
  $form['container']['#theme'] = 'my_custom_theme';
  return $form;
}

function my_module_theme()
{
  return array
  (
    'my_custom_theme' => array
    (
      'arguments' => array
      (
        'form' => NULL,
      ),
    ),
  );
}

function theme_my_custom_theme($form)
{
  // you can access the individual elements of the radios from the $form element and theme them here.
}

Hopefully this can point you in the right direction.

Contact me to contract me for D7 -> D10/11 migrations.

nhero’s picture

nhero commented

Thanks, that makes sense. I am still not quite sure how to manipulate the form inside of theme_my_form. I would like to wrap each radio in a div with an image.

nhero’s picture

nhero commented

I can add a div around the entire radio with this code:

  $output = '';
  $output .= '<div id="foo">';
  $output .= drupal_render($form['fieldset_d']['textfield_d1'] );
  $output .= '</div>';
  $output .= drupal_render($form);
  return $output;

how to I add a div with an image for each radio option?

jaypan’s picture

jaypan
Location Victoria, BC
commented

The first thing to do is figure out what elements you have inside $form inside the theming function. So start off by putting this at the top of your theming function:

die('<pre>' . print_r($form, true) . '</pre>');

This will print the $form array to the screen. You can use this to figure out which elements you should use Drupal render, and where you should put your image tags.

OR, another way you could do it is in your original code, not using the theming function. I'm going off the top of my head, so I don't know how accurate this will be, but it may be something to try:

$options= array('yes' => '<img src="yes.jpg" />', 'no' => '<img src="no.jpg" />', 'maybe' => '<img src="maybe.jpg" />');

Contact me to contract me for D7 -> D10/11 migrations.

nhero’s picture

nhero commented

Thanks for the tips! your code above did the trick.

jaypan’s picture

jaypan
Location Victoria, BC
commented

Which one? The one that outputted the $form data or the one that added the image?

Edit: And no problem - glad to help!

Contact me to contract me for D7 -> D10/11 migrations.

nhero’s picture

nhero commented 
$options= array('yes' => '<img src="yes.jpg" />', 'no' => '<img src="no.jpg" />', 'maybe' => '<img src="maybe.jpg" />');
peteruithoven’s picture

peteruithoven commented

In the spirit of the second way, I'm adding the following example.
It generates radio buttons with images of file entities. So this works for images added using the Media module, even for Media:Flickr etc. 

function continue_form_function($form, &$form_state) {
  $options = array();
 
  $userName = $form_state['object']['name'];
  $currentUser = user_load_by_name($userName);
  
  $query = db_select('node', 'n')
  	->fields('n',array('nid'))
  	->condition('n.uid', $currentUser->uid)
  	->orderBy('n.changed', 'DESC')
  	->range(0, 5);
  $result = $query->execute();
  foreach ($result as $record) {
  	$node = node_load($record->nid);
	  
	  $mainImage = $node->field_main_image['und'][0];
	  $fileObject = file_uri_to_object($mainImage['uri']);
	  // Generate an array for rendering the given file.
	  // use entity_get_info('file') to get exsisting file entity view modes
	  $fileRenderContent = file_view($fileObject,'thumbnail');
	  $fileRendered = drupal_render($fileRenderContent);

	  $optionContent = '';
	  $optionContent .= $fileRendered;
	  $optionContent .= '<h3>'.$node->title.'</h3>';
	  
	  $options[$node->nid] = $optionContent;
	}
  $options['new'] = '<h3>Create new</h3>';
  
  $form['continue'] = array(
    '#type' => 'radios',
    '#title' => t('Continue?'),
    '#default_value' => 'new',
    '#options' => $options,
    '#description' => t('Select which node you want to continue with, or select to create a new one'),
		'#attributes' => array('class' => array('continue')),
  );
  return $form;
}

Hope it's of use for someone.

thatwebguy’s picture

thatwebguy commented

can we make the options as the portion of image or (can we use image map) ?

We can do this in html and css,
http://stackoverflow.com/questions/5096240/using-images-links-to-switch-...

DrCord’s picture

DrCord commented

I had trouble with this in Drupal 7 with the code from Jaypan above that almost worked but needed a little help to work with files that were attached to fields in a taxonomy.

this part wasn't working for me:

$fileObject = file_uri_to_object($mainImage['uri']);
      // Generate an array for rendering the given file.
      // use entity_get_info('file') to get exsisting file entity view modes
      $fileRenderContent = file_view($fileObject,'thumbnail');
      $fileRendered = drupal_render($fileRenderContent);

so I was unable to get the image the above way but using the file['uri'] directly I was able to generate the html directly into the options

$image_style_path = image_style_url('thumbnail', file['uri']);
$imageOptions = array(
  "1" => '<img src="' . $image_style_path  . '" />',
  "2" => 'image URL as html tag',
  "3" => 'image URL as html tag',
  "4" => 'image URL as html tag',
  "5" => 'image URL as html tag',
  "6" => 'image URL as html tag',
);

$form['image'] = array(
'#type' => 'radios',
'#options' => $imageOptions,
'#title' => t('Chose the theme')
);
teachyourselfdrupal’s picture

teachyourselfdrupal commented

It would be better to use theme('image') or theme('image_style') instead of hard coding an image tag. So, something like 

    $options[$some_value] = theme('image_style', array(
        'style_name' => 'your_image_style',
        'path' => $some_object->uri,
        'alt' => $some_object->alt,
        'title' => $some_object->title,
        'attributes' => array(),
      )
    );

You could have initialized $some_object by doing a $some_object = file_load($fid);