Pubblicato il 27/12/14e aggiornato il

Come creare una galleria di foto con didascalie per Blogger.

Come creare una galleria di foto con didascalie e link per Blogger usando Windows Live Writer.
Recentemente mi è stato chiesto in un commento come mostrare una serie di foto suddivise in righe e colonne con la rispettiva didascalia.  La mia risposta è stata necessariamente concisa ma visto che questo tema potrebbe avere un interesse generale ho deciso di farci un post per illustrare in modo più analitico tutta la procedura e soprattutto testarne il corretto funzionamento.

L'Editor di Blogger quando inserisce una didascalia lo fa attraverso una tabella di due righe e una colonna e d'altra parte per realizzare una galleria di foto bisogna inserirle in un'altra tabella. In sostanza quindi bisogna inserire una tabella in ciascuna cella di un'altra tabella. La tabella principale conterrà le immagini mentre la tabella inserita nella cella sarà composta da foto e didascalia. Questo procedimento applicato a 6 foto suddivise in 2 righe porta a un risultato simile a questo 

galleria-immagini-didascalia

La realizzazione è stata fatta con l'ausilio di Windows Live Writer che è un software per scrivere i post veramente eccellente che però ha il difetto di essere disponibile solo per utenti Windows. Può essere installato negli OS della Microsoft insieme agli altri software della suite gratuita Windows Essentials. Ho pensato di suddividere la procedura in vari passaggi per renderla meno ostica.

CARICARE LE IMMAGINI SUI SERVER DI BLOGGER


Aprite l'Editor di Blogger per scrivere un post e cliccate sulla icona delle immagini per caricare le foto che volete inserire nella galleria. Verranno posizionate una sotto all'altra ma non preoccupatevi 

caricare-immagini-blogger

Per aggiungere una didascalia selezionate le singole immagini quindi cliccate su Aggiungi Didascalia e digitate il testo che volete mostrare sotto alla foto

aggiungere-didascalia

Si può anche inserire un collegamento o link a ciascuna immagine in modo che cliccandoci sopra si venga diretti verso un determinato post o pagina anche esterna al sito 

inserire-link-galleria

Il link può essere inserito anche nel testo della didascalia sempre tramite l'Editor. Quando si siano caricate tutte le foto, le didascalie e eventuali link bisogna andare in alto a destra su Salva e non su Pubblica. Non vogliamo infatti pubblicare queste foto ma solo salvarle per caricarle su Picasa. 

caricare-foto-picasa

 

CREARE LA TABELLA CON WINDOWS LIVE WRITER


Si apre Windows Live Writer e si clicca sull'icona Inserisci > Tabella

inserire-tabella


Nella finestra di configurazione si indica la larghezza della Galleria e il suo numero di righe e di colonne. Si va su Inserisci per visualizzarla 

bordi-tabella-windows-live-writer

Si va in basso su Origine per modificare l'HTML della stessa tabella

html-tabella

Nelle celle della tabella non c'è nessun contenuto ma è presente solo dello spazio indicato dalla espressione  . Ritorniamo adesso sulla Bozza che abbiamo creato con l'Editor di Blogger e clicchiamo nel bottone HTML posto in alto a sinistra 

codice-html-foto

Bisogna individuare l'HTML di ciascuna foto con annessa miniatura e eventuale link. Basterà selezionare e copiare il codice che va da <table…. a </table> come mostrato nello screenshot. Questi codici vanno incollati in quello della tabella al posto delle espressioni &nbsp; in questo modo 

codice-tabella

Quando si è terminato di incollare il codice delle foto su WLW si torna su Modifica in basso

galleria-immagini

Si visualizzerà la nostra Galleria. Non resta che cliccare nuovamente su Origine, selezionare tutto il codice e copiarlo in questo modo 

copiare-codice-galleria

 

PUBBLICARE GALLERIA E PERSONALIZZARE DIDASCALIA


Tale codice va incollato in modalità HTML in un post o in una pagina statica che stavolta potremo pubblicare. Ho postato anche una demo



Volendo si può anche personalizzare l'aspetto della didascalia anteponendo direttamente nell'articolo in modalità HTML questo schema di codice di un CSS personalizzabile 

<style>
td.tr-caption {
    font-size: 16px;
    font-family: Georgia;
    color: #036 !important; /* Colore del link */    font-style: italic;
    font-weight: bold;
}
td.tr-caption a{   
    color: #f00 !important; /* Colore del link */ 
}
td.tr-caption a:hover {  
    color: #0f0 !important; /* Colore link al passaggio del mouse */ 
}
</style>

con i parametri tra cui i codici dei colori completamente personalizzabili. Dopo che si è terminato si può anche eliminare la Bozza che ci è servita per caricare le foto. Al posto di Windows Live Writer si può usare per creare la tabella anche BlueGriffon ma non ho testato come con WLW.




8 commenti :

  1. Ciao Ernesto, per prima cosa ti ringrazio per questo post per me interessantissimo! :)
    Ti chiedo se è possibile utilizzare queste indicazioni per creare una pagina di presentazione del blog, diciamo una home page. Grazie :) Buone Feste!

    RispondiElimina
    Risposte
    1. Puoi fare quello che vuoi. Non posso darti link perché sono al cellulare. Cerca nel sito "come creare una pagina statica come home di Blogger" oppure 'come creare una landing pare per blogger"
      @#

      Elimina
    2. Errata corrige :Page non pare :)
      La solita correzione automatica

      Elimina
    3. Grazie mille Ernesto! Sempre gentilissimo! :D

      Elimina
  2. È possibile ridurre lo spazio tra immagine e didascalia?

    RispondiElimina
    Risposte
    1. In questo post o su Blogger in generale? In questo post sì basta "giocare" con le dimensioni delle celle della tabella. Per Blogger si dovrebbe trovare il selettore univoco e vedere cosa si può fare
      http://www.ideepercomputeredinternet.com/2014/12/analizza-elemento-firefox.html
      @#

      Elimina
  3. Domanda da profano: è più importante il testo delle didascalie delle foto, o quello dei due titoli alla voce "proprietà" ? La mia domanda è in chiave SEO. Anche il testo con un'immagine postata dal computer dovrebbe contare qualcosa.

    RispondiElimina
    Risposte
    1. Il testo più importante è quello del tag Alt che non deve mai mancare poi c'è quello del tag title per aggiungere una descrizione. L'importanza della didascalia in chiave SEO credo sia sostanzialmente assimilabile a quella dell'altro testo posizionato accanto alla immagine nella pagina web
      @#

      Elimina

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.