By Roar-1 on

Hi, I have a couple of images I designed to replace the "Save" and "Delete" buttons on my node edit page.

https://dl.dropbox.com/u/8495276/1304/buttons.png

I studied up on how to replace the default buttons with images like this. However, it appears my code is not entirely correct. 


function MYTHEME_form_alter(&$form, &$form_state, $form_id) {

  if($form_id == 'FORMIWANT') {

    $form['actions']['submit']['#type'] = 'image_button'; 
    $form['actions']['submit']['#src'] = drupal_get_path('theme', 'MYTHEME') . '/images/MYSAVEBUTTON.png'; 
    $form['actions']['submit']['#attributes']['class'][] = 'MYCUSTOMCLASS'; 
}

The code above actually works fine; it replaces the Save button. The problem is when I add the following code which is intended to replace the Delete button: 


    $form['actions']['delete']['#type'] = 'image_button'; 
    $form['actions']['delete']['#src'] = drupal_get_path('theme', 'MYTHEME') . '/images/MYDELETEBUTTON.png'; 
    $form['actions']['delete']['#attributes']['class'][] = 'MYCUSTOMCLASS';

When I add this code, both buttons appear nicely - but they don't function correctly. Specifically, both buttons end up performing the same action. If you click my Save button, it wants to delete the node! :(

If someone could lend a pair of eyes on this to perhaps pinpoint any errors in my code (or perhaps test the code) that would be just super.
Thanks.

⋅ Categories: Drupal 7.x

Comments

duckzland’s picture

duckzland commented

IMO if the image is purely for styling, just use CSS to display the image and hide the text.

Simply because form type submit and form type image_button will handle $form_state differently.

--------------------------------------------------------------------------------------------------------
if you can use drupal why use others?
VicTheme.com

Roar-1’s picture

Roar-1 commented

Thanks duck! Good advice.

Initially I didn't use CSS cause I wasn't sure how to actually hide the button and retain the functionality but after your suggestion; looking into it more I found a nice way to do it via CSS. 


div#edit-actions.form-actions input#edit-submit.form-submit { 

	/* Hide the text */
	text-indent: 100%; 
	white-space: nowrap; 
	overflow: hidden; 

/* Replace with button */
background:url(../images/BUTTON.png) no-repeat 0 0;
	height: 35px;
	width: 78px; 
	border: none;