We use cookies to improve our services and provide a better experience. By continuing to use this site, you agree with our Cookies Policy.

Tutorials
More than 400 step-by-step articles to guide you through online project development.
HomeTutorialsCMS TutorialsDrupal

How to create image submit button

Ubuntu VPS

This tutorial will explain how to make search box to be looking more fancy than usual by putting custom image instead of the button. It might be done by adjusting or implementing style features through CSS. However, here we will show how to achieve this look by editing theme files.

Start with connecting to the hosting service environment. Usually this can be done through built in control panel or FTP client like FileZilla. Once connected, browse through the files and navigate to “themes” directory and find currently enabled theme. Then open it’s folder and locate the file named “template.php”. There we will need to put custom made function which will customize our search box. It looks as follows.

1
2
3
4
5
6
7
8
9
10
11
<?php
function templatename_search_form($form) {
$form['submit']['#theme'] = 'button';
$form['submit']['#button_type'] = 'image';
$form['submit']['#attributes'] = array(
'src' =&gt; '/full/path/to/theme/images/image.png',
'alt' =&gt; t(Search)
);
return form_render($form);
}
?>

Make sure to upload required format image in the defined directory. Then save the file and close it to apply the changes. Generally, it might be enough just to use the mentioned code entry. But there might be incompatibility with Drupal forms API. In this case, we might need to implement another function in the theme file. For this reason, open “template.php” file again and add the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
function templatename_button($element) {
 
if (isset($element['#attributes']['class'])) {
$element['#attributes']['class'] = 'form-'. $element['#button_type'] .' '. $element['#attributes']['class'];
}
else {
$element['#attributes']['class'] = 'form-'. $element['#button_type'];
}
$return_string = '&lt;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']) ." /&gt;\n";;
return $return_string;
}
?>

For now it should be working with Drupal forms API. It’s always nice to add custom looking to our website and learn how to edit core files. For instance, we may try creating styles for other forms liks login, content area, comments, etc.

Ubuntu VPS
Rate this Tutorial:
No Comments Leave a Comment
Leave a Comment

Other (195)

Popular Keywords