Pubblicato il 04/11/13e aggiornato il

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

 galleria-immagini

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

galleria-immagini[5]

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)

opacità

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

screenshot-galleria

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. 




13 commenti :

  1. Mitico articolo! :)
    Domani mi piombano in casa gli operai e già pensavo "Cielo... e come lo impiego il tempo senza star lì a farmi venire l'ansia?". Ecco come! Creando una galleria di immagini!
    Grazie mille! Splendida idea!

    RispondiElimina
  2. Salve Ernesto, non so se il problema, che non riesco a risolvere, sul mio blog "tracceminime.blogspot.it" , dipenda in parte dalle procedure esposte in questo post. Le spiego: quando condivido su Fb i miei post o quando digito l'indirizzo dei post stessi l'immagine che si apre nell'icona viene presa non dal post ma da quelle della sidebar di destra. Anche il testo non è prelevato dal post ma dalla liberatoria " questo blog non rappresenta una testata giornalistica..." della sidebar di destra. Lei ha già scritto qualcosa in merito che, però, non ho trovato nella sua "enciclopedia"? La ringrazio in anticipo. Saluti.
    ps: sono analfabeta di informatica; ho costruito il blog seguendo solo le indicazioni di blogger e quelle che ho trovato nella rete, sopratutto qui.

    RispondiElimina
    Risposte
    1. La corretta visualizzazione della descrizione del post e della miniatura della prima immagine dipende da molti fattori che sono comuni a Facebook e Google Plus soprattutto per quello che riguarda la Descrizione della ricerca
      http://www.ideepercomputeredinternet.com/2013/03/open-graph-facebook.html
      http://www.ideepercomputeredinternet.com/2012/03/come-personalizzare-le-preferenze-di.html
      @#

      Elimina
  3. Salve, ho provato a creare una galleria di immagini in una pagina statica di blogger seguendo le istruzioni del post. In anteprima (e anche una volta pubblicato il post) compare la tabella ma non viene visualizzata l'anteprima delle immagini. Cliccando sul "?" all'interno di ciascuna casella si viene correttamente reindirizzati all'immagine nell'album di picasa. Come posso correggere questo errore?
    Grazie!

    RispondiElimina
    Risposte
    1. Probabilmente non hai incollato correttamente gli URL delle immagini di Picasa (ora Foto di Google+)
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      @#

      Elimina
    2. Grazie! Ora sembra tutto ok!

      Elimina
  4. Buonasera, ho inserito il codice con tutti gli accorgimenti indicati ma quando apro l'immagine invece che mostrarla nella sua dimensione originale compare il messaggio di errore 404 - not found oppure che non è possibile contattare il server. Credo sia dovuto all'URL inserito all'inizio del codice, ho provato di tutto ma senza soluzione, purtroppo. Il mio è un blog di blogger con dominio proprio, ho inserito come URL del link l'indirizzo (permalink) del post in cui è contenuta la gallery es.www.involtinidipeperone.it/2014/08/cantina oppure https://www.blogger.com/http://www.involtinidipeperone.it/2014/08/cantina.html...non riesco proprio a capire dove sbaglio, mi può dare una mano? Grazie!

    RispondiElimina
    Risposte
    1. Se non vedi nulla significa che non hai inserito bene gli indirizzi delle immagini. Prova a incollare il codice così com'è per vedere se funziona. Nel caso si vedano le immagini allora il problema è quello. Caricale su Picasa e trova il loro URL diretto
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      Poi per aggiungere i link ai tuoi post sono sbagliati entrambi gli esempi che hai fatto. Riprendendo l'indirizzo che hai postato il link giusto sarebbe questo
      http://www.involtinidipeperone.it/2014/08/cantina.html
      P.S. Per sapere se sia o meno giusto basta incollarlo nel browser e vedere se apre la pagina desiderata
      @#

      Elimina
  5. Molto bello l'effetto finale, ma non mi funziona...
    Quando lo carico nel editor di prova è corretto ma se poi la incollo nel testo di wordpress non si vede nel modo corretto...vedo le immagini una sopra l'altra di dimensioni differenti in modo crescente, non riesco a disporre su più colonne e non mi legge la dimensione che imposto...
    Consigli??
    Grazie

    RispondiElimina
    Risposte
    1. Su Wordpress in genere non funzionano questi trucchetti. Non ti saprei consigliare nulla di sicuro. Wordpress non lo conosco molto. Mi spiace :(
      @#

      Elimina
  6. Salve,
    articolo interessantissimo come tutti gli altri da Lei postati.
    Vorrei chiederLe se potrebbe creare un aggiunta a questo articolo ed in particolare Le chiedevo se era possibile riscrivere il codice con l'aggiunta dell'effetto lightbox
    La ringrazio in anticipo e Le auguro una buona domenica.

    RispondiElimina
    Risposte
    1. Per l'effetto Lightbox si può usare quello nativo di Blogger che però non so se funzioni applicato a questa galleria
      http://www.ideepercomputeredinternet.com/2014/04/blogger-lightbox-customized.html
      oppure usare una libreria javascript specifica come PrettyPhoto che serve anche per gallerie di video e di altro genere
      http://www.ideepercomputeredinternet.com/2014/07/prettyphoto-installazione.html
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.