Tematizzazione di Views: modifica dei template view.tpl.php (campi, righe, blocchi, pagine). Integrazione del plugin jQuery EasySlider
In questo articolo analizzeremo il costruttore di query per Drupal — il modulo Views (http://drupal.org/project/views). Views consente di visualizzare campi di diversi tipi di contenuti, commenti, termini, informazioni sugli utenti e altri dati dal database. Inoltre, questo modulo dispone di un’interfaccia grafica che permette di creare facilmente query al database con il mouse.
Attenzione! Se vuoi utilizzare EasySlider subito, ti consiglio di installare il modulo dedicato. Questo articolo è pensato principalmente per capire il funzionamento dei template di Views e la loro tematizzazione. Per configurare correttamente l’aspetto di EasySlider dovrai comunque modificare il CSS.
Dopo aver configurato i campi necessari, bisogna disporli come desideriamo. Per farlo, si utilizzano i file di template di output. Per impostazione predefinita, i template si trovano nella cartella del tema.
Impostiamo ora il plugin jQuery EasySlider per i dati visualizzati tramite il modulo Views. Esiste già un modulo pronto per l’integrazione di EasySlider con Views — puoi trovarlo qui: http://drupal.org/project/easySlider.
Se desideri semplicemente visualizzare le immagini come slider, puoi installare quel modulo e il gioco è fatto. Tuttavia, in questo articolo impareremo a lavorare manualmente con i template di Views.
Per iniziare, dobbiamo installare i moduli Views, CCK e ImageCache, oltre a scaricare i file del plugin EasySlider da qui o da altri siti. Successivamente vedremo come installare il plugin nel tema di Drupal, ma prima configureremo i campi CCK.
I moduli sono pronti, iniziamo:
1. Creiamo un nuovo tipo di contenuto.
Aggiungiamo un campo per il caricamento delle immagini e salviamo. Possiamo anche spostare il campo più in alto nell’ordine di visualizzazione.
Impostiamo un numero illimitato di immagini e aggiungiamo anche una descrizione per ciascuna immagine.
2. Creiamo un nodo (contenuto) del tipo “Banner” e carichiamo un paio di immagini da utilizzare nello slider.
3. Creiamo un preset per le immagini che vogliamo visualizzare. Nel mio caso sarà di 200x200 pixel, ma puoi impostare qualsiasi dimensione.
Aggiungiamo un effetto di ridimensionamento e ritaglio (“Scale and crop”) con le dimensioni desiderate:
4. Ora siamo pronti a mostrare le immagini tramite Views in un blocco.
Creiamo una nuova vista (view):
Aggiungiamo il campo “Immagini”:
Nelle impostazioni, disattiviamo la raggruppazione dei valori, rimuoviamo il titolo del campo e impostiamo il preset di immagine creato in precedenza.
Nei filtri impostiamo:
Contenuto: Pubblicato – Sì
Contenuto: Tipo – Banner
In “Basic settings” impostiamo:
Style: HTML List
Aggiungiamo una visualizzazione in blocco.
Nel preview dovrebbero apparire le immagini del banner.
5. Aggiungiamo il blocco della view in una regione del tema e verifichiamo il risultato.
Non sembra ancora uno slider. Procediamo con l’installazione di EasySlider.
6. Estraiamo il file easySlider1_5.zip. Nella cartella del plugin troveremo esempi di funzionamento; useremo il secondo esempio (2.html). Copiamo il CSS nel file style.css del nostro tema e le immagini nella cartella images del tema.
Il file easySlider1.5.js si trova nella cartella js del plugin — copiamolo nella cartella js del nostro tema. Per collegarlo, modifichiamo il file nome_tema.info aggiungendo la riga corrispondente. Dopo aver svuotato la cache, il file JS sarà collegato:
Aprendo il file JS, troverai le istruzioni sulla struttura HTML necessaria per far funzionare lo slider.
Ora analizziamo il nostro blocco con strumenti come Firebug (Firefox), Dragonfly (Opera) o DOM Inspector (Chrome). Io uso Firebug, perché è il più comodo.
Come si vede, Views ha aggiunto molti div superflui. Per far funzionare lo slider, dobbiamo eliminarli.
8. Torniamo alla nostra view e clicchiamo su “Theme: Information”. Apparirà un elenco di template che possiamo modificare.
I template in grassetto sono quelli utilizzati di default, situati nella cartella theme del modulo Views. Accanto a ciascuno è mostrato il nome del file che possiamo creare per sovrascrivere il template. Ad esempio: views-view-fields--view-banner.tpl.php.
Apriamo il file views-view-fields.tpl.php per capire la struttura:
Il contenuto è racchiuso in un ciclo foreach che itera su ogni campo. I separatori ($field->separator) non ci servono, quindi li rimuoviamo, ma in un file personalizzato per la nostra view: views-view-fields--view-banner.tpl.php, da salvare nella cartella del tema. Rimuoviamo anche $field->label e i div generati da $field->inline_html.
Dopo aver pulito il codice, aggiorniamo la cache e ispezioniamo il risultato:
Ora i tag <li> sono più vicini alle immagini. Eliminiamo anche i tag span inutili:
Dopo le modifiche, il codice risulta molto più pulito:
Ora tutto appare meglio. Passiamo a un altro template per rimuovere ulteriori div:
<div class="view-content"><div class="item-list">
Creiamo il file views-view--view-banner.tpl.php nella cartella del tema e copiamo il contenuto da views-view.tpl.php. In questo file possiamo mantenere solo le sezioni necessarie (header, contenuto, footer, ecc.).
Rimuoviamo anche il blocco <div class="item-list"></div> creando il file views-view-list--view-banner.tpl.php.
Per eliminare gli ultimi div superflui, modifichiamo il file block.tpl.php del tema (copialo dal modulo Block se non esiste) e aggiungiamo un contenitore con id="slider" tramite una condizione if basata su $block->delta:
Nel mio caso, la variabile del blocco banner è questa:
Dopo aver svuotato la cache, la pagina dovrebbe apparire così:
Come si vede, la struttura HTML è corretta: <div id="slider"> → <ul> → <li>.
Ora aggiungiamo un breve script JavaScript per inizializzare lo slider:
Il codice JS può essere aggiunto direttamente nel file page.tpl.php oppure in un file separato, ad esempio js/custom.js.
Il risultato: EasySlider funzionerà correttamente. Ti rimarrà solo da regolare il CSS per perfezionare l’aspetto.
Naturalmente, nella maggior parte dei casi è più comodo utilizzare un modulo già pronto per gli slider o le gallerie. Tuttavia, se non esiste un modulo per il plugin jQuery che vuoi usare, ora sai come integrarlo manualmente nel tuo tema Drupal.