Come allineare immagini anche con link e in modo responsive.

Come allineare orizzontalmente e verticalmente due o più immagini in modo responsive per visualizzarle correttamente anche da smartphone e tablet.

Quando si inseriscono delle immagini in un post tramite l'Editor di Blogger o di Wordpress le possiamo allineare a sinistra, a destra o al centro. Non ci sono dei pulsanti negli Editor Wysiwyg per allineare due o più immagini.

Per poterlo fare si possono usare diversi metodi come quello di usare una tabella o quello di usare il CSS. In questo post vedremo alcune di queste possibili opzioni con l'aggiunta anche di collegamenti per aprire un'altra pagina web da parte di chi clicca sopra alle immagini.

METTERE ONLINE LE IMMAGINI

Le foto per essere pubblicate debbono prima essere messe online. Gli utenti di Blogger possono usare Google Foto come hosting da cui ricavare il link diretto alle immagini necessario per inserirlo nel codice. Si possono usare però altri hosting come Flickr, OneDrive, Dropbox. Gli utenti di Blogger possono anche creare un blog di test o di prova per poi pubblicarvi le foto da usare nel blog principale. Il loro link diretto lo si potrà trovare cliccandoci sopra con il destro del mouse per poi scegliere Copia l'indirizzo della immagine.

Dopo che si è risolto questo problema si può passare al loro allineamento. Per testare il funzionamento di un codice si può utilizzare il tool Real Time Editor che mostrerà quella che sarà la resa del browser.

ALLINEARE LE IMMAGINI CON UNA TABELLA

In precedenti post abbiamo visto come creare una tabella personalizzata anche con il responsive design. Per allineare delle immagini non occorrono tabelle particolarmente personalizzate con i CSS. Con un codice come il seguente

<table width="100%" border="0">
<tbody>
<tr>
<td style="width:30%; padding:20px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCdUUAV0A-Ffv65yuEVGmZrPAqm4lfT5hTX86tBkRGeZBxBAov-rbg7Q4zXJihrixDFe9tTlJGh_u82rQz7VR9VIo4q9QXAYS0v5T_K4FOVGIFTFsgIHqeOPKmX2KA6NPTdu1ch0aa390/180/Inverno.jpg" alt="inverno"/></td>
<td style="width:30%; padding:20px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YY8g2e7_MJsoGxvSdwi1yv9LmxVXCTxokKpwDLgJvlQDAFT54nFU1FisZLSzeu_wjcYkBMgel2uLLTa9oGld_a_kAOJWJdMOv-Bl6T-xaNFQQbg3PAQ3esiWDlB809OlNPBRp2uVBQo/s180/lago-fiorito.jpg" alt="lago-fiorito"/></td>
<td style="width:30%; padding:20px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYzidMs3dptJ9A2H0pfRqffIoyKpmsWL4bLl2aJ1ePyymBrBklsEbR3X_6Uhyphenhyphen0KHBGrij8jsD8l5HINFfZcLwNiw86wBR89rOMSQ6aLBsMObSMPjvfhblqBQmllcyunB5EPMn7_CjSDw0/180/ghiacciaio.jpg" alt="ghiacciaio"/></td>
</tr>
</tbody>
</table>

verranno allineate tre immagini. Il risultato sarà il seguente

Essendo le immagini in numero di tre, ho inserito delle percentuali di larghezza del 30% per ciascuna cella della tabella con un padding di 20 pixel che comporta una separazione di 40 pixel tra immagine adiacenti. Le singole foto larghe 180 pixel il che porta a una larghezza totale di 660 pixel.  Queste immagini saranno visualizzate allineate e responsive anche da smartphone.

Gli URL delle foto colorati di rosso debbono essere sostituiti da quelli delle vostre foto così come il testo all'interno del tag alt con il nome delle foto che è fondamentale dal punto di vista SEO. Si possono aggiungere anche altre foto inserendo altre righe con la seguente sintassi

<td style="width:22%; padding:10px;"><img src="URL_FOTO" alt="nome-foto"/></td>

dove ho modificato la percentuale pensando che quella aggiunta sia la quarta immagine. Se si volessero aggiungere dei link a ogni foto il codice di ciascuna riga diventa

<td style="width:22%; padding:10px;"><a href="URL_LINK" target="_blank"><img src="URL_FOTO" alt="nome-foto"/></a></td>

COME ALLINEARE VERTICALMENTE IMMAGINI DI DIVERSE DIMENSIONI

Se le immagini sono di diverse dimensioni le si possono allineare in tre modi: allineamento in alto, allineamento in basso e allineamento al centro. Con questo nuovo codice

<table width="100%" border="0">
<tbody>
<tr>
<td style="width:30%; padding:20px; vertical-align:middle;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCdUUAV0A-Ffv65yuEVGmZrPAqm4lfT5hTX86tBkRGeZBxBAov-rbg7Q4zXJihrixDFe9tTlJGh_u82rQz7VR9VIo4q9QXAYS0v5T_K4FOVGIFTFsgIHqeOPKmX2KA6NPTdu1ch0aa390/240/Inverno.jpg" alt="inverno"/></td>
<td style="width:30%; padding:20px; vertical-align:middle;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0YY8g2e7_MJsoGxvSdwi1yv9LmxVXCTxokKpwDLgJvlQDAFT54nFU1FisZLSzeu_wjcYkBMgel2uLLTa9oGld_a_kAOJWJdMOv-Bl6T-xaNFQQbg3PAQ3esiWDlB809OlNPBRp2uVBQo/s180/lago-fiorito.jpg" alt="lago-fiorito"/></td>
<td style="width:30%; padding:20px; vertical-align:middle;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYzidMs3dptJ9A2H0pfRqffIoyKpmsWL4bLl2aJ1ePyymBrBklsEbR3X_6Uhyphenhyphen0KHBGrij8jsD8l5HINFfZcLwNiw86wBR89rOMSQ6aLBsMObSMPjvfhblqBQmllcyunB5EPMn7_CjSDw0/120/ghiacciaio.jpg" alt="ghiacciaio"/></td>
</tr>
</tbody>
</table>

vengono allineate immagini rispettivamente di dimensioni di 240 pixel, 180 pixel e 120 pixel. L'allineamento scelto è quello al centro delle foto tramite il tag vertical-align:middle; . Il risultato ottenuto è il seguente

Per ottenere questi altri due tipi di allineamento verticale

si dovrà sostituire vertical-align:middle; rispettivamente con vertical-align:top; per un allineamento verso l'alto e con vertical-align:bottom; per un allineamento verso il basso. Anche con questi diversi allineamenti verticali si possono aggiungere i collegamenti con la stessa sintassi già vista. Concludo ricordando che il tag target="_blank" è opzionale e serve per aprire il link in un'altra scheda e che questi codici funzionano sia su Blogger sia su Wordpress. Inoltre possono essere usati sia per allineare delle foto all'interno di un post sia in un widget HTML/Javascript.