By calum.nobles on

I am posting this more as information, since it took me a while to figure out the best way of doing this.

What I wanted to do was replace the plain 'submit', 'preview' and 'delete' buttons on a content edit form with images. Previously I had done by overriding theme_button and changing the output for certain buttons ... this didn't work so well in Internet Explorer and there were problems with multiple buttons (See http://drupal.org/node/62647.

Drupal 6 introduces the image_button type ... which was clearly a starter. The only real gotcha was that it doesn't work if the #value for a button is set and there are multiple buttons. The fix for that was here: http://drupal.org/node/359529

To change the buttons you need to implement hook_form_alter, play 'find the button' and then:
1. change it's type.
2. Set the #src to the appropriate image
3. Set the #value property to Null so that the image_buttons post properly.

/**
 * Implementation of hook_form_alter().
 */
function thegardenwall_form_alter(&$form, $form_state, $form_id) {
  $img_path = path_to_theme().'/images/buttons/';
  // If there are any buttons then lets alter them
  if ($form['buttons']){
    // Is there a submit button
    if ($form['buttons']['submit']){
      $form['buttons']['submit']['#type'] = 'image_button';
      $form['buttons']['submit']['#value'] = null;
      $form['buttons']['submit']['#src'] = $img_path.'btn_save.gif';
    }
    //return;
    // Is there a delete button
    if ($form['buttons']['delete']){
      $form['buttons']['delete']['#type'] = 'image_button';
      $form['buttons']['delete']['#value'] = null;
      $form['buttons']['delete']['#src'] = $img_path.'btn_delete.gif';
    }
    // Is there a preview button
    if ($form['buttons']['preview']){
      $form['buttons']['preview']['#type'] = 'image_button';
      $form['buttons']['preview']['#value'] = null;
      $form['buttons']['preview']['#src'] = $img_path.'btn_preview.gif';
    }
  }
}
⋅ Categories: Drupal 6.x

Comments

calum.nobles’s picture

calum.nobles commented

It treats it as a form submit no matter which of three buttons I click ... and am at a loss to figure out what I am doing wrong

detot’s picture

detot commented

same problem

alonpeer’s picture

alonpeer commented

Same here.

I also tried playing with #executes_submit_callback but it didn't work so far.

-------------------
Alon Peer
Web development
http://alonpeer.com

Sid_M’s picture

Sid_M commented

Having just fought with this for a while, and not having found clear documentation, I'm adding what seem like the key points for using multiple image_buttons in a form:

1) Do give each image_button a unique #name (unlike regular buttons, you can't have several image_buttons all named op).
2) Don't give an image_button a #default_value.
3) Don't give an image_button a #value
4) Do give each image_button a #return_value. This is the same as what you would assign to #value if IE6 problems hadn't forced Drupal to implement some unusual element handling. If you don't assign this, it will default to true.
5) Do use $form_state['clicked_button']['#value'] to find the #value of, well, the clicked image_button. This field will contain the value of #return_value for the clicked image_button.

CraftySpace.com Better Websites for a Better World

liquidcms’s picture

liquidcms commented

example code is always nice.. :)

i don't get #5 - where do i see $form_state['clicked_button']['#value']?

are you suggesting:

$form['buttons']['submit']['#type'] = 'image_button';
$form['buttons']['submit']['#src'] = path_to_theme() . '/images/btn_submit.png';
$form['buttons']['submit']['#value'] = null;
$form['buttons']['submit']['#name'] = 'save';  
$form['buttons']['submit']['#return_value'] = '????';  
      
$form['buttons']['preview']['#type'] = 'image_button';
$form['buttons']['preview']['#src'] = path_to_theme() . '/images/btn_preview.png';
$form['buttons']['preview']['#value'] = null;  
$form['buttons']['preview']['#name'] = 'preview';  
$form['buttons']['preview']['#return_value'] = '???';
 
$form['buttons']['delete']['#type'] = 'image_button';
$form['buttons']['delete']['#src'] = path_to_theme() . '/images/btn_delete.png';
$form['buttons']['delete']['#value'] = null;  
$form['buttons']['delete']['#name'] = 'delete';     
$form['buttons']['delete']['#return_value'] = '???';

Peter Lindstrom
LiquidCMS - Content Solution Experts

liquidcms’s picture

liquidcms commented

this works:

      unset($form['buttons']['preview']['#value']); // doesn't work without unsettting this !!!
      unset($form['buttons']['submit']['#value']);    
      
      $form['buttons']['submit']['#type'] = 'image_button';
      $form['buttons']['submit']['#title'] = t('submit');  
      $form['buttons']['submit']['#src'] = path_to_theme() . '/images/btn_submit.png';
      $form['buttons']['submit']['#name'] = 'save';  
      
      $form['buttons']['preview']['#type'] = 'image_button';
      $form['buttons']['preview']['#title'] = t('preview');
      $form['buttons']['preview']['#src'] = path_to_theme() . '/images/btn_preview.png';
      $form['buttons']['preview']['#name'] = 'preview';  
      
      if ($form['buttons']['delete']) {  
        unset($form['buttons']['delete']['#value']);
        $form['buttons']['delete']['#type'] = 'image_button';
        $form['buttons']['delete']['#title'] = t('delete');
        $form['buttons']['delete']['#src'] = path_to_theme() . '/images/btn_delete.png';
        $form['buttons']['delete']['#name'] = 'delete'; 
      }

Peter Lindstrom
LiquidCMS - Content Solution Experts

sakiland’s picture

sakiland commented

This also work (with and without define #name key). Also, work with define separate function for each button in key '#submit'. Main thing is to define '#return_value'.

    $form['buttons_line']['7days'] = array (
        '#type' => 'image_button',
        '#return_value' => '7days',
        //'#name' => '7days',
        '#attributes' => array(
        'src' => path_to_theme() . '/button_7days.png',
        'alt' => t('7 days'),
        ),
    );
    $form['buttons_line']['1month'] = array (
        '#type' => 'image_button',
        '#return_value' => '1month',
        //'#name' => '1month',
        '#submit' => array ('check_call_1month'),
        '#attributes' => array(
        'src' => path_to_theme() . '/button_1month.png',
        'alt' => t('1 month'),
        ),
    );
    $form['buttons_line']['3month'] = array (
        '#type' => 'image_button',
        '#return_value' => '3month',
        //'#name' => '3month',
        '#submit' => array ('check_call_3month'),
        '#attributes' => array(
        'src' => path_to_theme() . '/button_3month.png',
        'alt' => t('3 month'),
        ),
    );
    $form['buttons_line']['1year'] = array (
        '#type' => 'image_button',
        '#return_value' => '1year',
        //'#name' => '1year',
        '#submit' => array ('check_call_1year'),
        '#attributes' => array(
        'src' => path_to_theme() . '/button_1year.png',
        'alt' => t('1 year'),
        ),
    );
awm6392’s picture

awm6392 commented

Where do I put this code to edit the button? Do I need to edit the module itself or can this be done in template.php or something similar?