Pubblicato il 04/08/12e aggiornato il

Come creare una galleria di foto o di miniature su Blogger.

Come creare manualmente una galleria di immagini da inserire in un post o in una pagina statica di Blogger usando Windows Live Writer.
Ci sono molti widget che mostrano una carrellata di immagini del blog anche con effetti speciali. L'obiettivo di questo articolo è quello di illustrare come si possa realizzare una galleria fotografica manualmente inserendo le miniature delle immagini in modo ordinato e immettendo un collegamento a una determinata pagina in ciascuna di esse.

Può essere un modo per mostrare in una singola pagina statica tutto l'archivio dei post che si sono pubblicati attraverso le varie miniature. Se siete pigri o la vostra produzione di articoli è così vasta che non vi consente di fare questa operazione, potete sempre ripiegare creando una mappa del sito testuale o una mappa del sito con miniature.

Per la realizzazione della galleria di immagini si utilizza Windows Live Writer che è un software gratuito per Windows che ci consente di confezionare articoli per il blog in modo ottimale. In questo caso lo utilizzeremo solo come Editor WYSIWYG che è l'acronimo di una espressione inglese che può essere tradotta come "ottieni quello che vedi". In sostanza opera una conversione dell'aspetto del layout in linguaggio HTML che poi sarà letto dai browser.

WLW può anche essere sostituito da altri programmi più professionali ma in questo caso mi rivolgo esclusivamente ai blogger dilettanti che non hanno molta pratica di linguaggio di programmazione. Occorre innanzitutto postare le foto della galleria su Picasa Web Album per poi ottenerne l'hotlink. Ho pubblicato su Youtube un video tutorial che poi illustrerò anche testualmente


Dopo aver aperto WLW si può iniziare a scrivere nel corpo del post il nome della Galleria. Questo può essere utile se per esempio vogliamo inserire nella stessa pagina più gallerie che si riferiscono ciascuna a una certa etichetta del blog. Per un sito di motori per esempio si può creare una galleria per le moto, una per le auto commerciali e un'altra per le auto sportive. Una caratteristica di WLW è quella che consente di inserire delle tabelle che sono l'ideale per mettere le immagini in una griglia predeterminata

inserisci-tabella

In ciascuna cella della tabella va inserita una immagine andando su Inserisci > Immagine > Dal Web. Si incolla l'URL della immagine ottenuta da Picasa e si va nuovamente su Inserisci

inserisci-immagine

Ciascuna immagine va collegata a un determinato URL che può essere quello del post a cui si riferisce. Si seleziona l'immagine e si va su Collegamento ipertestuale. Si incolla l'URL e si termina andando su Inserisci. La Galleria di foto prenderà quindi forma. Per portarla in una pagina statica si deve andare in basso su Origine e copiare l'HTML della galleria andando sul destro del mouse quindi su Seleziona tutto e su Copia. Il codice va incollato nella pagina statica o nel post in modalità HTML. Infine si pubblica.

E' opportuno anche inserire dei titoli per ciascuna miniatura e eventualmente fare il modo che il collegamento si apra in un'altra scheda. Si può anche creare uno sfondo alla galleria utilizzando un attributo delle tabelle. E' anche opportuno usare l'HTML in Origine per calibrare bene l'altezza e la larghezza di ciascuna miniatura operando sui numeri di width e height

galleria-immagini-blogger

Il codice per inserire un colore di sfondo nella galleria è

bgcolor="#ddddff;"

che deve essere incollato prima del tag di chiusura di table come mostrato nello screenshot. Il codice del colore può naturalmente essere scelto a piacere. Per centrare le immagini nel layout basta incollare prima di <table … il codice <div align="center"> e il codice </div> dopo </table>.

Si può anche fare a meno di usare la tabella e inserire le immagini una di seguito all'altra intervallate da un certo numero di spazi. Per l'inserimento della immagine va scelta la modalità In linea con il testo.





44 commenti :

  1. Grazie Ernesto mi sa che è proprio questo di cui avevo bisogno per farmi una pagina statica delle foto che portano ai post con le mie ricette divise per etichette... ho due anni di post mi prende male solo al pensiero.. magari metto lavori in corso sopra così lo faccio piano piano... sei stato chiarissimo per me che sono proprio una principiante.. peccato che non esista una scorciatoia più veloce!!
    Sei sempre di grande aiuto!!
    Grazieee :)

    RispondiElimina
    Risposte
    1. Domanda assurda ma secondo te potrei aggiungermi le foto su questo che mi ero già fatta vedendo da te http://www.ideepercomputeredinternet.com/2012/03/come-creare-delle-mappe-del-sito.html ? chiedo troppo vero??
      grazie

      Elimina
  2. Ecco, Ernesto,
    questo mi servirebbe per mettere per ogni miniatura l'url di un'etichetta. Quello che vorrei sapere è se posso inserire l'html generato nella sidebar, piuttosto che in una pagina o in un post. Si può? Grazie.

    RispondiElimina
    Risposte
    1. Sto già seguendo il tuo tutorial. Ma sei toscano? :)
      Comunque grazie.

      Elimina
    2. @Veronica+-+-
      Fiorentino esattamente. Mi rendo conto di avere un accento ineliminabile :)

      Elimina
  3. Cercando in rete un suggerimento per la realizzazione di miniature, mi sono ritrovata qui. Per me che non sono molto esperta, grazie al video, ho compreso bene tutti i passaggi e credo di poter tentare. Ringrazio Ernesto per questo tutoria illustrato in modo semplice ma esaustivo.

    RispondiElimina
  4. Ciao Ernesto, ho appena realizzato con WLW una galleria fotografica grazie al tuo tutorial e ho copiato il codice html in una pagina statica che ho pubblicato. Tale pagina compare nell'elenco delle pagine statiche ma se provo a visualizzarla il link ad essa associato è quello della mia home. Dove ho sbagliato? Grazie!

    Federica

    RispondiElimina
    Risposte
    1. @# Che vuol dire link associato a una pagina statica? L'URL della pagina lo puoi copiare dalla barra del browser quando la apri.

      Elimina
    2. Non mi sono spiegata scusami. Quando provo a visualizzare la pagina statica in questione dal menù laterale --> "Pagine" mi apre la home del blog e la pagina non me la fa proprio visualizzare (se non in anteprima)....!

      Elimina
    3. @# Ho aperto il tuo sito ma non ho visto menù nella sidebar ma solo un menù orizzontale in cui non c'è il collegamento alla Galleria, poi che cosa intendi come Anteprima?

      Elimina
    4. non hai trovato il link perchè avrei voluto metterlo manualmente nel menù in alto ma purtroppo non funziona. Ti dico passo passo cosa ho fatto: ho generato la galleria con WLW, sono andata nel menù "Pagine", poi su "Nuova Pagina" e ho incollato il codice html della mia galleria fotografica appena creata. Ho visionato l'anteprima (andava bene) e poi ho premuto "Pubblica". Blogger mi riporta poi all'elenco di tutte le pagine statiche che ho, ma cliccando su "Visualizza" della pagina in questione non mi apre la pagina statica bensì la home page del blog. Non andando bene non ho potuto aggiungere la voce sul menù superiore... Ho poi effettuato una prova copia/incollando lo stesso codice nel corpo di un post e non di una pagina statica ed in questo modo funziona... Ho anche notato che da WLW è possibile (almeno per me) fare solo "Nuovo Post" e non "NUova pagina", può dipendere da questo? Grazie ancora!!!

      Elimina
    5. @# Con WLW non si possono pubblicare direttamente le pagine. Si può selezionare e copiare il codice per poi incollarlo in Modalità HTML nella pagina da pubblicare

      Elimina
    6. Alloraaaaa ne sono venuta a capo ma in una maniera contorta... Ho creato una nuova pagina direttamente da blogger contenente nel corpo solo la scritta "prova", l'ho pubblicata senza problemi, blogger gli ha assegnato un link corretto e ho potuto visualizzarla (e prenderne il link). solo dopo l'ho modificata incollando il codice html preso da WLW l'ho aggiornata e finalmente ho la mia galleria fotografica :) evidentemente creava qualche problema il salvataggio con l'html da WLW dall'origine... ma non ne capisco il motivo! (se vuoi vederla la trovi nell'elenco di link in alto sotto la voce "lookbook")

      Elimina
    7. @# Non è una pagina statica, è una pagina con etichetta ma il risultato va bene comunque. Le pagine statiche hanno un URL come quella http://www.laragazzadaicapellirossi.com/p/collaorations.html

      Elimina
    8. si lo so, non ho fatto in tempo a scriverti il commento che mi sono accorta che l'elenco di link non funziona più e ho dovuto sostituire la pagina statica con l'etichetta....!

      Elimina
    9. Ho dovuto creare da capo l'elenco di link ma ora funziona e la pagina statica non da problemi, grazie ancora per il tutorial :)

      Elimina
  5. Ciao Ernesto, una domanda leggermente fuori tema: con blogger è possibile fare una gallery tipo questa? http://www.brainyquote.com/quotes/quote_pictures.html

    RispondiElimina
    Risposte
    1. @# Ho visto il sorgente pagina e ci sono file PHP quindi credo che non esista una versione per Blogger. C'è però una galleria simile a quella ma meno sofisticata
      http://www.ideepercomputeredinternet.com/2012/12/galleria-foto-blogger.html

      Elimina
    2. Grazie per la risposta! c'è un modo di rendere social ogni singola foto come nell'esempio che ho riptortato? o va fatto mano?

      Elimina
    3. @# Inserire i bottoni per i social? Mi sa che sia un problema anche farlo manualmente foto per foto :)

      Elimina
  6. si potrebbe fare una cosa di questo tipo per il godet elenco blog?

    RispondiElimina
    Risposte
    1. @# Puoi adattare questa galleria come ti pare ma non vedo come possa entrarci in qualche modo il widget Elenco blog

      Elimina
    2. in effetti hai ragione ma cerco una soluzione per poter visualizzare le miniature dei blog che seguo inserite con il widget "elenco blog" in una pagina statica (http://www.madeinbottega.com/p/blog-i.html). ti viene in mente qualcosa?

      Elimina
    3. @# Mi sembra che tu abbia fatto comunque già un buon lavoro

      Elimina
  7. Buongiorno, dopo un anno volevo riaggiornare il mio blog ma non trovo più le griglie salvate in wlw e l'interfaccia è diversa da quella del tuo tutorial. ho disinstallato e rinstall'ato l'ultima versione ma l'interfaccia è sempre diversa dalla tua e non da la possibilità di salvare il titolo del post nè di inserire la griglia ecc. come fare? come scaricare la versione del video di youtube?
    Grazie

    RispondiElimina
    Risposte
    1. Questo tutorial serve per creare una galleria di video usando WLW perché è un software che dà la possibilità di creare delle tabelle. Mi pare di capire che nella tua versione di WLW non ci sono più le tabelle? Mi sembra strano. Puoi però usare direttamente il codice di una tabella che puoi crearti da solo
      http://www.ideepercomputeredinternet.com/2011/10/come-inserire-nel-blog-una-tabella-di.html
      @#

      Elimina
    2. ti ringrazio per la risposta così tempestiva. intendevo usarlo proprio per creare una galleria immagini da inserire nella griglia. purtroppo noto che le funzioni di WLW risultano limitate e l'interfaccia diversa da quella che si vede nel tuo tutorial

      Elimina
    3. Con Windows 7 o Windows WLW ha l'interfaccia del post. Forse ai un OS precedente
      @#

      Elimina
    4. ho windows XP, l'interfaccia è simile ad un foglio a quadretti :P

      Elimina
    5. Ho usato WLW anche con XP ma la tabella c'era. La grafica non aveva il menu omnibar ma le funzionalità c'erano tutte. Vai su Inserisci > Tabella
      @#

      Elimina
    6. ok grazie ancora, ho circoscritto il problema. avevo creato un blog con diverse pagine statiche ciascuna contenente una galleria di immagini a tema. al momento di aprire la home page di cui ho acquistato il dominio non riesco ad accedere alle singole pagine statiche. cliccando in alto a destra di WLW su add blog account ed inserendo il link della pagina statica che mi interessa modificare (aggiungere nuove immagini), alla domanda "What blog service do you use?" clicco su "other blog service", aggiungo il link della pagina statica in questione e compare una serie di opzioni "select your blog" nel quale non compare la pagina statica che ho indicato ma solo la home page che risulta vuota e da cui non riesco ad accedere, in WLW, alle singole pagine statiche. in cosa sbaglio?

      Elimina
    7. Concettualmente stai sbagliando tutto. Credevo di essere stato chiaro, avevo pubblicato anche un video di spiegazioni, ma probabilmente mi sbagliavo.

      Non si deve e non si pubblicare nulla con WLW nelle pagine statiche

      Si deve solo generare il codice che poi dovrà essere copiato andando su Origine e incollato su HTML della pagina statica nell'Editor di Blogger.
      Si può collegare WLW a un blog per pubblicare direttamente gli articoli ma in questo caso non c'entra nulla e comunque non è possibile farlo con le pagine statiche.
      @#

      Elimina
    8. ahahah ok mi spiace averti fatto indignare, riparto da zero!

      Elimina
  8. Scusa Ernesto ma io non riesco a trovare l'opzione "inserire immagini dal web". Mi inserisce direttamente le immagini dal computer

    RispondiElimina
    Risposte
    1. Con WLW? Mi sembra strano. Ci deve essere per forza una opzione per inserire una immagine a partire da un URL
      @#

      Elimina
    2. anche io stesso problema, non mi da possibilità di inserire url ma solo immagini dal pc!

      Elimina
    3. Forse hai una vecchissima versione di Windows. Comunque quello che conta è il metodo. Invece che con WLW puoi creare la Galleria anche con l'Editor di Blogger sfruttando il codice di una tabella
      http://www.ideepercomputeredinternet.com/2011/10/come-inserire-nel-blog-una-tabella-di.html
      @#

      Elimina
  9. Gentile Ernesto, mi piacerebbe inserire una galleria nel mio blog seguendo le indicazioni di questo post, ma su Windows Live Writer ho un problema, non riesco a trovare l'opzione "dal Web". Cliccando su immagine mi da solo la possibilità di caricarla dal PC.

    RispondiElimina
    Risposte
    1. Segui questo post
      http://www.ideepercomputeredinternet.com/2013/11/creare-galleria-immagini-blogger-wordpress.html
      che usa i CSS al posto della tabella per la Galleria
      @#

      Elimina
  10. Grazie per il consiglio...alla prossima ^-^

    RispondiElimina
  11. Ciao... per la millesima volta UTILISSIMO!!! G R A Z I E

    RispondiElimina

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.