Pubblicato il 23/08/19 - aggiornato il  | 31 commenti :

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.

creare-tabella

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.

allineamento-immagini

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

immagini-allineate

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.


31 commenti :

  1. Buonasera, avrei una domanda. Ho inserito il codice per ottenere 3 immagini allineate, ma ho problemi con la spaziatura tra ogni foto. Escono tutte attaccate, come è possibile? Grazie

    RispondiElimina
    Risposte
    1. Se tu incolli il codice di test presente nel post in un editor HTML online come questo
      https://htmledit.squarefree.com/
      vedi che l'allineamento funziona. Se a te non funziona è probabile che tu abbia sbagliato qualcosa o che lo spazio del tuo layout sia inferiore a quello della tabella. Ti consiglio di incollare il codice del post così come è nel tuo sito per controllare che funzioni quindi sostituire gli indirizzi con quelli delle tue immagini.
      @#

      Elimina
  2. Utilizzo il codice da diverso tempo, ed ha sempre funzionato, però stavolta nulla. Le foto sono escono tutte attaccate :(

    RispondiElimina
  3. Ho appena notato però che è da quando ho inserito il tema "soho pink" che anche negli altri post non ci sono più gli spazi tra le foto. Potrebbe essere causato quindi dalle dimensioni della colonna post?

    RispondiElimina
    Risposte
    1. Da quando sono usciti i nuovi modelli di Blogger ho smesso di occuparmi di codice perché i template sono tutti diversi gli uni dagli altri e non è più possibile creare del codice affidabile. Il Tema Soho è appunto uno di quelli nuovi responsive.
      @#

      Elimina
  4. Capisco, quindi non c'è alcun modo per cambiare qualche impostazione?

    RispondiElimina
    Risposte
    1. Il codice è corretto visto che è testato nel tool online. Il problema sono i nuovi Temi di Blogger.
      @#

      Elimina
    2. @# Essendo temi responsive si dovrebbero usare le percentuali invece dei valori assoluti per le lunghezze p.e. width="100%" invece di width="520px" ma non si può creare un codice unico che va bene per tutti i modelli. Prova con questo codice

      <div align="center">
      <table style="width: 100%;">
      <tbody>
      <tr> <td valign="top" width="30%"><img alt="pinguini" src="https://lh3.googleusercontent.com/-YmKeu5NLpgk/TeyZPtp_LYI/AAAAAAAATa4/xVNGKcbuhr8/s150-Ic42/pinguini.jpg" title="pinguini" /></td>
      <td valign="top" width="30%"><img alt="rettile" src="https://lh3.googleusercontent.com/-yJrqj61WRVs/TeyZUK9FoqI/AAAAAAAATa8/UiocubjKZLc/s150-Ic42/rettile.jpg" title="rettile" /></td>
      <td valign="top" width="30%"><img alt="margherita" src="https://lh3.googleusercontent.com/-OrlbdbLsI1Y/TeyZGY3bVoI/AAAAAAAATaw/TUakS-fMAXI/s150-Ic42/margherita.jpg" title="margherita" /></td>
      </tr></tbody></table>
      </div>

      e eventualmente lavora su larghezza delle immagini e percentuali. O eventualmente quest'altro

      <div align="center">
      <table style="width: 100%;">
      <tbody>
      <tr> <td valign="top" width="35%"><img alt="pinguini" src="https://lh3.googleusercontent.com/-YmKeu5NLpgk/TeyZPtp_LYI/AAAAAAAATa4/xVNGKcbuhr8/s150-Ic42/pinguini.jpg" title="pinguini" width="35%" /></td>
      <td valign="top" width="35%"><img alt="rettile" src="https://lh3.googleusercontent.com/-yJrqj61WRVs/TeyZUK9FoqI/AAAAAAAATa8/UiocubjKZLc/s150-Ic42/rettile.jpg" title="rettile" width="35%" /></td>
      <td valign="top" width="35%"><img alt="margherita" src="https://lh3.googleusercontent.com/-OrlbdbLsI1Y/TeyZGY3bVoI/AAAAAAAATaw/TUakS-fMAXI/s150-Ic42/margherita.jpg" title="margherita" width="35%" /></td>
      </tr></tbody></table>
      </div>

      Elimina
  5. Ciao Ernesto, perdona ancora il disturbo! Ho utilizzato l'ultimo codice, modificando le percentuali al 30% e 95%. L'unico problema che ho è che non centra le foto, nonostante div align center.

    RispondiElimina
  6. No, nulla. Ero convinto funzionasse. Le foto escono distanziate e allineate correttaente ma quando clicco sulla foto poi non si apre. Non so se dipende dall'URL che è cambiato rispetto a quello di qualche tempo fa:

    https://blogger.googleusercontent.com/img/a/AVvXsEjIl8SpiDMHlaS8mW2WZLYA67OA0ue4EyGpzsE5pd6liJENUDbuKOzJxwyxFUJGw19wnnltCGzA5atNgXrWIf6enPisFdvkq7su0K_bX6t9pQNVBtYsnCTI-Nu164jOXwjJ5PC1SPJqYF_9acb8unNHdCmlSxLCeioCSSGiMHKkiuY0-rztX84PiEyDAA=s942

    RispondiElimina
    Risposte
    1. @# Le immagini non hanno link quindi non si aprono. Per aprirle devi inserire un collegamento alla sorgente della immagine. Ovviamente lo puoi inserire anche a un'altra pagina web. Ti mostro come fare solo per una cella poi modifichi anche le altre celle con la stessa sintassi e gli URL delle immagini e metti la percentuale che credi

      <td valign="top" width="35%"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjIl8SpiDMHlaS8mW2WZLYA67OA0ue4EyGpzsE5pd6liJENUDbuKOzJxwyxFUJGw19wnnltCGzA5atNgXrWIf6enPisFdvkq7su0K_bX6t9pQNVBtYsnCTI-Nu164jOXwjJ5PC1SPJqYF_9acb8unNHdCmlSxLCeioCSSGiMHKkiuY0-rztX84PiEyDAA=s942"/><img alt="girl" src="https://blogger.googleusercontent.com/img/a/AVvXsEjIl8SpiDMHlaS8mW2WZLYA67OA0ue4EyGpzsE5pd6liJENUDbuKOzJxwyxFUJGw19wnnltCGzA5atNgXrWIf6enPisFdvkq7su0K_bX6t9pQNVBtYsnCTI-Nu164jOXwjJ5PC1SPJqYF_9acb8unNHdCmlSxLCeioCSSGiMHKkiuY0-rztX84PiEyDAA=s942" title="girl" width="35%" /></a></td>

      Elimina
  7. Buongiorno Ernesto, perdona nuovamente il disturbo. Sto utilizzando un nuovo template ma ho appena notato che attorno alle immagini si forma una griglia/tabella con i bordi. E' possibile in qualche modo ovviare a questo problema? Ti ringrazio

    RispondiElimina
    Risposte
    1. Questo post di istruzioni per risolvere
      https://www.ideepercomputeredinternet.com/2012/07/eliminare-bordi-immagini-blogger.html
      è di 10 anni fa quindi non so se funzionerà ancora. Sono soprattutto i selettori
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img
      a farmi pensare che adesso siano diversi. Il resto del codice dovrebbe però andare bene
      @#

      Elimina
    2. Non sono i bordi, è proprio la tabella. Ti allego qui una fotohttps://postimg.cc/GBn43k8R

      Elimina
  8. Perdona, ho inserito un link. Ad ogni modo vedo il bordo non dell'immagine, ma della griglia

    RispondiElimina
  9. L'indirizzo che hai postato è inutilizzabile. Cmq non credo di poterti aiutare oltre al link che ti ho postato nel commento 7.a
    @#

    RispondiElimina
  10. Provo a linkare il blog direttamente. Attorno alle foto si crea una tabelle: https://sprock-anastacia.blogspot.com/p/soliver.html

    Ti ringrazio

    RispondiElimina
    Risposte
    1. @# Hai usato il codice del commento 4.b?
      In questo caso prova a modificare questa riga
      <table style="width: 100%;">
      con questa
      <table style="width: 100%; border: none !important;">

      Elimina
  11. Si ho usato il codice del commento 4.b e ho inserito l'ultima stringa correttamente ma appare sembra la tabella intorno. Ora che ho finalmente trovato un template perfetto non riesco a sistemare le immagini dei post :(

    RispondiElimina
    Risposte
    1. Ho analizzato il codice della pagina che mi hai linkato ma non sono riuscito a trovare una contromisura per lo stile delle tabelle che è ereditato dal Tema 🙁
      @#

      Elimina
  12. Che peccato, ti ringrazio infinitamente Ernesto!

    RispondiElimina
  13. Non c'è alcun modo per agire modificando qualche codice HTML vero?

    RispondiElimina
    Risposte
    1. I modi ci sarebbero sicuramente però bisognerebbe parlare con chi ha creato il Tema
      @#

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

    RispondiElimina
  15. Ciao Ernesto, perdona il disturbo. Dopo diversi mesi ci sto riprovando. Utilizzando questi codici riesco ad allineare 2 o più foto...l'unico problema è che quando poi completo il post e ci clicco sopra le immagini non sono cliccabili. Ho inserito come il link quello di google ma porta direttamente ad un'altra pagina e la foto non si apre più nel blog. Sai come si può fare per ovviare questo problema? Ti ringrazio.

    Qui il post: https://sprock-anastacia.blogspot.com/2022/07/laaa.html


    RispondiElimina
  16. Ho risolto con i link, ma nel momento in cui vado a mettere un'altra striscia di foto succede un casino! :( sono disperato

    RispondiElimina
  17. Sono riuscito! Finalmente!! Grazie comunque Ernesto!

    RispondiElimina
  18. Buonasera Ernesto! Ho un problema sempre con le immagini. Ultimamente ho creato un post con più di 10 immagini e ho notato che quando lo salvo i post esterni (in anteprima) scendono all'altra pagina...come se si creasse un errore! Sapresti suggerirmi qualche soluzione? Ti ringrazio. https://sprock-anastacia.blogspot.com/

    RispondiElimina
    Risposte
    1. Non capisco cosa significhi post esterni e scendono in altra pagina. Ho dei limiti di comprensione mi spiace 😊
      @#

      Elimina
    2. Hai ragione, mi son spiegato male. Quando inserisco più di 10 immagini in un post, nella home (nella sezione NEWS) i post da 6 diventano 4.

      Elimina
    3. Ovvio. Se vai nella Bacheca su Impostazioni -> Post si può scegliere il numero di post da mostrare in home con un massimo di otto ma il loro numero dipende dalla lunghezza e dalla pesantezza dei post e quindi il loro numero in Home diminuisce se aumenta la lunghezza dei post. Per non avere problemi di deve inserire un intervallo del Continua a Leggere per mostrare in home solo incipit degli articoli. Non è però possibile farlo in alcuni Temi scaricati da internet.
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy