Come impostare le dimensioni delle immagini in Blogger.

Come mostrare le immagini in homepage di Blogger tutte della stessa dimensione e con valori diversi dalle dimensioni degli articoli.

Ricevo numerosi commenti su come modificare le dimensioni delle immagini in Blogger a seconda se sono visualizzate nei post, in homepage o in altra pagina. Non è che si possono prendere in considerazioni tutte le opzioni possibili però usando i tag condizionali si può per esempio creare un CSS per mostrare in homepage le immagini con la stessa dimensione standard. È evidente che l'aggiunta di un CSS del genere potrebbe portare delle controindicazioni con eventuali icone presenti in home. Tali effetti collaterali indesiderati possono però essere facilmente neutralizzati con un po' di pazienza. 

Prima di procedere è altamente consigliato andare su Modello > Backup/Ripristino > Salva modello completo per un eventuale backup del template. Dopo aver cliccato nell'area del codice e aver digitato Ctrl+F per aprire la casella vi si incolla la riga </head> e si clicca su Invio per cercala. I fogli di stile debbono essere incollati subito sopra a tale riga e saranno diversi a seconda di quello che si vuole fare.

IMPOSTARE LARGHEZZA DELLE IMMAGINI IN HOME E NEI POST

Come primo esempio consideriamo la possibilità di mostrare le immagini in homepage tutte di una dimensione e nei post di una dimensione diversa. Tale esigenza può derivare dal fatto che in home finisce solo l'incipit dell'articolo e quindi è sufficiente una immagine più piccola. In questo caso il codice da incollare è il seguente con i valori puramente indicativi e modificabili di 300 e 500 pixel

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-body img {
width: 300px !important;
height: auto !important;
}
</style>
<b:else/>
<style>
.post-body img {
width: 500px !important;
height: auto !important;
}
</style>
</b:if>

Le immagini saranno di larghezza 300 pixel in home e di larghezza 500 pixel in tutte le altre pagine.

LARGHEZZA DI IMMAGINE DIVERSE TRA POST E ALTRE PAGINE

Incollando invece quest'altro codice

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

le foto si vedranno di 500 pixel negli articoli e di 300 pixel in tutte le altre pagine.

IMPOSTARE LE DIMENSIONI SOLO IN HOMEPAGE

Se si desidera impostare delle dimensioni fisse delle immagini solo in homepage e lasciare invece quelle delle altre pagine immutate si può incollare questo codice

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.post-body img {
width: 300px !important;
height: auto !important;
}
</style>
</b:if>

con le immagini in Home impostate con 300 pixel di larghezza.

IMPOSTARE LE DIMENSIONI AL DI FUORI DEI POST

Se si utilizza l'opzione Continua a leggere o Read More o Inserisci intervallo si visualizzeranno solo gli incipit dei post non solo in Homepage ma anche nelle pagine delle etichette e di archivio. In questo caso si potrebbe sentire l'esigenza di impostare le dimensioni delle immagini anche per queste pagine. Il codice da incollare per visualizzare le immagini sempre con larghezza di 300 pixel al di fuori dei post è

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

COME GESTIRE LE ECCEZIONI

Dopo aver salvato queste impostazioni ci potrebbero essere delle icone che vengono visualizzate di dimensioni assolutamente inadeguate oppure ci potrebbero essere delle immagini di cui volessimo una dimensione diversa da quella impostata. Dobbiamo quindi trovare il codice della foto che sarà del tipo

<img src="URL_IMMAGINE"/>

Per settare le dimensioni in modo diverso dobbiamo modificare il codice in questo modo

<img style="height: 60px !important; width: 80px !important;" src="URL_IMMAGINE"/>

dove ovviamente i valori di altezza e larghezza possono essere impostati a piacere. Ricordo che si imposta solo la larghezza perché l'altezza prende il valore auto tale da mantenere le proporzioni.