Gestire le immagini con Drupal

logo di drupal In 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 piccola fotogallery. Ecco quello che vogliamo ottenere:

http://www.signalkuppe.com/drupal5/praga [1]

Requisiti: per procedere con il tutorial è necessario installare e attivare questi moduli (oltre al core di Drupal)

CCK [2]: permette di creare tipi di contenuti custom

Imagefield [3]: campo aggiuntivo di cck per gestire le immagini

Thickbox [4]: abilita l'effetto pop-up in trasparenza per la visualizzazione delle immagini.

Imagecache [5]: crea e gestisce i formati delle immagini

Upload: consente di allegare file al contenuto. (integrato nel core)

Views [6]: crea liste di contenuti personalizzate (... e molto altro)

Views bonus pack [7]: vedremo in seguito ;)

altri due requisiti importanti

Clean URLs abilitati (admin/settings/clean-urls)

Discreta conoscenza di Drupal e CCK

Se avete problemi con i clean urls consultate la guida sul sito ufficiale [8].

1) Creazione del tipo di contenuto

Per prima cosa dobbiamo creare il nostro contenuto di tipo reportage ( amministra>gestione contenuti>tipi di contenuto>aggiungi ). lasciamo vuoto il campo "corpo", salviamo e aggiungiamo 4 campi:

field_immagine : campo di tipo immagine (richiesto, valori mutlipli)
field_copertina: campo di tipo immagine (richiesto,no valori multipli)
field_estratto: campo di tipo testo, richiesto, 5righe
field_testo: campo di tipo testo, richiesto, 10 righe.

Proviamo ad inviare un reportage ( node/add/reportage ), inserendo 4 immagini nel campo immagine.
A questo punto la pagina risulterà abbastanza sgangherata ma non preoccupatevi, siamo qui per farla diventare bellissima! Manca la parte che gestisce la dimensione delle immagini, ovvero il modulo imagecache.

2) Creazione dei formati delle immagini

Andiamo alla pagina di configurazione del modulo (admin/settings/imagecache). Qui possiamo definire i formati che andremo ad utilizzare. Abbiamo bisogno di 3 formati:

thumbnail: un crop di 100x100px centrato

copertina: uno scale con larghezza max=200px dell'immagine originale

elenco: uno scale con larghezza max=150px da utilizzare nella lista dei reportages.

Per creare un formato basta inserire il nome e cliccare su "create preset" seguendo quindi le istruzioni che ci vengono presentate.

3) Utilizzo dei formati nel tipo di contenuto

Ora che abbiamo definito i formati non ci resta che utilizzarli per le nostre pagine di tipo reportage. Il sistema phptemplate di Drupal ci da una bella mano in questo senso. Definiamo quindi un nuovo template per il nostro tipo di contenuto. Possiamo benissimo clonare il file node.tpl.php rinominandolo come node-reportage.tpl.php modificando la parte contenuta nel div content

  <div class="content">
  <div class="reportages">
   <p> <?php print theme('imagecache2', 'copertina', $field_copertina[0]['filepath']); ?></p>
   <p><?php print $node->field_testo[0]['view'] ?><p>
   <p><strong>Altre immagini</strong>
   <hr />
   <br />
   <div class="miniature">
   <?php foreach ($field_immagine as $image) {
    print theme('imagecache2', 'thumbnail', $image['filepath']);
    }?>
   </div>
   </div>
   </div>

Le immagini vengono stampate dalla funzione

<?php print theme('imagecache2') ?>

La prima volta la funzione stampa il campo copertina utilizzando il formato "copertina" che viene passato come parametro. Nel secondo caso il ciclo permette di stampare tutti i valori del campo immagine (ricordate che poteva avere valori multipli?) nel formato "thumbnail". La domanda che sorge spontanea è:

"Perchè utilizziamo la funzione imagecache2?" Ma soprattutto "dove la definiamo?".

Per comodità ho definito nel file template.php del mio tema due funzioni per imagecache. La prima (imagacache) stampa solamente le immagini, senza il link al formato pieno; la seconda (imagacache2) stampa anche il link al formato pieno che verrà aperto tramite il pop-up di thickbox. Questa distinzione è comoda quando vogliamo presentare le nostre immagini senza link (come ad esempio nella lista dei nostri reportages che vedremo in seguito. Riporto il codice da inserire in template.php del vostro tema.

<?php
// gestione delle immagini
function miotema_imagecache2($namespace, $path, $alt = ' ', $title = ' ', $attributes = NULL) {
$attributes = drupal_attributes($attributes);
$imagecache_path =  file_create_url(file_directory_path() .'/imagecache/'. $namespace .'/'. $path);
return '<a href="'. check_url(file_create_url($path)) .'" class="thickbox img-'.
$namespace .'" rel="immagine">
<img src="'. $imagecache_path .'" alt="'. check_plain($alt) .'"
class="thickbox" title="'. check_plain($title) .'" '. $attributes .' /></a>';
}
function miotema_imagecache($namespace, $path, $alt = ' ', $title = ' ', $attributes = NULL) {
$attributes = drupal_attributes($attributes);
$imagecache_path =  file_create_url(file_directory_path() .'/imagecache/'. $namespace .'/'. $path);
return '<img src="'. $imagecache_path .'" alt="'. check_plain($alt) .'"
class="thickbox" title="'. check_plain($title) .'" '. $attributes .' />';
}
?>

Ricordiamoci di sostituire "miotema" con il nome del tema che stiamo utilizzando, ad esempio "garland". Salviamo il file template.php, visitiamo il nostro reportage per ammirarlo in tutto il suo splendore. Imagacache in pratica ridimensiona "on-the-fly" le nostre immagini. Grazie all'utilizzo della cache questo processo viene effettuato solo la prima volta che visualizziamo i nostri contenuti. Se facessimo un refresh della pagina infatti, noteremo che le immagini sono immediatemente disponibili.

4) Creazione della lista dei reportages

Dopo aver completato il passo3, possiamo divertirci inviando un certo numero di reportages. Quello che manca a questo punto è una pagina che raccolga tutti i nostri reportages, ordinati ad esempio in base alla data di invio. Nell'elenco vogliamo riportare il titolo, l'estratto e la copertina non cliccabile larga 150px. Ecco la pagina che andremo a realizzare.

http://www.signalkuppe.com/drupal5/reportages [9]

E' qui che interviene il modulo views. Creiamo una nuova vista (amministra>views>add). Diamogli prima un nome (es:reportages) e una breve descrizione: apriamo la tendina "pagina" (page) e spuntiamo la casella "Provide Page View". Come View type selezioniamo "List view" e come titolo inseriamo "I miei reportages". Ricordiamoci anche di specificare un url per la pagina che verrà creata, ad esempio "reportages". Poco sotto troviamo la tendina "Fields". In questa sezione dobbiamo specificare i campi che verranno restituiti nella lista. Aggiungiamo quindi:

Node: Title, ovvero il titolo del nostro reportage

Text: estratto (field_estratto), l'estratto del reportage

Image: copertina (field_copertina), la copertina

Potete vedere che il campo "copertina" ci offre come opzioni i formati definiti in imagacache. In questo caso utilizziamo il formato "elenco".

Nel menu "Filtri" specifichiamo i criteri di selezione dei nostri contenuti. L'unica nostra condizione è che i contenuti restituiti dalla vista siano del tipo "reportage", Aggiungiamo quindi il filtro "Node: Type -> is one of -> reportage.
Per specificare l'ordinamento dei contenuti restituiti dalla vista utilizziamo il menu "Sort criteria", inserendo la clausola "Node: Created Time -> descending". (chiaramente è solo un esempio possiamo scegliere quello che più ci aggrada). Salviamo la vista, seguiamo il link e verifichiamo i risultati ottenuti. E' possibile controllare l'html di questa vista, ma questo lo vedremo un'altra volta. Infine possiamo formattare a nostro piacimento l'html che abbiamo inserito nel node-reportage.tpl.php. Nel mio caso ho semplicemente allineato a sinistra le immagini dandogli un bordo di 1px grigio.

.reportages img {
float:left;
padding:4px;
border: 1px solid #CCCCCC;
margin-right:8px;
}

E se volessimo fare una galleria immagini?. Niente di più semplice! Dopo aver letto la prima parte del tutorial potremmo realizzarla in 5 minuti.

http://www.signalkuppe.com/drupal5/gallery [10]

Andrò di fretta perchè ormai siamo bravissimi. Per realizzarla ho semplicemente creato un nuovo contenuto di tipi "foto" costituito da un titolo, un testo e un solo campo immagine. La galleria non è nient'altro che una vista che restituisce il titolo e il campo immagine. Le uniche differenze sono.

View type: grid view (qui interviene il views bonus pack)

campo option del campo immagine settato su "thickbox:elenco"

Il risultato sarà un griglia di miniature cliccabili, con il titolo che ci porta alla scheda completa della foto dove è presente anche la descrizione.

Abbiamo visto uno strumento potente e flessibile per la gestione delle immagini all'interno del nostro portale. Il principale vantaggio di questo metodo è che si ha un controllo totale sui formati delle immagini nelle diverse aree del sito, una caratteristica importante soprattutto in contesti nei quali l'invio delle immagini può essere affidato ad una redazione di persone non esperte di informatica e web.

Aggiornamento gennaio 2008

Visto che molti di voi mi scrivono per i problemi legati al codice php, vi allego un archivio nel quale potete trovare i file richiesti dal tutorial.
Scaricate questo zip! [11]