Una bella Gallery facile direttamente in un nodo

Inviato da kipper il Mer, 12/10/2011 - 16:41

Moduli:
cck
semantic_cck
ImageField
ImageCache
Lightbox2

1. Creiamo un preset > "miniatura_cck_gallery" con imagecache scegliendo "Image Resize" es. 150x100px
2. Creare un nuovo Content Type > Gallery (/admin/content/node-type/gallery) ed escludere il campo "body" lasciando il textarea in "Body field label" vuoto
3. In Manage field (/admin/content/node-type/gallery/fields) creare/aggiungere un campo per l'upload delle immagini "nome: field_immagine - Type:File Operations:Image
4. In configurazione del campo (/admin/content/node-type/gallery/fields/field_immagine) lasciare "vuota" la textarea "Permitted upload file extensions" in modo di poter caricare qualsiasi tipo di file senza preoccuparsi più di tanto e in "Number of values" selezionare "Unlimited"
5. Sempre in questa schermata, se abbiamo attivato il modulo "semantic_cck", sotto "Semantic CCK settings" spuntiamo "Use semantic HTML for field output" e sotto "Field container" inseriamo (nella textarea a dx di quella del div che è vuota...) la classe "contenitore_principale" mentre in "Field value(s)" sotto "Multiple value field" nella textarea a destra di "Surround each field value with" inseriamo la classe del "field_immagine"
6. In Display fields (/admin/content/node-type/gallery/display) impostiamo Lightbox2 sia nel teaser che in full node > miniatura_cck_gallery->original

7. aggiungiamo le due classi allo style.css del tema (oppure in un .css custom...)

.contenitore_principale {
clear:both;
border:0px solid red;
width:750px;
height: auto;
margin-left:0px;
margin-top:-10px;
overflow: hidden;
}
.field_immagine_01 {
float:left;
border:1px solid silver;
margin-left:25px;
margin-top:25px;
width:150px;
height:100px;
padding:4px;
}

Fine!

Mano a mano che si aggiungono le foto (900x600px) vengono formattate/allineate automaticamente dalle istruzioni del CSS trasformandole in tante miniature cliccabili che fanno aprire lightbox2 con la possibilità di navigare avanti/indietro nel Lightbox aperto...

demo >>> http://www.giuliweb.com/semantic_cck_gallery

Argomenti: