Net NotesCreare una piccola galleria di immagini

Net Notes Nr. 8
Livello: Avanzato

Vorreste pubblicare alcune foto sul vostro blog fatto con Blogger ma vi capita di litigare con l'editor dei post perché non riuscite a disporre le foto nel modo che preferite?
Blogger permette di aggiungere delle foto ai post, anche diverse, ma l'editor purtroppo non consente di creare delle gallerie di foto e di disporre le rispettive miniature in una sequenza almeno un po' ordinata, senza che paiano buttate alla rinfusa oppure impilate una dopo l'altra in verticale.
In questa puntata delle Net Notes, vedremo uno dei possibili modi per aggirare il problema, per inserire in un post un elenco di foto più o meno corposo.


Certo questo approccio non è molto adatto se avete intenzione di creare una galleria con centinaia di foto (vedremo poi perché...), ma se la vostra necessità è presentare alcune foto (anche qualche decina) in modo ordinato all'interno del vostro post, potrebbe essere una soluzione.
In pratica modificheremo il codice HTML del post ed eventualmente anche il codice CSS per variare l'aspetto delle miniature oppure la spaziatura tra una e l'altra, modificando di fatto il modo con cui la galleria di foto viene presentata, rispetto a come la creerebbe l'editor di Blogger e dando all'elenco delle miniature un aspetto più ordinato.

Veniamo ai dettagli...In pratica, disporremo la piccola galleria di immagini nel nostro post, modificando il codice HTML per usare il tag <UL>, che permette di visualizzare a video una lista di elementi in modo orizzontale. Nel nostro caso gli elementi saranno le miniature cliccabili delle immagini che vogliamo pubblicare.

Fig. 1 - Elenco immagini

Per prima cosa creiamo un post e iniziamo con l'inserirci tutte le foto che desideriamo, senza preoccuparci per il momento del modo in cui verranno disposte. Blogger le disporrà in verticale una dopo l'altra. Per ora basterà impostare per ogni foto la grandezza dell'anteprima, sciegliendo tra quelle proposte da Blogger: Piccola, Media, Grande... Scegliamo "Piccola", cliccando con il tasto destro del mouse su una immagine alla volta.
Fatto questo otterremo un post come quello mostrato in Fig. 1, in cui tutte le foto vengono inserite in pila una dopo l'altra e di dimensioni minime.

Fig. 2 - Modalità HTML

A questo punto cambiamo la modalità di visualizzazione dell'editor di Blogger da "Scrivi" a "HTML". In questo modo potremo vedere il codice HTML della pagina, come mostrato in Fig.2

Fig. 3 - Template della gallery

Come mostrato in Fig. 3 inseriamo all'inizio del codice, prima di qualsiasi altra riga, il codice HTML necessario per creare un piccola ed estremamente semplice e basilare galleria di immagini costituita da un elenco di elementi, che nel linguaggio HTML viene definito Lista ed implementato attraverso il tag <UL> e il tag <LI>.

Fig.4 - Selezione del codice dell'immagine

Sucessivamente andiamo a selezionare il codice HTML corrispondente ad ogni immagine come mostrato in Fig. 4 che è racchiuso all'interno di link (tag <a>) a loro volta contenuti in blocchi <div>.

Fig. 5 - Immagini copiate nei blocchi <li>

Dovremo copiare il codice di ogni immagine, delimitato dai tag <a> all'interno di ogni tag <li> al posto del commento
<!-- immagine qui -->
Il risultato finale è mostrato in Fig. 5.
In termini di codice HTML, la sequenza di link di immagini, ciascuno racchiuso in blocchi <div> che Blogger avrebbe creato in maniera predefinita, è ora una lista di immagini in miniatura.

Fig. 6 - Codice HTML finale

Come ultimo passo, non ci rimane che far pulizia del codice HTML rimasto cancellando i blocchi <div> rimasti ora vuoti, ottenendo un codice come quello mostrato in Fig.6.





Come ritocco finale modifichiamo anche la larghezza predefinita delle miniature per dare un aspetto più allineato e uniforme alla griglia di immagini, impostando le proprietà "width" e "height" (larghezza e altezza) delle immagini, rispettivamente a 150 e 100 pixel.

A questo link potete vedere la semplice galleria di esempio ...

Il codice HTML oltre a consentire di cambiare la dimensione delle miniature a proprio piacere intervenendo sulle proprietà "height" e "width" delle immagini, permette anche di cambiare la spaziatura tra un immagine e l'altra, modificarne il bordo e molto, molto altro.
Per chi volesse approfondire sul vasto campo della programmazione HTML e CSS vi rimando ai link a fondo pagina.

Il procedimento può sembrare macchinoso e in effetti può esserlo, qual'ora lo si debba usare per una galleria con decine di immagini, ma se il nostro scopo è impaginare in maniera abbastanza ordinata una sequenza di alcune immagini, nel nostro esempio ne abbiamo usate 7, può risultare comodo e non così complicato da usare, per ovviare in maniera pratica e abbastanza veloce ai limiti dell'editor di Blogger, che al momento non fornisce alcun sistema per creare una galleria di immagini.
Per poche immagini, con alcune operazioni di copia-incolla sul codice, si può modificare la galleria in pochi minuti.
Se le immagini fossero molte, una soluzione possibile potrebbe essere quella di caricarle in uno dei tanti servizi di hosting di immagini e di pubblicare sul nostro post solo una descrizione e un link alla galleria che si troverebbe fisicamente su un altro sito.
Insomma dipende dai casi.
Quella presentata qui è solo una soluzione pratica di fortuna. Ve ne sono certamente molte altre.




Collegamenti e approfondimenti:

Il linguaggio HTML: http://it.wikipedia.org/wiki/HTML
Il linguaggio CSS: http://it.wikipedia.org/wiki/CSS
Gli elenchi HTML: http://www.mrwebmaster.it/html/ul_8953.html