Pubblicato il 02/03/17 - aggiornato il  | 22 commenti :

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.


22 commenti :

  1. Ottimo articolo (già salvato perché la questione delle griglie responsive mi serviva da un po'). Ho una domanda, molto più semplice, che avrei dovuto pormi parecchi anni fa e riguarda proprio il caricamento delle foto negli articoli. Le foto sono responsive? Come scegliamo la dimensione per caricarle? Io faccio una cosa abbastanza poco professionale, e cioè le riduco a 800 di lunghezza - così si riducono di qualità ma anche di peso - e le carico (prima in extra large, riducendole in automatico fino a 640) e ora invece vado nella sezione html,tolgo tutti i riferimenti alle dimensioni e - credo - mi venga fuori un'immagine responsive. Io vorrei soltanto che l'immagine si espandesse su tutta la lunghezza del post. Come le carichiamo queste immagini? Spero di essermi spiegata anche se sono sicura di non aver usato i termini adatti.

    RispondiElimina
    Risposte
    1. Blogger ha delle funzionalità piuttosto evolute per le immagini (meno per i video). Quando carichi una immagine questa si riduce automaticamente di dimensione se la pagina è aperta da mobile.
      In teoria si potrebbero postare anche immagini con il 100% di larghezza che quindi prendono tutto lo spazio del post. Per esempio con questo codice

      <img src="https://lh3.googleusercontent.com/-2zHnanWsfU4/WLg-wAxdgfI/AAAAAAAA7Zw/PJ8G2gYlvTE/codice-immagini-didascalia%25255B2%25255D.jpg" width="100%"/>

      mostri una immagine di questo post in tutta la sua larghezza sia da desktop sia da mobile. Approfondirò il tema
      @#

      Elimina
  2. Ho provato a creare la tabella (e viene bene) ma non riesco a centrarla. Come faccio?

    RispondiElimina
    Risposte
    1. Il sistema più semplice è quello di impostare una larghezza come quella dell'area del post. Alternativamente prova a aggiungere
      <div align="center">
      prima di <table>
      e </div> dopo </table>
      Però non so se funzionerà. Non ho testato
      @#

      Elimina
  3. La galleria dei post per etichetta a quanto pare non mi funziona più. Può essere questa una valida alternativa per riassumere, ad esempio, le nail art in una pagina con rimando ai post?

    RispondiElimina
  4. È laborioso realizzarla ma è senza JavaScript quindi molto leggera.
    @#

    RispondiElimina
  5. Ernesto si potrebbe aggiungere un n° di pagine a questo codice? Nel caso le immagini fossero troppe da vedere tutte insieme.

    RispondiElimina
    Risposte
    1. Senza librerie esterne di javascript credo sia impossibile :(
      @#

      Elimina
    2. E se aggiungessi il js nel codice? Sempre a capire come...

      Elimina
  6. In teoria sarebbe pure possibile, credo, però non ti saprei dire come 😐
    @#

    RispondiElimina
  7. Domanda: se nascondo la sidebar a destra, mi resta lo spazio in bianco. Se volessi che la gallery prenda tutto lo spazio del layout (quindi anche quello della sidebar nascosta) come potrei fare? Sempre che sia possibile. Mi sto scervellando... ma nulla, non ci riesco.

    RispondiElimina
    Risposte
    1. forse ci sono riuscita, ho aggiunto style=width:1150px; in un div. Ora devo solo capire come centrare il titolo della pagina rispetto all'intera larghezza del layout, ma mal che vada lo metto a sinistra. Grazie ugualmente :)

      Elimina
    2. @# Per centrare il titolo prova a incollare su HTML, prima del resto del codice della galleria, quest'altra riga di codice

      <style>
      div.post.hentry > h3 {text-align:center !important;}
      </style>

      Elimina
    3. grazie. Sto notando che con la larghezza che ho messo, la gallery non è più responsive, mi sa che rimetto la sidebar. :)

      Elimina
    4. Devi usare la percentuale, p.e width:120%

      @#

      Elimina
  8. smanettando (ti dico che ho il cervello in fumo) sono riuscita a togliere sidebar e centrare galleria a tutta pagina. Ora, io vorrei rendere cliccabile l'immagine (il click porterà al relativo post) e non il titolo dell'immagine. Ho modificato la porzione di codice e ho aggiunto il tag alt. Per funzionare funziona, ma puoi dirmi se ci sono errori di sintassi?

    ...a href="http://www.ideepercomputeredinternet.com/2017/03/blogger-galleria-foto-responsive.html" target="_blank" imageanchor="1" style="margin-left: auto; margin-right: auto;"...
    ...img border="0" src="https://4.bp.blogspot.com/-STavoOBpBkw/VJ0WG65I8NI/AAAAAAAAqmQ/zBquv13Vw9g/s1600/elefante.jpg" alt="galleria-immagini" /...

    i tre puntini corrispondono alle freccette di apertura e chiusura, altrimenti non mi fa mandare il commento :)

    RispondiElimina
  9. Altra domanda impossibile (poi la smetto, promesso): dato che nella versione mobile le immagini diventano davvero molto piccole, non si potrebbe farne vedere una per riga più grande invece di tre più piccole? Se sì, come?

    RispondiElimina
  10. Il tag alt lo hai inserito nel punto giusto. Ho provato varie volte a personalizzare la larghezza delle immagini nella versione mobile di Blogger però c'è da dire che tu hai un modello Responsive e non c'è versione mobile quindi non si possono creare due regole diverse. Lo si potrebbe fare con il media screen ma onestamente non mi viene nessuna idea in merito :(
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy