Adding Image Submit Buttons in Drupal 5

Adding a image submit button to your Drupal forms isn’t really as hard as you would think or as some people try to make it. The first time we tried to do this we Googled it and found only one post that had any good information about how to go about it. So here is a method that I think is easy and hopefully will be well explained.

To start with all of the following code will go into you template.php file. The first thing we will do is use the following code to intercept the output of the form elements. Basically all this is doing is checking to see if someone is using the button-type attribute of image. Since this isn’t built into Drupal 5 this function just adds that ability. So add the block of code to your template.php file which should be in your “sites/all/themes/” directory under the theme that you are currently using.

The following section of code goes in your template.php file and was taken directly from here.

function phptemplate_button($element) {
  // following lines are copied directly from form.inc core file:
 
  //Make sure not to overwrite classes
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
  }
  else {
    $element['#attributes']['class'] = 'form-'. $element['#button_type'];
  }
 
  // here the novelty begins: check if #button_type is normal submit button or image button
  $return_string = '
<input />
  if ($element['#button_type'] == 'image') {
    $return_string .= 'type="image" ';
  }
  else {
    $return_string .= 'type="submit" ';
  }
  $return_string .= (empty($element['#name']) ? '' : 'name="'. $element['#name'] .'" ') .'value="'. check_plain($element['#value']) .'" '. drupal_attributes($element['#attributes']) ." />\n";;
  return $return_string;
}

The next thing that we want to do is actually override our block form. I assume this could probably be done with hook_form_alter but this way keeps everything in the template and saves you from writing a module just to run one hook, or adding it to another module. Basically what this does it gets the form that the simplenews_block_form uses and then alters it before it displays it. Lets look at what each of these lines does. The first line is going to set the button_type attribute to image. This will make sure that the above override function will see it as an button and change the type to image. Next we have an array of attributes which will set the src and the alt tags. Normally you could use the attributes array to set the title and whatnot of a form item. So this is kind of just adding in the extra information for an image button with some trickery. Last, but not least, is drupal_render_form(’simplenews_block_form’, $form), this is an Drupal api function that takes two arguments. The first argument is the form_id and the second is the form that you have updated.

function custom_simplenews_block_form($form) {
	$form['submit']['#button_type'] = 'image';
	$form['submit']['#attributes'] = array(
			'src' => '/misc/join-now.gif',
			'alt' => 'Join Now!'
		);
  return drupal_render_form('simplenews_block_form', $form);
}

Now your simplenews block will have an image button. The point of this is not just to be able to change the simplenews block but for you to be able to override and them the submit button of any form. All you really need to know is the form_id for the form. If you substitute your form_id for everyplace that I have “simplenews_block_form” then you should have an image submit button!