Pubblicato il 02/03/17 - aggiornato il  | Nessun commento :

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.

galleria-responsive






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 

aggiungere-immagini-blogger

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 Cij 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>.

codice-immagini-didascalia

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 Cij .

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:
Sostituite tale codice a quello della Bozza della pagina che avete salvato su Blogger quindi pubblicate.


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





Nessun commento :

Posta un commento

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.