Galleria fotografica e album fotografici in Drupal
Gli album fotografici e le gallerie fotografiche abbelliscono qualsiasi sito, che si tratti di un blog personale o di un sito aziendale. Le belle fotografie sono ciò che trattiene gli utenti su Facebook, Instagram e altre reti sociali. Quindi, aggiungiamo una galleria fotografica al nostro sito Drupal.
Ti propongo di creare una semplice galleria utilizzando gli effetti di Colorbox. Colorbox è un plugin jQuery e rappresenta una valida alternativa a Thickbox o Lightbox. Colorbox è comodo perché adatta automaticamente le immagini alle dimensioni dello schermo. Questo è molto utile, poiché oggi esistono molti tipi di monitor con diagonali e risoluzioni diverse.
Iniziamo. Ti mostrerò come creare una galleria fotografica in Drupal 7 (il procedimento è simile anche per Drupal 6).
Avremo bisogno dei seguenti moduli:
Colorbox – http://drupal.org/project/colorbox
Libraries API – http://drupal.org/project/libraries
Views – http://drupal.org/project/views
Fields API (in Drupal 7 è incluso nel core, per Drupal 6 è il modulo CCK)
Imagecache – http://drupal.org/project/imagecache
File (in Drupal 7 è incluso nel core, Filefield – per Drupal 6)
Image (in Drupal 7 è incluso nel core, Imagefield – per Drupal 6)
Per Drupal 6 sarĂ inoltre necessario il modulo jQuery Update per aggiornare jQuery alla versione 1.3.2.
Scarica e installa questi moduli.
Ora è necessario scaricare Colorbox stesso. Si scarica separatamente da questo sito:
http://colorpowered.com/colorbox/
Estrai l’archivio di Colorbox e copia la cartella nella directory sites/all/libraries. Se la cartella libraries non esiste, creala e copia lì Colorbox.
Nella cartella libraries dovresti ora avere Colorbox:
Come puoi vedere, ho copiato Colorbox con tutti gli esempi: questo permette di verificare facilmente come funziona.
Se hai seguito correttamente tutti i passaggi, nella pagina di stato del sito dovresti vedere la conferma dell’installazione di Colorbox:
Perfetto! Tutto è pronto e i moduli sono attivati. La preparazione è terminata, passiamo alla creazione della galleria.
Creeremo la galleria sotto forma di album. Aggiungiamo un nuovo tipo di contenuto “Foto album”.
/admin/structure/types/add
Compiliamo i campi richiesti nella pagina:
Ora modifichiamo i campi del nuovo tipo di contenuto nella pagina:
/admin/structure/types
Aggiungiamo un nuovo campo “Fotografie”. Come tipo di dati scegliamo Immagine.
Nelle impostazioni del campo abilitiamo il caricamento multiplo, oppure limitiamo il numero di immagini per album (ad esempio 10).
Salviamo il campo. Il nostro tipo di contenuto “Album” è pronto. Se desideri limitare i permessi per la creazione di album, puoi farlo nella pagina dei permessi utente:
/admin/people/permissions
Creiamo ora un nodo di tipo “Album fotografico”:
/node/add
Compiliamo il titolo, la descrizione dell’album e carichiamo le foto:
Salviamo il nodo.
Al momento, le immagini vengono visualizzate a grandezza originale. Ma ciò che vogliamo è una galleria più elegante. Per questo utilizzeremo il modulo ImageCache.
ImageCache consente di ritagliare, ridimensionare e modificare i colori delle immagini collegate ai nodi — come quelle del nostro album fotografico. Se il modulo è attivo, sarà disponibile una pagina con i preset di immagini. Un preset è una trasformazione predefinita, ad esempio il ritaglio di un’immagine a 100x100 pixel.
Nella pagina di configurazione del sito, trova la sezione dedicata a ImageCache:
admin/config
Clicca su “Aggiungi stile” e inserisci un nome descrittivo, ad esempio per un ridimensionamento a 150x150 puoi chiamarlo scale150x150. Io creerò un preset crop150x150, che ritaglierà le immagini a 150x150 pixel. Aggiungiamo questo effetto:
Impostiamo larghezza e altezza su 150, quindi salviamo l’effetto. Ora il preset crop150x150 sarà disponibile nella pagina di configurazione della visualizzazione del nodo.
Andiamo alla pagina di tutti i tipi di contenuto:
/admin/structure/types
e scegliamo “Gestisci visualizzazione”:
Ora impostiamo la visualizzazione del campo immagine come “Colorbox”:
Continuiamo con la configurazione del campo:
Selezioniamo il parametro “Node image style: crop150x150”, cioè il preset creato in precedenza.
Salviamo le impostazioni.
Ora le immagini vengono visualizzate con l’effetto Colorbox e con dimensioni 150x150 pixel. Mancano solo alcuni ritocchi. Aggiungiamo il seguente codice CSS:
.field-name-field-photos .field-item {
float: left;
margin-bottom: 15px;
margin-right: 15px;
}
Puoi adattare il CSS ai tuoi stili: il nome della classe per il campo immagini potrebbe essere diverso o potresti voler modificare i margini. Ed ecco il risultato finale — un album fotografico come nodo separato:
