Come allineare due o più immagini in un post

Come allineare 2, 3 o più immagini con o senza link con l'HTML per pubblicarle in un post di Blogger o Wordpress.

Ho appena letto un commento in cui mi si chiede come si possano allineare due immagini in un articolo. Si tratta di una operazione molto semplice che però non mi ricordo di averla mai affrontato in un articolo specifico. Ho quindi ritenuto di fare un instant post su questo tema.

Il sistema più semplice per allineare le foto è quello di utilizzare il codice di una tabella di una riga e due colonne per allineare due immagini e di una riga con tre colonne per allineare tre immagini. Prima di procedere con il codice vanno comunque caricate le immagini su Picasa per poi ricavarne il link diretto. Come è noto le dimensioni delle immagini caricate su Picasa possono essere modificate operando direttamente sul loro indirizzo.

Il codice da usare per l'inserimento di una immagine è il seguente

<img src="URL_IMMAGINE" alt="Testo Alternativo" title="Tooltip immagine" />

dove va incollato il link diretto della immagine, il Testo Alternativo visibile nei browser che non riescono a caricare le immagini e il Tooltip Immagine che è il testo che si visualizza quando si passa sopra alla immagine con il cursore. Se invece si opta per una immagine con un link a una pagina web si può usare quest'altro codice con il nuovo parametro dell'indirizzo del collegamento

<a href="URL_LINK" target="_blank" ><img src="URL_IMMAGINE" alt="Testo Alternativo" title="Tooltip immagine" /></a>

Il tag target="_blank" è opzionale e serve per aprire la pagina del collegamento in un'altra scheda.

COME ALLINEARE DUE IMMAGINI

Si apre l'Editor di Blogger in Modalità HTML e, nel punto in cui si devono allineare le immagini, si incolla il codice di una tabella di una riga e due colonne

<table cellspacing="2" cellpadding="2" width="600" border="0">
<tbody>
<tr>
<td valign="top" width="300">Codice della immagine 1</td>
<td valign="top" width="300">Codice della immagine 2</td>
</tr>
</tbody>
</table>

dove 600 è la larghezza totale della tabella, 300 è la larghezza di ciascuna cella mentre cellspacing="2" cellpadding="2" sono rispettivamente i valori in pixel che separano due celle adiacenti e il contenuto dal bordo della cella. Nell'Editor avremo una situazione di questo genere

Al posto di Codice della immagine 1 e Codice della Immagine 2 si incollano i codici delle due immagini con o senza link come visto all'inizio del post in questo modo

Se si passa su Scrivi si visualizzeranno le immagini affiancate anche nell'Editor

Le immagini possono anche essere centrate inserendo il tag <div align='center'> all'inizio del codice della tabella e il tag </div> alla fine. Se le immagini fossero troppo larghe si potrebbero sovrapporre. Sarà quindi necessario diminuire la loro larghezza.

COME ALLINEARE TRE IMMAGINI

Per allineare tre immagini il codice da usare è il seguente

<table cellspacing="2" cellpadding="2" width="560" border="0">
<tbody>
<tr>
<td valign="top" width="186">Codice immagine 1</td>
<td valign="top" width="186">Codice immagine 2</td>
<td valign="top" width="186">Codice immagine 3</td>
</tr></tbody></table>

in cui personalizzare i parametri delle dimensioni e incollare il codice delle tre immagini. Il codice si incolla sempre nell'Editor di Blogger ma anche di Wordpress in Modalità HTML. Un esempio di codice anche con i tag per centrare le tre immagini potrebbe essere questo

<div align="center">
<table border="0" cellpadding="2" cellspacing="2" style="width: 560px;">
<tbody>
<tr> <td valign="top" width="186"><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="186"><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="186"><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>

che se incollato in Modalità HTML produce questo risultato

In un prossimo post vedremo come allineare verticalmente immagini di diverse dimensioni.