Galleria Responsive di Foto per Blogger con link ai post e descrizione

Come realizzare una Galleria di Foto Responsive in Blogger che mostrino 4 foto affiancate nella versione desktop e una in quella da smartphone

La creazione di una galleria di foto è un must per tutti i blogger che fanno delle immagini il centro dei loro contenuti. Una galleria, per essere funzionale, ha bisogno di avere un link che colleghi ciascuna immagine al post da cui è stata tratta.  Con lo sviluppo della telefonia mobile è diventato sempre più difficile realizzare una tale galleria, perché la visualizzazione con un computer con schermo da 1920 pixel o superiore, è necessariamente diversa da quella con uno smartphone da 400 pixel di larghezza di schermo.

Una soluzione a questo problema viene dalla introduzione delle regole media screen o media query. Con queste tipologie di CSS si possono inserire dei CSS diversi a seconda della risoluzione con cui viene aperta una pagina. Sarà quindi possibile mostrare 4 foto allineate se la galleria viene aperta da PC con browser desktop, 2 foto se aperta con tablet e 1 sola foto per riga se la galleria è aperta con uno smartphone.

Una ulteriore complicazione è quella dei nuovi Temi Responsive di Blogger. Bisogna trovare un codice che possa andare bene per i vecchi Temi, che hanno due visualizzazioni distinte per mobile e desktop, e per i nuovi Temi, che invece hanno una sola visualizzazione indipendentemente dal dispositivo con cui vengono aperti.

C'è poi da considerare che, una tale galleria, viene solitamente inserita in una pagina statica e, nella versione desktop, è opportuno nascondere la sidebar, per allargare lo spazio di visualizzazione della galleria.

In definitiva ecco il codice che ne è venuto fuori per quello che riguarda il CSS:

<style type='text/css'>
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {display:none; }
@media screen and (min-width: 960px) {
#main{
width:120%;
background:#fff;
}
}
/* GALLERIA RESPONSIVE INIZIO */
.galleria {
     padding: 0 5px;
     float: left;
     width: 24.99999%;
}
div.galleria img {
     width: 100%;
     height: auto;
}
div.galleria img:hover {
  opacity: 0.8;
}
div.desc {
     padding: 10px;
     font-size:16px;
     font-weight:bold;
     text-align: center;
}
* {
     box-sizing: border-box;
}
@media only screen and (max-width: 700px){
     .galleria {
         width: 49.99999%;
         margin: 6px 0;
     }
}
@media only screen and (max-width: 500px){
     .galleria {
         width: 100%;
     }
}
.immagine-galleria:after {
     content: "";
     display: table;
     clear: both;
}
/* GALLERIA RESPONSIVE FINE */
</style>

Con queste impostazioni di larghezza, la galleria dovrebbe andare bene per tutti i modelli. La cosa importantissima da modificare è il valore width:120%; visto che in alcuni modelli è troppo grande e in altri troppo piccolo. Se la galleria è più larga della pagina, deve essere diminuito altrimenti aumentato. Il test deve essere fatto con la visualizzazione da desktop. Gli ID delle sidebar colorati di viola, si riferiscono a tutti quelli che solitamente si trovano nei modelli di Blogger. Se avete una sola sidebar, li potete sostituire con l'ID della vostra sidebar, che può essere visualizzato andando su Bacheca -> Layout. Chi avesse dei dubbi può leggersi questo post.  

A questo punto non resta che creare il codice HTML della Galleria. Per prima cosa vanno aggiunte a Blogger le singole immagini. Si va su Bacheca -> Post -> Nuovo post e si clicca sul pulsante per inserire le immagini. Si caricano tutte le immagini della Galleria quindi si va su HTML e se ne copia gli indirizzi. Si tratta degli URL che compaiono nel codice dopo src=" e che iniziano con https. Dopo aver copiato gli indirizzi delle foto, potrete anche eliminare la Bozza che si è creata automaticamente su Blogger. Le immagini rimarranno comunque caricate su Google Foto. 

Se le immagini si trovassero già nel web, perché pubblicate in dei post, basterà cliccarci sopra con il destro del mouse per poi andare su Copia indirizzo immagine e incollare l'URL in un file di testo.

Si può inserire il collegamento, per l'apertura del post, nella immagine o nella didascalia, che sta sotto alla foto. Questo primo screenshot si riferisce alla seconda opzione. Il prossimo screenshot invece è stato preso

con il tool Quirktoools Screenfly con una visualizzazione da iPhone 6. In questo caso il collegamento al post è inserito nella immagine, su cui si dovrà cliccare per aprirlo. Il codice di base per creare la galleria è il seguente, in cui per semplicità ho inserito solo tre immagini, ma possono essere anche molte di più.

<div class="immagine-galleria"> 
   <div class="galleria">
     <a href="#" target="_blank">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-SuyFF5Lk6GWH7jao00oCBHB1n88-RtGcAhjzDHFGYKCSXLVg9MNemFHqw1A9ozHArg0GkURYcJen3o25QpQSpj9hJA10NsK5z9zDj0Ufs5uoc-hUkuAkfe4elCf5hpqQYEUcqx4NwJE/s1600/albero.jpg" alt="Nome Immagine">
     </a>
     <div class="desc">Didascalia Immagine</div>
   </div>
<div class="galleria">
     <a href="#" target="_blank">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDe8ODlbCnGk1z4y-0U4vCAKH2CfiSizx0g6ZaY0N0EOg2BabwtoQYSI40Pg97WTp_EVUOSxrsricnOh3SuTHNSwanYLkGGBDfBXl0QA8F5bTReVAfcqkIigZLwveg9vUeYUBPctUqFmc/s1600/alci.jpg" alt="Nome Immagine">
     </a>
     <div class="desc">Didascalia Immagine</div>
   </div>
<div class="galleria">
     <a href="#" target="_blank">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9B4Dt3Yt41SPd4NauoN1nFvzyQgZLiiRwiNPTGtQCv-0sHSGE-LZzSvBdrT72PdiU6TAvTO_R74_UJ8vhzNCLqn-0oPG2HezMXJ5ZWEpVoBu5tCrsRuNEHy2h9n1b57zhECgjfPeCY8/s1600/bruco.jpg" alt="Nome Immagine">
     </a>
     <div class="desc">Didascalia Immagine</div>
   </div>
</div>

Le due righe evidenziate di giallo devono comprendere i blocchi del codice delle singole immagini. Il codice precedente si riferisce ai collegamenti inseriti nelle immagini che saranno cliccabili. Per mettere i link nella descrizione, i blocchi di codice dovranno avere questa sintassi di base

<div class="galleria">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2v0ZRsgbsqWq4SQeYz9rmevucPy1vTGMXsmK380nNd_SBwuU0Nv4G9rLdYIULb68Zt5S9vo3k7sjR8Ty33Yc6rH4522oqpXxuU2slkp0RuJY1i986_laLOVL8fKhTNBt0htw-iw5X_UI/s1600/elefante.jpg" alt="Nome Immagine">
<div class="desc">
<a href="#" target="_blank">
Didascalia Immagine
</a>
</div>
</div>

Al posto di Nome Immagine va messo quello che si chiama Testo Alternativo, che è importante ai fini SEO. Si tratta di una breve descrizione della immagine. Il testo Didascalia Immagine, sarà invece quello mostrato sotto alla foto e che sarà cliccabile con la seconda opzione, ma non con la prima.  Si può anche fare in modo da rendere cliccabili immagini e didascalie, inserendo il tag <a href="#" target="_blank"> prima di <img src= e il tag </a> prima dell'ultimo </div>.  Il tag target="_blank" serve per aprire il link in un'altra scheda.

Quando si passa sopra a una immagine con il cursore, questa diventerà semitrasparente dovuta all'attributo opacity: 0.8; che aggiungerà una opacità dell'80%, che potrà essere personalizzata. Si possono personalizzare anche altri elementi, come la dimensione dei caratteri della descrizione, impostata a 16 pixel. I più bravi possono anche aggiungere altre righe di CSS per cambiare il colore che, senza aggiunte, è ereditato dal blog.

BLOG CON TEMI  RESPONSIVE DI BLOGGER

Chi avesse un Tema Responsive di Blogger, può modificare le prime righe del CSS in questo modo

<style type='text/css'>
@media screen and (min-width: 960px) {
#main{
width:110%;
background:#fff;
}
}
/* GALLERIA RESPONSIVE INIZIO */

con la larghezza in percentuale dell'area della galleria da testare con la visualizzazione da desktop.

Demo Clicca qui

Demo Clicca qui

La prima Demo si riferisce alla Galleria mostrata in una pagina statica di un Tema Responsive di Blogger. Invece la seconda Demo si riferisce alla stessa Galleria, ma inserita in una pagina statica di un Tema Semplice di Blogger. I due codici del CSS e dell'HTML della Galleria dovranno essere incollati uno di seguito all'altro nell'Editor della Pagina in Modalità HTML. Gli indirizzi dei post collegati alla galleria, dovranno essere sostituiti nel codice ai cancelletti (#). Per testare la visualizzazione della Galleria con le varie risoluzioni, vi consiglio lo strumento Quitktools Screenfly già linkato in precedenza.

Concludo con una osservazione sulla larghezza delle immagini. Io le ho inserite tutte delle dimensioni 300x200 pixel. Se le dimensioni fossero diverse da immagine a immagine, e se voleste renderle omogenee, nei vari blocchi di codice, vi basterà modificare l'URL delle stesse immagini seguendo le istruzioni su come modificare la larghezza delle foto dal loro URL. In sostanza l'URL conterrà una stringa di questo tipo /s1600/, con un numero che potrà essere anche diverso da 1600. Per fare in modo che le foto siano tutte larghe 300 pixel, dovremo cambiare quella stringa del loro URL con /s300/.