Come creare una galleria di immagini con link ai post.

Come creare una galleria di immagini da inserire in una sidebar, in un post o in una pagina con collegamento ai post, effetti di opacità di arrotondamento e di rotazione.

La creazione di una galleria di foto con ciascuna di queste con un link che rimanda a un particolare articolo è uno dei primi lavori piuttosto impegnativi in cui si deve cimentare un blogger. Con questo tutorial voglio accompagnare l'utente meno esperto in questa realizzazione a prescindere dal tipo della piattaforma che sta usando. I codici ottenuti andranno bene per Blogger, per Wordpress o per qualunque altro servizio di blogging che permetta l'inserimento di HTML e CSS.

Per rendere le cose più semplici vediamo in dettaglio come realizzare una galleria di 12 immagini da inserire in una sidebar in 4 righe per 3 colonne. Ciascuna foto, o meglio miniatura, dovrà avere le dimensioni di 100x100 pixel in modo che la galleria possa stare in una sidebar da poco più di 300 pixel. Per creare una simile galleria si potrebbe usare il codice di una tabella ma in questo post vediamo come basti una semplice riga di CSS per organizzare le foto.

CARICARE LE IMMAGINI

La prima operazione da fare è quella di caricare le immagini in un hosting che potrebbe essere Picasa, SkyDrive, DropBox oppure la libreria multimediale del vostro dominio se utilizzate Wordpress. Per ciascuna immagine si dovrà ottenere quello che si chiama il link diretto vale a dire se si apre tale URL in un browser si dovrà vedere la foto e solo quella e non anche la pagina del servizio su cui è caricata. Per questioni di brevità userò il servizio Lorempixel che mi permetterà di mostrare delle Demo senza bisogno di caricare nessuna immagine.

CODICE DI BASE

Il codice di base di una tale galleria sarà il seguente

<div class="galleria_imm_sidebar">
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="" height="" alt=""></a>
</div>

Chi sia totalmente inesperto di linguaggio HTML e CSS può leggersi l'ebook gratuito Guida all'HTML e al CSS che ho messo a disposizione dei lettori qualche tempo fa per una conoscenza propedeutica di questi argomenti. Vediamo in dettaglio il significato di questi tag. La riga

<div class="galleria_imm_sidebar">

è il tag di apertura del contenitore definito dalla classe galleria_imm_sidebar mentre </div> è il suo tag di chiusura. Nel nostro caso il contenitore creato avrà tutti gli elementi della nostra galleria. Si tratta di 12 righe che permetteranno di visualizzare 12 immagini con i relativi collegamenti. In dettaglio

1. <a href="URL-DEL-LINK"> ci permette di inserire gli URL dei post a cui collegare ciascuna immagine. Se usiamo l'espressione <a href="URL-DEL-LINK" target="_blank"> i link saranno aperti in una nuova scheda del browser 
2. <img src="Link-diretto" serve per visualizzare l'immagine inserendone il suo link diretto.
3. Abbiamo detto di voler creare una galleria di immagini 100x100 pixel allora scriveremo width="100" height="100" visto che tali tag rappresentano le dimensioni
4. Il tag alt="  " serve per quello che si chiama testo alternativo e è molto importante per il posizionamento delle immagini. In sostanza si tratta di inserire un titolo alla foto come potrebbe essere per esempio alt="tramonto-alpi-apuane"
5. </a> rappresenta la chiusura del tag collegamento mentre </div> la chiusura del contenitore

UTILIZZO DEL CSS

Il codice CSS si può inserire in diversi modi. In questo caso lo mettiamo tra i tag <style> e </style> che rappresentano appunto l'apertura e la chiusura. Inserendo questo codice prima del precedente

<style>
.galleria_imm_sidebar {width:308;}
</style>

si vincola il contenitore con una larghezza di 308 pixel il che porta a disporre le immagini tre per tre

 

Per vedere se il codice funzionava ho utilizzato il tool Real Editor Online che mostra il risultato finale di un codice. Vedremo in seguito come rendere la galleria ancora più interessante ma già può essere inserita su Blogger andando su Layout > Aggiungi un gadget > HTML/Javascript o su Wordpress andando su Aspetto > Widget > Testo e incollando il codice.

COME RENDERE LE IMMAGINI ROTONDE

Il codice CSS per rendere le immagini rotonde può essere così modificato

<style>
.galleria_imm_sidebar {width:308;}
.galleria_imm_sidebar img {border-radius: 50%;}
</style>

La Galleria prenderà allora quest'aspetto

IL TAG TITLE

Nello screenshot precedente vedete un tooltip con la descrizione della immagine quando si punta con il mouse. Per ottenere un tale effetto occorre aggiungere insieme al tag alt anche il tag title. La struttura di una riga siffatta diventa allora

<a href="URL-DEL-LINK"><img src="URL_IMMAGINE" width="100" height="100" alt="testo alternativo" title="Descrizione Immagine"/></a>

In caso di collegamento a un post nel campo title va inserito appunto il titolo del post linkato.

INSERIRE L'OPACITA' ALLE IMMAGINI

Vediamo ora come si possa mostrare l'immagini un po' opacizzate e come renderle invece brillanti quando vengono puntate dal cursore. Basterà modificare il CSS in questo modo

<style>
.galleria_imm_sidebar {width:308;}
.galleria_imm_sidebar img {
border-radius: 50%;
opacity:0.7;
}
.galleria_imm_sidebar img:hover { opacity: 1.0; }
</style>

dove il grado di opacità iniziale è 0.7 mentre quando passa sopra il mouse questa viene azzerata (1.0)

COME INSERIRE UNA ROTAZIONE

Visto che abbiamo le miniature rotonde possiamo fare in modo che abbiano una leggera rotazione al passaggio del cursore. In sostanza andrà via la opacità e si sposteranno un po'. Il codice CSS per questo effetto dovrà essere così modificato

<style>
.galleria_imm_sidebar {width:308;}
.galleria_imm_sidebar img {
border-radius: 50%;
opacity:0.7;
}
.galleria_imm_sidebar img:hover { opacity: 1.0;
-webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
</style>

In cui la rotazione proposta è di 10 gradi in senso antiorario. Il codice definitivo per la galleria è quindi

<style>
.galleria_imm_sidebar {width:308;}
.galleria_imm_sidebar img {
border-radius: 50%;
opacity:0.7;
}
.galleria_imm_sidebar img:hover { opacity: 1.0;
-webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
</style>
<div class="galleria_imm_sidebar">
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/100/100" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/105/105" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/110/110" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/115/115" width="100" height="100" alt=""  /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/120/120" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/125/125" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/130/130" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/135/135" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/140/140" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/145/145" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/150/150" width="100" height="100" alt="" /></a>
<a href="URL-DEL-LINK"><img src="http://lorempixel.com/155/155" width="100" height="100" alt="" /></a>
</div>

che se incollato su Real Time Editor produrrà questo risultato

OSSERVAZIONI CONCLUSIVE

Se avete delle sidebar strette poniamo di 250 pixel allora potete realizzare una galleria di due colonne di immagini larghe 100-120 pixel. Nel footer possono invece essere inserite delle gallerie di molte più colonne. Questo stesso codice può anche essere inserito in una pagina statica in modalità HTML. Tutti o solo alcuni degli effetti proposti quali il rendere le immagini circolari, l'opacità, e la rotazione possono ovviamente essere tralasciati. Concludo ricordando che inserendo per esempio 30% al posto di 50% le immagini non si vedranno rotonde ma solo con i bordi arrotondati.