E rieccoci con un nuovo tutorial su Drupal! in questo tutorial vi spiegherò come implementare Imagecache e lightbox2 all’interno di Drupal 6, e usarlo molto facilmente.
Inoltre, vi farò vedere come associarlo a un nodo liscio, senza altri moduli associati.
Che moduli ci servono?
I moduli che ci servono sono 4, andiamoli a vedere:
- FileField (con questo modulo daremo a drupal la possibilità di creare dei campi custom per poter inserire dei file)
- ImageField (con questo modulo invece diamo la possibilità al modulo precedente di poter “uploadare” anche le immagini)
- ImageCache ( con questo modulo possiamo definire la grandezza e la lunghezza di default delle immagini inserite in un nodo di un determinato content-type)
- lightbox2 (questo è semplicemente lo script lightbox2 per drupal. Ottimo associato a imagecache)
NB: Per poter installare questi moduli dovete aver già installato i seguenti moduli: CCK e ctools, necessari per una corretta installazione e manutenzione del i moduli sopracitatitati
Installiamo i moduli necessari
Come al solito, andiamo nella nostra cartella: ilnostrosito.it/sites/all/modules ed inseriamo i moduli appena scaricati.
Finito il trasferimento dei file, possiamo andare ad attivarli, andando nella pagina “moduli” (ilnostrosito.it/admin/build/modules) del nostro sito e installiamoli! per poter installare un modulo, dovete “flaggare” il il quadratino vicino al nome del modulo.
Vorrei soffermarmi un attimo su imagecache, come potete vedere dall’immagine sotto, ha molti sottomoduli, che fanno le più disparate cose, per un uso molto basilare e semplice vi occorrerà installare sicuramente ImageCache UI, ovviamente Imagecache e ImageAPI.
Incominciamo!
Ok, Incominciamo!
Per spiegare al meglio il procedimento, vi faccio un esempio. Nel nostro nodo, dobbiamo inserire un’immagine che faccia da testata, con le dimensioni di 300×600.
Ma purtroppo le nostre immagini sono grandi il doppio, come fare? possiamo sistemare le dimensioni con photoshop o un altro programma per modificare le imagini, o possiamo lascare fare tutto a Drupal…
Incominceremo con imagecache per delineare le dimensioni che deve avere l’immagine all’interno del nodo. Andiamo sulla pagina di imagecache che si trova al seguente link “ilvostrosito.it/admin/build/imagecache” e vi troverete davanti a questa pagina:
Per creare un nuovo “preset” dobbiamo semplicemente cliccare su “Add New Preset” presente nella schermata.
in questa pagina dobbiamo inserire il nome del preset, che nel nostro caso sarà 300×600 (vi consiglio di chiamare il preset con le dimensioni dell’immagine. Io utilizzo questo metodo da parecchi anni e posso assicurare che, dopo aver inserito tanti preset, è molto semplice da ritrovare.)
Dopo aver inserito il nome, e cliccato su “Create new preset”. Ci troveremo davanti a questa schermata, contenente diverse opzioni da dare alle nostre immagini e un’anteprima delle opzioni apportate nel preset.
A noi, visto che dobbiamo modificare le dimensioni delle immagini, interessa Add Scale And Crop e clicchiamo su di essa.
Arrivati in questa nuova schermata possiamo notare che possiamo inserire le dimensioni sia in percentuali (es: possiamo definire che l’immagine che inseriremo, avrà il 50% di altezza e di larghezza all’interno del nodo) o in pixel, a noi serve la seconda opzione, quindi mettiamo tranquillamente 300 per l’altezza e 600 per la laghezza.
dopo aver inserito i px possiamo cliccare su Add action.
Finito! ora possiamo andare ad associarlo al nodo e integrarlo a lightbox!
NB: Ovviamente voi potete inserite tutte le Azioni che volete all’interno del vostro preset, per esempio togliere la saturazione, inserire un testo all’interno dell’immagine di default…
Associamolo al Nodo e integriamo lightbox!
Dopo aver creato un nuovo campo immagine nel nostro content type, (ne ho parlato nell’articolo precedente) possiamo andare in questa pagina “ilvostrosito.it/admin/content/node-type/vostrocontenttype/display”.
In questa pagina potete vedere diverse opzioni, tra cui:
- Label: inserisce una etichetta sopra ogni immagine che inserirete all’interno del vostro nodo, e potete scegliere se visualizzarlo sopra, di fianco e toglierlo dal nodo.
- Teaser: in questo campo, potete decidere di inserire il preset anche per l’anteprima dell’articolo presente in homepage.
- Exclude: in questo campo potete decidere se far vedere o meno il campo, nel nostro caso il campo immagine all’interno dell’anteprima o all’interno del nodo stesso.
- Full node: l’opzione che interezza a noi!
Infatti da questa opzione, selezionando la tendina, possiamo definire come visualizzare il campo immagine.
Per associare il nodo solamente con imagecache, dobbiamo trovare l’opzione “300×600 image“, invece se vogliamo associare il nodo a imagecache associato a lightbox scegliamo, come nell’immagine sopra “lightbox2: 300×600 –> original.”
Spieghiamo un attimo questa opzione. In questo modo, ogni volta che inserirete una qualsiasi immagine, nel nodo apparirà un’immagine di 300×600 pixel, e cliccandoci sopra, apparirà un pop-up con l’immagine originale.
Finito! non è stato molto difficile, no? 😉
Come al solito, per qualsiasi dubbio o domanda lasciate pure un commento!
