Rendere le immagini di Blogger tutte della stessa larghezza.

Come ridimensionare automaticamente tutte le immagini dei post di Blogger e utilizzare i tag condizionali per le eccezioni.

Le immagini di Blogger solitamente sono inserite nei post con l'Editor di Blogger in cui si possono scegliere le dimensioni proposte cliccando sulle opzioni Piccola, Media, Grande, Dimensione originale e Extralarge. Si può anche inserire nel modello una condizione particolare per cui dette foto non possano superare una determinata larghezza. Questo può essere utile se si modifica il modello e se nel nuovo layout non entrano le immagini più larghe di un certo numero di pixel.

Se siamo soliti postare foto tutte più o meno delle stesse dimensioni potremmo volerle ridimensionare tutte insieme. Questo significa che potremmo volere tutte le foto larghe per esempio 500 pixel. Con la modifica che vado a presentare le immagini meno larghe di 500 pixel si ingrandiranno mentre quelle più larghe si rimpiccioliranno mantenendo però inalterate le proporzioni.

Le immagini risultanti risulteranno tutte della stessa larghezza a prescindere dalle dimensioni originali. Si va su Modello > Modifica HTML, si cerca la riga di codice ]]></b:skin> quindi, subito sopra a questa, si incolla questo semplice CSS

.post-body img {
width: 500px !important;
height: auto !important;
}

dove al posto di 500px può ovviamente essere inserito un altro valore per la larghezza. Dopo aver salvato il modello tutte le immagini dei post si visualizzeranno con la stessa larghezza e con l'altezza in proporzione. È anche possibile andare oltre e per esempio inserire una cornice usando un particolare stile del bordo. Se al posto del precedente incolliamo infatti questo codice

.post-body img {
width: 500px !important;
height: auto !important;
border: 2px solid #940F04 !important;
}

il risultato sarà quello di avere una cornice di spessore 2 pixel e di colore 940F04 in tutte le immagini

CASI PARTICOLARI

Se ci fosse una immagine che non vogliamo assolutamente ridimensionare e che vogliamo mantenere nella grandezza originale basterà aprire il post con l'Editor e modificare il codice del post in modo da ottenere questo risultato

Per impedire che la foto con il codice seguente venga ridimensionata

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_JKYsES3Vos-ZwRwEK7hm6diwxZsGBuGorW5QpCwwQbk4jcgUQXFDc6mWymc2c7BxmtAFgKFlXGvGcMWML40JN2iOcPQAl3sE6o9dzXfPlcHtpN1lU_rirj7JD3CYbTmEZH6OBJFRqqw/s1600/pesce1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_JKYsES3Vos-ZwRwEK7hm6diwxZsGBuGorW5QpCwwQbk4jcgUQXFDc6mWymc2c7BxmtAFgKFlXGvGcMWML40JN2iOcPQAl3sE6o9dzXfPlcHtpN1lU_rirj7JD3CYbTmEZH6OBJFRqqw/s1600/pesce1.jpg" /></a>
</div>

modificheremo detto codice in questo modo

<div align="center">
<img style="height: 320px !important; width: 320px !important;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_JKYsES3Vos-ZwRwEK7hm6diwxZsGBuGorW5QpCwwQbk4jcgUQXFDc6mWymc2c7BxmtAFgKFlXGvGcMWML40JN2iOcPQAl3sE6o9dzXfPlcHtpN1lU_rirj7JD3CYbTmEZH6OBJFRqqw/s1600/pesce1.jpg"/></div>

in cui abbiamo inserito i valori che devono avere la larghezza e l'altezza della foto.

Se invece volessimo ridimensionare solo le foto dei post ma non quelle della homepage, delle etichette o delle pagine statiche possiamo usare i tag condizionali e il tag <style>. Posto due esempi pratici e ricordo che in questo caso il codice va incollato subito sopra alla riga </head> e non a  ]]></b:skin>

RIDIMENSIONARE SOLO LE FOTO DEI POST

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.post-body img {
width: 500px !important;
height: auto !important;
}
</style>
</b:if>

RIDIMENSIONARE TUTTE LE FOTO ESCLUSO QUELLE DELLE PAGINE STATICHE

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post-body img {
width: 500px !important;
height: auto !important;
}
</style>
</b:if>

Concludo facendo presente che la classe .post-body nei modelli molto vecchi potrebbe non esserci e al suo posto esserci il selettore .post. In questo caso basterà fare una sostituzione nel codice.