Come allineare 2, 3 o più foto in un post

Come allineare le immagini in una pagina web usando il codice HTML di una tabella

Negli Editor di Blogger e Wordpress ci sono i pulsanti per scegliere l'allineamento delle immagini. Si possono mostrare sulla sinistra, sulla destra o al centro. Inoltre si può decidere se la foto aggiunta possa essere o meno contornata dal testo della pagina web.

Per visualizzare le immagini, senza niente da entrambi i lati, si usa la proprietà display:block; mentre, per mostrala integrata nel testo, il tag da usare è display:inline;. Non ci sono invece pulsanti per allineare due, tre o più immagini e d'altra parte sarebbe davvero difficile crearli. 

In questo post vedremo come procedere per mostrare delle foto allineate. In teoria non ci sono limiti per il numero di immagini che si vogliono allineare. L'unico vincolo è quello della larghezza del layout della pagina web che deve essere naturalmente inferiore alla somma delle larghezze delle foto, sommate allo spazio da mettere tra le stesse.

Il sistema migliore per operare questa personalizzazione è quello di creare una tabella di una sola riga con un numero di colonne pari al numero delle foto da allineare. Si tratta di creare una tabella con una riga e due colonne per allineare due immagini e di una riga con tre colonne per allineare tre immagini.

Un'altra operazione necessaria è quella di caricare nel web le foto da mostrare nella pagina, per poi ricavarne il link diretto. Gli utenti di Blogger possono farlo creando una Bozza di un post, caricandovi le foto per poi andare in Modalità HTML e copiarne l'indirizzo. Si possono trovare più informazioni in questo post.

COME CREARE IL CODICE DELLA TABELLA

Ci sono dei tool online che ci permettono di ottenere il codice HTML di una tabella, come per esempio HTML Div Table Generator. Si clicca con il mouse sul quadratino 3x1 per allineare tre immagini.

Sulla sinistra si visualizzerà l'anteprima mentre sulla destra è visibile il codice HTML della tabella. Non resta che incollare le immagini da allineare al posto degli spazi individuati dai tag   colorati di blu.

Le immagini vanno incollate con un codice appropriato che abbia questa sintassi

<img alt="caraibi1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgljOnPHruLfLKWfZRJntuS2D3cuFh_IHgmyrlUEEuG8sRf2skq_GiwFITk9u33GwNeIiUJgbCJmrOiFyBTcUDlWNc9fhkxPfeak17-W7-sMhbnhwfdnzrnhDFFUoUqmWA1Drh7KkVAJfk/s1600/1.jpg" title="caraibi1" />

dove, oltre all'URL della foto, sono stati inseriti gli attributi Alt e Title, importanti dal punto di vista SEO.

Sulla sinistra si visualizzerà l'anteprima delle immagini allineate. Prima di procedere, si può scegliere Width 100%, per prendere tutta la larghezza del layout. Si seleziona tutto il codice presente sulla destra, ad eccezione dell'ultima riga, che è un commento con il nome del sito. Ci si clicca sopra con il destro del mouse quindi si copia.

Le immagini si posizioneranno nella stessa linea, a una stessa distanza una dall'altra in funzione della larghezza del layout della pagina e di quella delle stesse immagini. Quello che abbiamo fatto con tre immagini, lo possiamo fare anche con 4 o più foto. La larghezza delle foto può essere settata anche in un secondo momento.

CREARE IL CODICE DELLE IMMAGINI ALLINEATE

Si può usare anche un codice già predisposto come questo

<div align="center">
<table style="width: 520px;">
<tbody>
<tr> <td valign="top" width="160"><img alt="pinguini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyXREVfh4XE9IKI9O3gvcA2gTazqzQC9j3gL_NTJUk1rp8IMc3jvOZrv0H3GgoDlC6qKQJVaysjH1xR6I80aZdSGikBhiEu0wW05mN8dz15T5p1lCq_6GzhyphenhyphenwbkcENbPcjqtVP4hFpp0/s150-Ic42/pinguini.jpg" title="pinguini" /></td>
<td valign="top" width="160"><img alt="rettile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiegyB5UbZkiSF4wkrh4xMWkZRE0qdEsCYfCRCG1t0v8hxAvG7W68yu17IIvnrHvvWPhPPCnI_xc721DygYL7bRfZnRL6INPCnDBSYfOIGZ0qq5sEP6BAg4t7i_fWDzfVOi3IfSXJ74sNU/s150-Ic42/rettile.jpg" title="rettile" /></td>
<td valign="top" width="160"><img alt="margherita" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhS0g_lAkryv7zpEFcsSBMhwC3EEiD8QxsWa-Gr1P4MLDU-6SITJ6JGfI5QBZtGMikS2RcULOY_BxqtkfDZ7arrhyphenhyphen6Xpu-2TIJrzlWdd0RrJzEK1pOKttXhFQJEYc60Va1-COaV0EJ48/s150-Ic42/margherita.jpg" title="margherita" /></td>
</tr></tbody></table>
</div>

per mostrare tre foto una accanto all'altra delle dimensioni di 150 pixel ciascuna, in delle celle larghe 160 pixel e con una tabella larga complessivamente 520 pixel. Inoltre le immagini sono state anche centrate nel layout.

Ho anche inserito il tag  valign="top" per allineare tutte l'immagini verso la parte alta. Il codice generico per allineare due immagini è invece il seguente

<table style="500px;">
<tbody>
<tr>
<td valign="top" width="240">Codice della immagine 1</td>
<td valign="top" width="240">Codice della immagine 2</td>
</tr>
</tbody>
</table>

in cui personalizzare le dimensioni e aggiungere il  codice delle due immagini.