Galleria Responsive di Foto con CSS3 per Blogger e Wordpress.

Come installare una Galleria di Immagini Responsive, che si veda correttamente anche da cellulare e da tablet, e con solo il CSS, in una pagina Wordpress o Blogger.

Una lettrice mi ha fatto presente che la Galleria di Immagini con CSS3 che avevo presentato circa un anno fa non si vede correttamente da cellulare. Ci sono almeno due ragioni perché tale Galleria non abbia un Responsive Design.

La prima ragione è che è stata creata utilizzando il codice di una tabella realizzata con Windows Live Writer, predecessore di Open Live Writer, che inserisce automaticamente le larghezze nella stessa tabella. La seconda ragione è che le immagini sono troppo larghe per essere visualizzate correttamente affiancate nel piccolo schermo di uno smartphone.

Ho deciso quindi di aggiornare il post per rendere Responsive tale Galleria di Immagini. Lo farò aggiungendo anche un po' di teoria in modo che almeno i lettori più esperti possano affrontare e risolvere questi problemi da soli dato che la corretta visualizzazione da mobile non sarà solo uno dei mantra del futuro ma lo è già anche del presente. 

Per prima cosa ho eliminato le larghezze dal codice della tabella facendola diventare Responsive. Mi sono poi occupato di modificare il codice della Galleria creando delle regole CSS per le diverse risoluzioni dello schermo. Entrando nel dettaglio se vogliamo per esempio che un CSS sia valido solo per i tablet dobbiamo usare un codice come il seguente

@media screen and (min-width: 480px) and (max-width: 768px) {
/* Qui vanno le regole CSS per i tablet */
}

valido per risoluzioni dello schermo comprese tra 480 e 768 pixel. Con i tag media query e una sintassi simile sarà possibile inserire dei CSS per 2,3, 4 o anche più intervalli di risoluzione. Si possono anche settare CSS diversi per la visualizzazione portrait (verticale) o landscape (orizzontale) del cellulare.  Il codice della Galleria è stato quindi scomposto in questo modo

<style>
/* CSS PER DESKTOP INIZIO */
@media screen and (min-width: 769px) {
.view {
    background-color:#FFFFFF;  /* colore di sfondo */
    border: 10px solid #FFFFFF;  /* stile del bordo */
    box-shadow: 2px 3px 5px #696969; /* ombreggiatura del bordo */
    cursor: default;
    float: left;
    height: 200px; /* altezza della immagine */
   margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 250px; /* larghezza della immagine */
}
.view .mask, .view .content {
    height: 200px; /* altezza del box */
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 250px; /* larghezza del box */
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF !important;
    font-size: 17px;
    margin: 20px 0 0;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.view p {
    color: #FFFFFF !important;
    font-family: Georgia,serif; /* Famiglia di font */
    font-size: 12px; /* dimensione caratteri */
    font-style: italic; /* Corsivo */
    padding: 10px 20px 20px;
    position: relative;
    text-align: center;
}
.view a.info {
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    text-transform: uppercase;
}
.mask {font-size: 17px; /* Dimensione Titolo Centrale */}
}
/* CSS PER DESKTOP FINE */
/* CSS PER TABLET INIZIO */
@media screen and (min-width: 480px) and (max-width: 768px) {
.view {
    background-color:#FFFFFF;  /* colore di sfondo */
    border: 10px solid #FFFFFF;  /* stile del bordo */
    box-shadow: 2px 3px 5px #696969; /* ombreggiatura del bordo */
    cursor: default;
    float: left;
    height: 200px; /* altezza della immagine */
   margin: 5px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 250px; /* larghezza della immagine */
}
.view .mask, .view .content {
    height: 200px; /* altezza del box */
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 250px; /* larghezza del box */
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF !important;
    font-size: 17px;
    margin: 15px 0 0;
    padding: 5px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.view p {
    color: #FFFFFF !important;
    font-family: Georgia,serif; /* Famiglia di font */
    font-size: 12px; /* dimensione caratteri */
    font-style: italic; /* Corsivo */
    padding: 10px 20px 20px;
    position: relative;
    text-align: center;
}
.view a.info {
    display: inline-block;
    padding: 7px 14px;
    text-decoration: none;
    text-transform: uppercase;
}
.mask {font-size: 16px; /* Dimensione Titolo Centrale */}
}
/* CSS PER TABLET FINE */
/* CSS PER SMARTPHONE INIZIO */
@media screen and (max-width: 479px) {
.view {
    background-color:#FFFFFF;  /* colore di sfondo */
    border: 4px solid #FFFFFF;  /* stile del bordo */
    box-shadow: 1px 2px 3px #696969; /* ombreggiatura del bordo */
    cursor: default;
    float: left;
    height: 140px; /* altezza della immagine */
   margin: 2px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 152px; /* larghezza della immagine */
}
.view .mask, .view .content {
    height: 140px; /* altezza del box */
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 152px; /* larghezza del box */
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    color: #FFFFFF !important;
    font-size: 14px;
    margin: 4px 0 0;
    padding: 2px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}
.view p {
    color: #FFFFFF !important;
    font-family: Georgia,serif; /* Famiglia di font */
    font-size: 10px; /* dimensione caratteri */
    font-style: italic; /* Corsivo */
    padding: 4px 4px 4px;
    position: relative;
    text-align: center;
}
.view a.info {
    display: inline-block;
    padding: 2px 5px;
    text-decoration: none;
    text-transform: uppercase;
}
.mask {font-size: 14px; /* Dimensione Titolo Centrale */}
}
/* CSS PER SMARTPHONE FINE */
/* CSS COMUNE A TUTTE LE RISOLUZIONI */
.view-third img {
   box-shadow: 0 0 1px #000000;
-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-third .mask {
  color:#FFF !important;
   background-color: rgba(0,0,0,0.6);
   -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;;
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translate(460px, -100px) rotate(180deg);
   -moz-transform: translate(460px, -100px) rotate(180deg);
   -o-transform: translate(460px, -100px) rotate(180deg);
   -ms-transform: translate(460px, -100px) rotate(180deg);
   transform: translate(460px, -100px) rotate(180deg);
   -webkit-transition: all 0.2s 0.4s ease-in-out;
   -moz-transition: all 0.2s 0.4s ease-in-out;
   -o-transition: all 0.2s 0.4s ease-in-out;
   -ms-transition: all 0.2s 0.4s ease-in-out;
   transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third p {
  color:#FFF !important;
   -webkit-transform: translateX(300px) rotate(90deg);
   -moz-transform: translateX(300px) rotate(90deg);
   -o-transform: translateX(300px) rotate(90deg);
   -ms-transform: translateX(300px) rotate(90deg);
   transform: translateX(300px) rotate(90deg);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third a.info {
color:#FFF !important;
-webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
  -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;;
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
   -o-transform: translate(0px, 0px);
   -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px);
}
.view-third:hover h2 {
background: none repeat scroll 0 0 #9C1813; /* Colore del Titolo */
  border-top: 1px solid #000; /* Colore del bordo superiore del titolo */
  border-bottom: 1px solid #000;  /* Colore del bordo inferiore del titolo */
  text-shadow: 0px 1px 1px #111; /* Ombra del titolo */
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
.view-third:hover p {
  color:#FFF !important;
   -webkit-transform: translateX(0px) rotate(0deg);
   -moz-transform: translateX(0px) rotate(0deg);
   -o-transform: translateX(0px) rotate(0deg);
   -ms-transform: translateX(0px) rotate(0deg);
   transform: translateX(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-third:hover a.info {
background: none repeat scroll 0 0 #9C1813; /* Colore di sfondo del link */
border: 1px solid #000;  /* Colore del bordo del Read More */  
    color:#FFFFFF; /* Colore del link Read More */
    text-shadow: 0px 1px 1px #111; /* Ombra del link Read More */
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
/* FINE CSS */
</style>
<div align="center">
<table border="0" cellpadding="2" cellspacing="4" style="width: 100%;"><tbody>
<tr>       <td><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja4JDtX9y4kWl5EaIGUpYKiqZBzR8iPQIu5HyjoYhXNAnM60FN23j5so9zPRbi-2hMP5HKx2igxO1Bc9JINDXy-rGH9AtGZkGu6aqVAjLMvgBp5sRzdosCahAcOb0zIDG-Zcgvw7O_Is2E/s250/mongolfiere.jpg" />
<div class="mask">
<h2>
MONGOLFIERE</h2>
Raduno di mongolfiere
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>       <td><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95AIv3rhwTbQBUkFLUwwJwn9KnUlAbxFQ2le7w01FazMMIKlzJRuWMU3oSIisPgdhl54hlPRcZiqI_yWuWShYSc9m9vD8FdnTSAuz34LxDd7mV5eUUNSb6MJcz1H8WceqAa8RV8dvX0i2/s250/montagne.jpg" />
<div class="mask">
<h2>
MONTAGNE</h2>
Scorcio montano
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>     </tr>
<tr>       <td><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4G9R9d3Naddk_2QuT84_2OC_46ZLcfR_aIqg3s388KdrIpyGmfn0GNybTSdmGKd7lpkywg4EjmmxNCvtr9vxGSxyhgeAq86lDzljD6na12D0R-eUYEAP12ssvTtzpJf37Q_YR5LhPq2W/s250/nubi.jpg" />
<div class="mask">
<h2>
Cielo plumbeo</h2>
Cielo nuvoloso con raggi di sole
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>       <td><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLkVl7yK4L5VRNcWd6D0Y0Di7Z5FI6t8t_PATaehnot5H7Y0DVI00Sus6qZiq1OB57AfFTorNX99Li7F8Hv4_nR569F0LAevVA8pYZDMagl0Yd64sMyu4bGqRV4PRXT2gU50gu3PT09vn/s250/pianta.jpg" />
<div class="mask">
<h2>
PIANTA TROPICALE</h2>
Pianta dalla forma suggestiva
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>     </tr>
<tr>       <td><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEquKud5epM-TxnFOMX__ZOA_mMQKsOssUY-vZhxLuKphDLaUIwgQBkLo_NfHSDue_fwCe72rZLFWJOSNTvSW3B7mwpciSc9FDikZlOczIrSWkWJu2EDm8vVyfdW7VG421LwfPXBK0xFZy/s250/cavalli.jpg" />
<div class="mask">
<h2>
CAVALLI NEL DESERTO</h2>
Cavalli e cavalieri berberi
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>       <td><div class="view view-third">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvEQYu1gAdtRxnpXCokjydgxPjEC6ACFZJMoqHq0PHDQu2DqYTn6IZK7Wpnmd13IvZpwUIxQgUYSFwOi4YAi9qukwacfgw95fqLSV0MJQysCbeIaq9BPTxNKz2yAV_LVhXdrasrUvb_Z6/s250/pesce.jpg" />
<div class="mask">
<h2>
PESCATORI E PESCE</h2>
Pesce di fiume esce dall'acqua
<a class="info" href="http://goo.gl/mYEisH">Leggi tutto</a></div>
</div>
</td>     </tr>
</tbody></table>
</div>

Tale codice va incollato in Modalità HTML in una pagina statica di Wordpress o di Blogger per poi pubblicarla come al solito.  Per rendere le cose più chiare ho evidenziato di giallo i CSS per il Desktop, evidenziato di verde quelli per il tablet e evidenziato di beige quelli per lo smartphone.

Le personalizzazioni più importanti sono le seguenti:

1. È stata usata una tabella di tre righe per due colonne. Si può modificare questa struttura ricordandoci che una riga inizia con il tag <tr> e termina con </tr> mentre una singola cella inizia con il tag <td> e termina con il tag </td>.
2. cellpadding="2" cellspacing="4" impostano la distanza rispettivamente tra il contenuto della cella e il suo bordo e quella tra le varie celle.
3. I codici dei colori dei vari elementi e della ombreggiatura possono essere modificati a piacimento. I meno esperti possono consultare il post su come convertire HEX in RGB e viceversa.
4. La Galleria si anima al passaggio del cursore sopra una immagine. Si visualizzeranno i tre testi di Titolo, Descrizione, Read More che dovranno essere scelti per ogni foto caricata.
5. Le immagini possono essere caricate su Picasa per ottenerne il link diretto
6. La trasformazione, ovvero la animazione, indotta dal CSS3 ha una durata da 0.2 a 0.5 secondi. Se non siete particolarmente esperti non toccate questi parametri.
7. La Galleria viene centrata nella pagina statica con i tag evidenziati di grigio.
8. Gli URL http://goo.gl/mYEisH dovranno essere sostituiti con quelli dei post collegati alle foto.

DEMO DELLA GALLERIA PER IL DESKTOP

Demo
Clicca qui

DEMO DELLA GALLERIA PER IL TABLET

Demo
Clicca qui

DEMO DELLA GALLERIA PER LO SMARTPHONE

Demo
Clicca qui

Se il vostro Modello Blogger o il vostro Tema Wordpress non vi facesse visualizzare bene la galleria in una di queste tre risoluzioni potete provare a modificare le larghezze delle foto, la dimensione dei caratteri, i margini di distanza tra i vari elementi e i padding ovvero la distanza tra elemento e contenitore. Dopo aver creato altre celle della tabella si possono aggiungere altre immagini con questo codice

<div class="view view-third"> <img src="URL Immagine" /> <div class="mask"> <h2>Titolo</h2> <p>Descrizione immagine</p> <a class="info" href="URL del Collegamento">Leggi tutto</a> </div> </div>

Questa Galleria di Foto oltre ad avere la prerogativa di essere Responsive è realizzata totalmente con il CSS3 senza alcun utilizzo di javascript e quindi è di veloce caricamento.