Impostare delle dimensioni fisse per le immagini in Blogger.

Come impostare con il CSS delle dimensioni fisse per le foto di Blogger in funzione della tipologia di pagine (post, home, etichette, archivio, ecc)

Nonostante le molte problematiche che derivano dalla installazione di template di Blogger scaricati da internet rispetto a quelli ufficiali, sono ancora molti gli utenti che fanno questa scelta per avere subito un blog con aspetto accattivante e originale. Il problema è che poi la maggior parte di questi utenti non sono in grado di modificare il modello e magari chiedono a me come fare.

In questi casi la mia risposta è di tipo standard. Consiglio di chiedere all'autore del template come fare a personalizzare ulteriormente il modello. Una delle richieste più comuni in tal senso riguarda la impostazione della dimensione delle immagini. In molti modelli scaricati da internet ci sono dei CSS che fissano una dimensione unica per tutte le foto e la sua modifica non è banale.

La difficoltà nel trovare il codice giusto sta nei CSS inseriti nel modello. Le classi di stile scelte dall'autore del modello spesso non sono quelle ufficiali di Blogger o se lo sono, sono vecchie di anni e non più utilizzate. Quando abbiamo dei problemi con le dimensioni delle foto dobbiamo quindi usare gli strumenti Analizza Elemento di Firefox o Ispeziona Elemento di Chrome per trovare il selettore delle immagini

Lo screenshot precedente è stato fatto con Analizza Elemento di Firefox. Si clicca con il destro del mouse sulla pagina e si sceglie Analizza Elemento dal menù contestuale. Si visualizzerà un riquadro in basso per analizzare il codice della pagina. Si clicca sulla icona in alto a sinistra del riquadro che diventerà di colore azzurro quindi si passa con il mouse sopra a una immagine. Nella colonna di destra si visualizzerà il CSS che sovrintende all'aspetto della foto. Nei modelli ufficiali di Blogger di ultima generazione questo CSS è .post-body img ma nei modelli più vecchi può essere .post img. Quando si è trovato il selettore dell'elemento si crea il codice per fissare le dimensioni delle foto.

IMPOSTARE LE DIMENSIONE DELLE FOTO IN HOME E NEI POST

Poniamo si voglia impostare una dimensione fissa di 500 pixel per le foto nei Post e di 300 pixel per le foto in tutte le altre pagine diverse dai post come Home, Etichette e Archivio. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca </head> e, subito sopra, si incolla

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

quindi si salva il modello. Sono stati inseriti due tag condizionali appositi che sono stati evidenziati di giallo. Se si desidera inserire altri tipi di vincoli si possono usare altri tag come per esempio questi

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

per impostare le dimensioni solo in Homepage. Oppure si può utilizzare quest'altro codice

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

per impostare le dimensioni delle foto solo nei post. In tutti i codici proposti è stata inserita la classe di stile .post-body img che è quella ufficiale di Blogger. Se però avete un modello vecchio o scaricato dovete usare Analizza o Ispeziona Elemento per trovare quella del vostro template. 

GESTIONE DELLE ECCEZIONI

I codici precedenti inseriti nel modello potrebbero essere un po' troppo invasivi nel senso che potrebbe capitare di dover postare una immagine piccola sotto forma di icona. In questo caso dobbiamo trovare il codice della foto che sarà simile a questo

<img src="URL_IMMAGINE" alt="nome immagine"/>

Se per esempio si desiderasse che questa foto avesse una larghezza di 100 pixel si dovrebbe integrare il codice precedente in questo modo

<img  style="height: auto !important; width: 100px !important;" src="URL_IMMAGINE" alt="nome immagine"/>

Si otterrà un risultato di questo genere

Qualora si volessero modificare le dimensioni di una sola foto in un solo post è opportuno utilizzare questa tecnica che può essere ulteriormente integrata in questo modo

<div style="clear: both; text-align: center;">
<img style="height: auto !important; width: 100px !important;" src="URL_IMMAGINE" alt="nome immagine"/></div>

in cui i tag aggiunti evidenziati di giallo servono rispettivamente per eliminare tutti gli elementi a destra e a sinistra della foto e per centrarla nel layout. Al posto di center si può usare right o left.