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

logo del sito lagruba.comOnline il nuovo sito realizzato per l'amico Alberto che ha aperto da poco questo bellissimo Dortoir poco sopra Gaby nella valle di Gressoney. Le esigenze di Alberto erano diverse: voleva certamente valorizzare la struttura, ma anche raccontare la storia di questo luogo ed evidenziare le possibili escursioni praticabili nella valle. Lo studio del sito ha seguito 5 fasi...

Logo Regione LombardiaE' stato rilasciato il nuovo portale della Regione Lombardia. In Plurimedia ho avuto il compito di realizzare i template xhtml a partire da mockup psd forniti da una società esterna. In tutto ho sviluppato 23 templates XHTML integrati in seguito sul CMS incaricato di gestire la...

screenshot del temaMarinelli arriva alla versione 2.0. Ho apportato miglioramenti poco appariscenti ma di grande impatto sulla possibilità di personalizzazione e gestione del tema. Il css principale è stato scomposto in 4 css distinti ( layout.css, graphics.css, links.css, typography.css). Ogni css è stato rivisto e ottimizzato per evitare dichiarazioni ridondanti o superflue. In particolare ho riscritto la tipografia e la...

logo flickrDa un po di tempo il codice del badge di flickr stampa un'immagine vuota di 1px per 1px prima delle solite anteprime. Avendo definito le dimensioni delle immagini nel css, la nuova immagine rompe l'allineamento delle miniature. Per ovviare al problema ho utilizzato jquery per rimuovere solamente il tag img interessato.

logo di fancyboxStavo cercando una reale alternativa a lightbox da integrare in Drupal. Lightbox infatti è abbastanza pesante e la configurazione non è proprio banale. Ho trovato un nuovo script basato su jQuery (Fancybox) e ne sono rimasto entusiasta. La grafica a mio avviso è molto più curata rispetto a lightbox e l'integrazione in Drupal non presenta alcun problema visto che il CMS integra nativamente jQuery.
...

screenshot del sottotema giordaniViste le richieste di diversi utenti, ho aggiornato il tema aggiungendo due sottotemi. Il primo, "Giordani" consente di avere il contenuto al centro e le due sidebar ai lati mentre il secondo, "Gnifetti" posiziona il contenuto a destra lasciando le due sidebar sulla sinistra. Sto lavorando anche ad un terzo sottotema che trasformerà il layout da fisso a liquido in modo da garantire la massima flessibilità. Grazie...