Come creare una galleria di immagini responsive su Blogger con didascalie e link ai post.

Come mostrare in una pagina di Blogger una Galleria di Immagini Responsive visualizzabile da desktop, tablet e smartphone.

In questi ultimi giorni ho ricevuto diversi commenti sui codici di Gallerie di immagini che avevo creato negli anni scorsi quando era prioritario se non addirittura esclusivo che funzionassero per la versione desktop del sito.

Da qualche tempo a questa parte quando si aggiunge una qualsiasi personalizzazione bisogna verificare che sia compatibile anche per la versione mobile visto che molte pagine del nostro sito vengono aperte con smartphone e tablet.

Un esempio euristico di come si debba procedere per rendere responsive una personalizzazione lo si può avere consultando il post su come creare una tabella personalizzata che poi ho modificato per rendere la tabella Responsive. Ho già pubblicato un articolo su come creare una Galleria di foto Responsive.

Si tratta però di una galleria senza descrizione delle foto anche se si possono inserire dei link alle immagini. Nel seguito di questo post mostrerò come creare una galleria di immagini con didascalia che possano linkare degli articoli del blog collegati a ciascuna di queste.

COME PUBBLICARE LE IMMAGINI SU BLOGGER

Come certo saprete non è più così semplice avere il link diretto delle immagini su Blogger visto che adesso vanno a finire su Google Foto e non più su Picasa. Si procede quindi in questo modo. Si va su Bacheca -> Pagine -> Nuova Pagina, si dà un titolo alla pagina e si postano le foto senza preoccuparci di dove vanno.

Poniamo che si voglia creare una galleria con una griglia formata da due righe e tre colonne. Considerato che la larghezza dell'area del post è al massimo di 900 pixel prendiamo immagini larghe al massimo 280 pixel. Per ogni immagine che inseriamo nell'Editor si aggiungerà anche una didascalia 

Le immagini andranno a finire una sotto all'altra ma le posizioneremo in seguito. Dopo aver caricato tutte le foto salvate la pagina dell'Editor come Bozza.

CODICE DELLA TABELLA

Utilizzeremo il codice di una tabella per posizionare le immagini in una griglia. Il codice di tabella di due righe per tre colonne è il seguente

<table>
      <tbody>
        <tr>
          <td>C11
          </td>
          <td>C12
          </td>
          <td>C13
          </td>
        </tr>
        <tr>
          <td>C21
          </td>
          <td>C22
          </td>
          <td>C23
          </td>
        </tr>
      </tbody>
    </table>

Dove al posto di C_ij vanno inseriti i codici dei vari elementi che compongono la tabella e che in questo caso sono immagini con didascalie. Se volete costruire una griglia con una tabella diversa e non conoscete il codice potete trovarlo facilmente utilizzando il software gratuito BluGriffon.

COPIARE IL CODICE DELLE IMMAGINI CON DIDASCALIE INSERITE IN BLOGGER

Le immagini e le didascalie sono state aggiunte nell'Editor di Blogger nella Modalità Scrivi. Andiamo adesso in Modalità HTML e selezioniamo e copiamo tutto il codice contenuto tra <table> e </table>.

Si possono aggiungere dei collegamenti alla immagine e alla didascalia selezionando l'elemento con il mouse per poi andare su Inserisci link e incollare l'URL del collegamento. In definitiva avremo quindi 6 codici di immagini con didascalie da sostituire nel codice della tabella agli elementi C_ij .

Per questa operazione potete usare il Blocco Note o un Editor più sofisticato come Notepad++.  Prima del codice della tabella della galleria si devono incollare i CSS per modificarne l'aspetto

<style>
@media screen and (max-width: 800px) {
td.tr-caption {
    font-size: 11px;
    font-family: Georgia;
    color: #036 !important;
    font-style: italic;
    font-weight: bold;
}
td.tr-caption a{   
    color: #f00 !important; /* Colore link didascalia mobile */ 
}
td.tr-caption a:hover {  
    color: #0f0 !important; /* Colore link al passaggio del mouse nel mobile */ 
}
}
@media screen and (min-width: 801px) {
td.tr-caption {
    font-size: 16px;
    font-family: Georgia;
    color: #036 !important; /* Colore del testo desktop*/
    font-style: italic;
    font-weight: bold;
}
td.tr-caption a{   
    color: #f00 !important; /* Colore del link desktop*/ 
}
td.tr-caption a:hover {  
    color: #0f0 !important; /* Colore link al passaggio del mouse nel desktop */ 
}
}
</style>

Si tratta di un codice che modifica l'aspetto della Galleria in funzione della risoluzione del dispositivo con cui viene aperta la pagina. Ovviamente i parametri in rosso possono essere modificati. Il breakpoint è stato impostato a 800 pixel. Per rendere le cose più chiare ho pubblicato su Google Drive un esempio di codice:

• Codice di esempio di una galleria responsive di immagini per Blogger

Sostituite tale codice a quello della Bozza della pagina che avete salvato su Blogger quindi pubblicate.

Demo Clicca qui

Demo Clicca qui

La seconda demo è relativa alla visualizzazione da mobile con un iPhone 7.