Come pubblicare immagini Responsive in Blogger.

Come pubblicare su Blogger immagini Responsive che si adattino alla risoluzione del dispositivo, che siano centrate e che abbiano la stessa larghezza.

A seguito di un commento ricevuto ieri sulla possibilità o meno di pubblicare immagini Responsive su Blogger ritengo sia opportuno fare delle considerazioni più approfondite.

In linea di massima Blogger riduce automaticamente le dimensioni delle immagini quando la pagina viene aperta con dispositivi mobili quindi le foto che si pubblicano non escono dal layout del telefonino e quindi non comportano il disagio di dover fare uno scroll laterale.

Ricordo che un elemento o un design si definisce Responsive quando si adatta automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina web.

Abbiamo già visto come rendere Responsive i video e come farlo pure con le tabelle. In questo post vedremo come pubblicare una immagine con l'Editor di Blogger e come visualizzarla al massimo della sua larghezza che poi si adatterà automaticamente alla larghezza del dispositivo con cui viene aperta la pagina.

CARICARE IMMAGINI SU BLOGGER

Per caricare una immagine del computer su Blogger si apre il suo Editor quindi si clicca sulla icona Inserisci immagine. Si va poi su Scegli file e si seleziona nel nostro hard disc l'immagine da pubblicare. La foto in oggetto verrà caricata quindi dovremo cliccarci sopra per selezionarla.

Si clicca poi su Aggiungi selezionate per visualizzare la foto nell'Editor. Si clicca sulla anteprima della immagine per selezionarla di nuovo quindi si sceglie Dimensione originale nel menù orizzontale che si apre in basso. L'immagine potrà essere anche molto larga, pure di 3000 pixel o anche di più. Non preoccuparsi se l'anteprima esce dalla larghezza del post perché poi sarà adattata in seguito.

Dopo questa operazione l'immagine andrà a finire nel nostro account Google Foto collegato a Blogger. Si clicca sul bottone HTML accanto a Scrivi per visualizzarne il codice generato automaticamente.

Nel codice cerchiamo il tag src= e l'URL che viene subito dopo sarà l'indirizzo della immagine ovvero il link diretto su Google Foto. Vediamo come modificare il codice per avere una immagine Responsive che prenda tutta la larghezza del post oppure che ne prenda solo una parte ma rimanendo centrata.

IMMAGINI SU TUTTA LA LARGHEZZA DEL POST

Per rendere le cose più chiare ecco l'indirizzo della immagine che ho usato come test

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf_DhCKv7p6isr03HxSsI8vfDSip0dwBXgw_godNPs4_eDBnPRmL0636rqeWm1zXyhq9iZKhZrVkL4JE_czsOOVMfaqM0q2esN-XN4RNps0SeipTZw4BalfBf_TgBLEVxnGAJYp8I1YKQK/s1600/Inverno.jpg

È particolarmente importante la stringa s1600 che indica la larghezza della immagine. Tale stringa dovrà avere un valore che sia superiore alla larghezza dell'area del post solitamente dell'ordine di 700-800 pixel.

Per mostrare una immagine Responsive dovremo cancellare il codice della immagine creato automaticamente da Blogger e sostituirlo con un nuovo codice che abbia questa sintassi

dove al posto dell'URL colorato di rosso va incollato l'indirizzo copiato nello stesso Editor. Sono importanti anche i testi inseriti nei tag title e alt. Il testo aggiunto tra le virgolette del tag title verrà visualizzato in un tooltip sopra alla immagine quando ci si passa sopra con il mouse. Invece il testo aggiunto tra le virgolette del tag alt è fondamentale dal punto di vista SEO perché è il Testo Alternativo che viene mostrato quando il browser non riesce a caricare la foto. Tali testi possono anche essere identici.

Il semplice trucco per mostrare la foto in tutta la larghezza della pagina è il tag width="100%".

responsive-immagini

Si può controllare la visualizzazione della immagine con le varie risoluzioni usando lo strumento Screenfly.

IMMAGINI CLICCABILI SU TUTTA LA LARGHEZZA DEL POST

L'immagine postata con il codice della precedente sezione non sarà cliccabile. Se preferite pubblicare immagini cliccabili che aprono da desktop il Lightbox nativo di Blogger dovrete usare questo nuovo codice

Dovremo inserire l'URL diretto della foto due volte, una per visualizzare l'immagine e l'altra per creare il collegamento cliccabile alla stessa immagine. Ovviamente dovremo sempre aggiungere il tag width="100%", il Titolo della foto e il Testo alternativo per questioni SEO.

IMMAGINE RESPONSIVE CHE NON PRENDE TUTTA LA LARGHEZZA

Nei due casi precedenti abbiamo visto come pubblicare una foto che prende tutta la larghezza del post. Se questa scelta ci pare eccessiva potremo optare per una larghezza più piccola facendo in modo che la immagine resti sempre al centro del layout e che non abbia nessun contenuto alla sua destra e alla sua sinistra.

Il codice da sostituire a quello di Blogger in questo caso è

dove è stata proposta una larghezza del 92% per lasciare un po' di spazio sulla sinistra e sulla destra. Il codice si riferisce a una immagine cliccabile con due URL identici, uno per la foto e uno per il collegamento.

L'immagine viene centrata dal tag text-align: center; mentre il tag clear: both; impedisce la visualizzazione di altri contenuti su entrambi i lati della foto. Se si preferiscono le immagini non cliccabili basterà eliminare il tag <a href="..."> e quello di chiusura </a>. Ovviamente la percentuale 92% può essere personalizzata. Anche se si utilizza un Tema Responsive di Blogger può essere utile usare questa tecnica per mostrare tutte le foto con lo stesso stile, la stessa larghezza e tutte centrate nel layout.

Pubblicato il 26/08/17 - aggiornato il | 1 commento :