Help get this topic noticed by sharing it on Twitter, Facebook, or email.

How to make a graphic button in Drupal?

I want to make a button on location on a php file that currently is just a hyperlink.
Currently, the code segment appear in a browser with the text "Donate now", but I want it to be a paypal button instead.

All this is part of a paypal module I have set up in Drupal. I have already figured out the proper way to use a .css file with this module to modify another aspect of it. And now I want to change the textual hyperlink to a paypal button.

The line of code in question looks like this in the paypal_donations_single.tpl.php file:



The hyperlink text appears in the browser as "Donate now". This text appears in the .inc file includes\paypal_donations.admin.inc:

$form[$type_key]['paypal_donations_' . $type_key . '_submit_value'] = array(
'#title' => t('Form submit text'),
'#type' => 'textfield',
'#description' => t('The button text when someone sends the form'),
'#default_value' => variable_get('paypal_donations_' . $type_key . '_submit_value', 'Donate now'),
);

This line of code is of particular interest to me:
'#type' => 'textfield',

Maybe there is an example somewhere that has a graphic as a '#type'.

I have an extensive list of modules already and when I did a grep-style dos/cmd file findstr command I found many examples. The one that looks the most promising is:
'#type' => 'image_button'

and the accompanying code looks like this:
$form['go'] = array(
'#type' => 'image_button',
'#src' => $options['image'],
'#submit' => array('ctools_jump_menu_submit'),
'#attributes' => array(
'class' => array('ctools-jump-menu-button'),
)

based on what I can observe, I assume that all I need to do is change this:

$form[$type_key]['paypal_donations_' . $type_key . '_submit_value'] = array(
'#title' => t('Form submit text'),
'#type' => 'textfield',
'#description' => t('The button text when someone sends the form'),
'#default_value' => variable_get('paypal_donations_' . $type_key . '_submit_value', 'Donate now'),
);

into this:

$form[$type_key]['paypal_donations_' . $type_key . '_submit_value'] = array(
'#title' => t('Form submit text'),
'#type' => 'image_button',
'#src' => $options['image'],
'#description' => t('The button text when someone sends the form'),
'#default_value' => variable_get('paypal_donations_' . $type_key . '_submit_value', 'Donate now'),
);

I only need to figure out how to best assign this '#src" variable. When I looked into the $options settings, the complexity and flexability reached new heights and I think now is a good time to ask for some help online with more experienced Drupal scripters and developers. Perhaps there is an easier way to assign this value a hardcoded path and image name.

I looked around at the code to see how this array $options is used, I could not see where the 'image' part is assined to a graphic.

I need some help, advice, and guidance.

On the chance that I have been going down the wrong direction, I did a grep search on "donation-submit-button" since this is the class name of the html tag I am interested in:


But the only place it appears to be defined is in a .js file:

paypal_donations\js\paypal_donations.js: $(".donation-submit-button").click(function(){
paypal_donations\templates\paypal_donations_recurring.tpl.php:
paypal_donations\templates\paypal_donations_single.tpl.php:

and all that is denotated is the functionality, not the apparance:

//When user click Donate now
$(".donation-submit-button").click(function(){
var post_form = false;
//If any checkbox is checked set true
if($('INPUT:checkbox:checked',$(this).closest('.donation-form')).length > 0)
post_form = true;

//If Other has value set true
if($('INPUT:text',$(this).closest('.donation-form')).val() != '')
post_form = true;

if(post_form){
$(this).closest('.donation-form').submit();
}
else{
alert(Drupal.t('Please enter your donation amount'));
}

Pease help
1 person has
this question
+1
Reply