Pubblicato il 13/11/15e aggiornato il

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


tabella-html






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

immagini-affiancate[4]
Se si passa su Scrivi si visualizzeranno le immagini affiancate anche nell'Editor

allineare-immagini-post
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://lh3.googleusercontent.com/-YmKeu5NLpgk/TeyZPtp_LYI/AAAAAAAATa4/xVNGKcbuhr8/s150-Ic42/pinguini.jpg" title="pinguini" /></td>
<td valign="top" width="186"><img alt="rettile" src="https://lh3.googleusercontent.com/-yJrqj61WRVs/TeyZUK9FoqI/AAAAAAAATa8/UiocubjKZLc/s150-Ic42/rettile.jpg" title="rettile" /></td>
<td valign="top" width="186"><img alt="margherita" src="https://lh3.googleusercontent.com/-OrlbdbLsI1Y/TeyZGY3bVoI/AAAAAAAATaw/TUakS-fMAXI/s150-Ic42/margherita.jpg" title="margherita" /></td>
</tr></tbody></table>
</div>

che se incollato in Modalità HTML produce questo risultato

pinguini rettile margherita

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




7 commenti :

  1. Grazie Ernesto per avermi risposto e aver dedicato addirittura un post sul tema.
    Purtroppo non ci sono riuscito. Ho sbagliato qualche passaggio.
    Non ho capito cosa devo inserire nel "codice immagine 1" e "codice immagine 2". Devo inserire l'url immagine di Picasa? Cos'è il Testo alternativo e il Tooltip immagine?

    RispondiElimina
    Risposte
    1. @# La sintassi del codice da inserire è il primo codice del post. Nel testo Alternativo e nel Tooltip Immagine evi digitare semplicemente il nome della foto senza apostrofi. Ti posto un esempio di un codice di due immagini affiancate in cui devi sostituire solo l'URL delle immagini e il nome della foto

      <table cellspacing="2" cellpadding="2" width="600" border="0">
      <tbody>
      <tr>
      <td valign="top" width="300"><img alt="pinguini" src="https://lh3.googleusercontent.com/-YmKeu5NLpgk/TeyZPtp_LYI/AAAAAAAATa4/xVNGKcbuhr8/s280-Ic42/pinguini.jpg" title="pinguini" /></td>
      <td valign="top" width="300"><img alt="rettile" src="https://lh3.googleusercontent.com/-yJrqj61WRVs/TeyZUK9FoqI/AAAAAAAATa8/UiocubjKZLc/s280-Ic42/rettile.jpg" title="rettile" /></td>
      </tr>
      </tbody>
      </table>

      Elimina
    2. Perfetto ci sono riuscito, grazie ancora!!

      Elimina
  2. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Non so cosa intendi esattamente. Prova queste soluzioni
      http://www.ideepercomputeredinternet.com/2013/04/tooltip-images-hover.html
      http://www.ideepercomputeredinternet.com/2014/03/testo-sopra-immagine-css-html.html
      http://www.ideepercomputeredinternet.com/2013/10/effetti-css-immgini.html
      @#

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Questo sistema va bene
      http://www.ideepercomputeredinternet.com/2014/03/testo-sopra-immagine-css-html.html
      @#

      Elimina

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.