Come ridimensionare le immagini in Blogger.

Modificare le dimensioni di una immagine è operazione molto semplice che può essere fatta in molti modi. Si può per esempio andare nell'Editor di Blogger, selezionare l'immagine e scegliere tra Piccola, Media, Grande, Dimensione originale e Extralarge. Se la foto è stata inserita usando il suo indirizzo web si può operare direttamente nel codice modificando i valori di width e height. Una delle domande ricorrenti è come si possa ridimensionare automaticamente tutte le immagini che siano già state pubblicate nel blog operando nel template. Questa opzione può risultare utile per chi abbia già pubblicato centinaia se non migliaia di foto e abbia necessità di mostrarle di una larghezza standard perché per esempio ha cambiato il template.

Metodo 1: modificando il Modello.

Mettiamo il caso che si sia passati da un modello di Blogger con una ampia area del post a un template che la abbia invece più piccola. Avevamo pubblicato delle immagini larghe che adesso non si adattano più al nuovo modello e debordano nella sidebar adiacente. Poniamo che le dimensioni massime supportate per le immagini siano di 500 pixel e di mantenere il rapporto tra larghezza e altezza.

Visto che l'Editor del template di Blogger è recentemente cambiato vediamo come procedere con la nuova interfaccia. Si va su Modello > Modifica HTML e si clicca in un'area vuota della scheda Modifica Modello. Si digita Ctrl+F e, nel campo Search che si apre, si incolla ]]></b:skin> quindi si va su Invio per visualizzare l'area del codice in cui è presente tale linea che sarà evidenziata

Si posiziona il cursore subito sopra a tale linea e si incolla questo codice

.post-body img {
max-width: 500px !important;
width: espression(this.width>500 ? 500: true;)
height: auto!important; }

Si salva il modello.Ovviamente il valore 500 pixel può essere adattato e modificato a piacere. Tutte le immagini che abbiano una larghezza inferiore a 500 pixel rimarranno immutate mentre quelle con larghezza superiore si ridimensioneranno a 500 pixel mantenendo inalterate le proporzioni. Si tratta di un'ottima soluzione per chi abbia cambiato template e adesso si trovasse con una gran quantità di immagini che siano troppo grandi per una area del post diventata più piccola.

Nei vecchissimi modelli al posto di .post-body img potrebbe essere necessario inserire .post img.

Metodo 2: come ridimensionare una immagine online da inserire nel blog su Blogger con il codice HTML.

Per modificare le dimensioni di una immagine o di una foto presente su Internet ed adattare le misure per l’inserimento in un post oppure in un gadget HTML/Javascript della colonna laterale di Blogger è possibile impostare direttamente nel codice HTML le misure personalizzate di larghezza (width) e di altezza (height) della foto da visualizzare nel blog di Blogspot senza dover caricare una nuova immagine sul web.
Gli attributi width e height del tag IMG indicano infatti al browser web come deve essere visualizzata l’immagine indipendentemente dalle dimensioni originali caricate nel servizio di hosting su Internet.

In questo esempio di codice HTML per inserire il link con una immagine:

<br /><a href="http://fabriziocastelli.blogspot.com/" target="_blank"><img src="http://i47.tinypic.com/23rjtsh.jpg" /> </a><br />

Possiamo aggiungere gli attributi HTML: width="larghezza" height="altezza"

Sostituendo quindi i termini "larghezza" ed “altezza” con le nuove dimensioni indicate in pixel (mantenendo possibilmente le proporzioni tra altezza e larghezza della foto) in questo caso: width="366" height="192">

ed inserendo successivamente gli attributi per ridimensionare l’immagine online da visualizzare in un blog su Blogger o su Wordpress o in un sito web in coda al tag IMG in questo modo:

E’ anche possibile indicare un valore in percentuale es: "width="75%" height="75%"

per mantenere inalterate le proporzioni in un’immagine da ridurre o ingrandire per essere inserita in un blog su Blogger o su Wordpress.