Pubblicato il 08/09/15e aggiornato il

Come pubblicare immagini Responsive con Blogger.

Come pubblicare immagini Responsive con Blogger utilizzando i tag HTML5 figure e picture.
Quando si apre un post di Blogger con un tablet o con uno smartphone le immagini che vi sono pubblicate in linea di massima si adattano alla larghezza del layout del dispositivo con cui vengono visualizzate. Questo non accade sempre con tutte le immagini e con tutti i modelli.

Ricordo a quei pochi che ancora non lo sapessero che il Responsive Design è una tecnica per adattare la grafica di una pagina web alla larghezza del dispositivo con cui viene visualizzata. Si possono installare Modelli Responsive per Blogger oppure scegliere tra i tanti Temi Responsive per Wordpress.

Nel linguaggio HTML5  sono stati introdotti i tag figure e picture per postare immagini responsive cioè che adattino la loro larghezza al dispositivo. Poniamo che volessimo pubblicare una foto di grandi dimensioni per esempio in una pagina statica che sia stata debitamente allargata. Se si carica una foto su Picasa per averne il link diretto dobbiamo cliccarci sopra, andare sulla destra

link-immagini-picasa

e cliccare su Link a questa foto. Si aprirà un tool per incorporare l'immagine. Si mette la spunta a Solo immagine (nessun link) per copiare l'indirizzo della foto. Su dimensioni si visualizzeranno cinque opzioni: Miniatura 144px, Piccola 288px, Media-400 400px, Media-640 640px e Grande 800px. Quando l'immagine è più piccola di 800 pixel c'è anche l'opzione Dimensione originale

COME AVERE IL LINK DI IMMAGINI PIÙ LARGHE


Si possono avere anche URL di immagini più larghe di 800 pixel. Dopo aver copiato l'URL 

lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s800-Ic42/ponte.jpg

si modifica la parte della stringa che ne determina la larghezza. Nell'esempio precedente si sostituisce s800 con s1368 per portare la larghezza della foto da 800 pixel a 1368 pixel

lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s1368-Ic42/ponte.jpg

Vediamo adesso che codice usare per rendere responsive questa immagine di 1368 pixel in modo che venga visualizzata correttamente da tutti i dispositivi mobili.

<figure>
  <img style="width:100%"
       alt="Ponte su torrente"
      src="https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s1368-Ic42/ponte.jpg"
      srcset="https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s689-Ic42/ponte.jpg 689w,
               https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s1368-Ic42/ponte.jpg 1368w,
               https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s500-Ic42/ponte.jpg 500w,
               https://lh3.googleusercontent.com/-gjegxmtnePk/Ve7U8Km7zxI/AAAAAAAAw0o/WnIXUXmJ0Ds/s1000-Ic42/ponte.jpg 1000w"
       sizes="(min-width: 1066px) 689px,
              (min-width: 800px) calc(75vw - 137px),
              (min-width: 530px) calc(100vw - 96px),
              100vw">
</figure>

dove nell'attributo src=".." metteremo l'URL della immagine originale per farla visualizzare nei browser che non supportano HTML5 e utilizzeremo il tag srcset per settare le varie dimensioni per i diversi dispositivi. Questo codice può essere pubblicato in un post insieme agli altri contenuti  

Ponte su torrente




2 commenti :

  1. Ciao Ernesto e complimenti come sempre per i tuoi tutorial. Avrei una domanda da porti riguardo questo post: di solito nel mio blog inserisco immagini con larghezza 500px ma in un post specifico ho dovuto inserirne alcune con larghezza pari a 750 px. Su smartphone e pc nessun problema, i problemi nascono sul tablet (visualizzazione desktop e non mobile) sul quale le immagini non vengono ridimensionate e sforano nella colonna dei widget. Posso utilizzare il codice da te fornito al posto di quello classico (quello che si ha caricando un'immagine dalla barra di blogger) direttamente nel codice HTML del post che ha questo prolema?
    Grazie in anticipo
    Fabio

    RispondiElimina
    Risposte
    1. Sì puoi provare anche mi sembra una cosa molto particolare (vista da tablet con opzione visualizzazione desktop). Non ti resta che testare altro non ti so dire
      @#

      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.