stampa questa pagina feed di signalkuppe.com/

You are hereInput type image nella search box di Drupal

Input type image nella search box di Drupal

By admin - Posted on 29 October 2009

Spesso per rendere un layout più accattivante conviene utilizzare un input type image al posto del classico bottone del submit, specialmente per la form di ricerca del sito. Drupal di default propone il classico submit per tutte le sue form; vediamo come utilizzare un' immagine per il submit della form di ricerca. Esistono diversi modi, il più pulito forse è quello di modificare la form attraverso un piccolo modulo scritto apposta per questa necessità. Un modulo non è altro che una cartella contenente due files

  • Un file .info con alcune informazioni riguardanti il modulo
  • Un file .module con la logica del modulo

Supponiamo di voler creare un modulo chiamato "cercaimmagine":
la logica del file .module, che in questo caso dovrà chiamarsi cercaimmagine.module è semplicissima

function cercaimmagine_form_alter(&$form, $form_state, $form_id) {
 
 switch ($form_id) {
 
          //  form di ricerca
 
          case 'search_theme_form':
 
           $form['submit']['#type'] = 'image_button';
           $form['submit']['#id'] = 'bottoneaccedi';
           $form['submit']['#attributes'] = array(
 
          // immagine del submit
 
          'src' => base_path().drupal_get_path('theme','miotema').'/img/cerca.png',
          'alt' => t('search')
 
          );
 
        break;  
 
      }
}

Il file cercaimmagine.info serve solo per comunicare a Drupal l'esistenza del modulo stesso

name = cercaimmagine
description = input type image
core = 6.x

Abbiamo utilizzato l'hook form alter per modificare l'output di una form specifica, ovvero quella di ricerca, cambiando la tipologia dell'input submit. Chiaramente è necessario specificare quale immagine utilizzare come bottone di invio della form. In questo caso abbiamo detto a Drupal di utilizzare un'immagine "cerca.png" che risiede nella sottocartella "img" del tema "miotema". L'id della form da modificare lo trovate nel sorgente della pagina sottoforma di id della form

<form action="/" accept-charset="UTF-8" method="post" id="search-theme-form">

Dobbiamo solo ricordarci di cambiare il simbolo "-" con "_". Possiamo quindi utilizzare questo modulo per apportare tutte le modifiche che ci servono alla varie form di Drupal.



Anonymous's picture

non mi visualizza piu nessun bottone di submit di nessuna form del sito, quindi non posso piu loggarmi!

mi da questo errore

* warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'phptemplate_search_theme_form' was given in /home/mhd-01/www.img-dev.com/htdocs/includes/theme.inc on line 656.
* warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'phptemplate_button' was given in /home/mhd-01/www.img-dev.com/htdocs/includes/theme.inc on line 656.
* warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'phptemplate_button' was given in /home/mhd-01/www.img-dev.com/htdocs/includes/theme.inc on line 656.
* warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'phptemplate_button' was given in /home/mhd-01/www.img-dev.com/htdocs/includes/theme.inc on line 656.

Anonymous's picture

It is very interesting article! Regards from Minsk (Belarus)

Post correlati

Una bellissima notizia, non vedo l'ora di provarlo. Ne approfitterò per rilasciare a breve la versione 6 di Marinelli. Lo potete scaricare, come al solito gratuitamente, da qui

Screenshot del nuovo sito meteonetworkHo da poco completato la realizzazione del nuovo portale MetoNetwork basato su Drupal. Il vecchio portale era ormai obsoleto e aveva certamente bisogno di un restyling. Ho usato come base il tema Marinelli...

screenshot del temaAlla fine ho deciso di rilasciare il tema del mio blog per Drupal, anche se con qualche modifica. Ho inserito una terza colonna (opzionale) per arrichirre ulteriormente la struttura e ho migliorato alcuni stili per gestire l'integrazione con Drupal. Alcuni degli elementi più comuni come i meta dei post, i tags, i commenti, sono già stati formattati...

logo drupal e barcamp In occasione del Barcamp di Casalecchio di Reno ho tenuto una presentazione su come sia possibile creare una piccola applicazione web 2.0 con Drupal. Lo scopo era quello di fare vedere che, con un piccolo sforzo, ognuno di noi può farsi "in casa" il proprio sito di social networking senza utilizzare siti esterni che offrono questo servizio. Vogliamo realizzare una piattaforma nella quale ogni utente ha il suo blog...

logo di drupalIn questo breve tutorial vi mosterò come Drupal sia in grado di gestire al meglio le immagini pubblicate su web. Manipolando con relativa semplicità diversi formati della stessa immagine è possibile creare delle applicazione accattivanti in pochi semplici passaggi senza i classici incovenienti che vengono dall'utilizzo di editor WYSIWYG. Vogliamo realizzare un sito di gestione di reportages fotografici il tutto condito da una...

logo drupalUna delle più importanti caratteristiche che un buon CMS deve avere è quella di consentire una separazione tra il tema di amministrazione e quello del frontend. Spesso infatti il tema di presentazione contiene troppi elementi grafici per gestire agevolmente tutti i task che un gestore di contenuti deve svolgere. Un altro requisito...