Come mostrare le immagini di Blogger con larghezza fissa ma diversa tra desktop e mobile.

Come modificare il modello di Blogger per mostrare le immagini tutte della stessa dimensione nella versione desktop e di un'altra larghezza nella versione mobile.

Alcuni modelli scaricati da internet hanno delle regole CSS per mostrare le immagini dei post con le stesse dimensioni. Si può fare la stessa scelta anche nei modelli ufficiali di Blogger imponendo anche dei vincoli per mostrare dimensioni diverse a seconda delle tipologie delle pagine e anche in funzione del dispositivo con cui si aprono.

Spesso la homepage di Blogger è configurata in modo diverso da quella degli articoli e mostra gli ultimi post pubblicati in una sorta di tabella con titoli, le prime immagini e lo snippet. In questi casi le dimensioni delle immagini nella home devono essere inferiori a quelle dei post. Si può fare un discorso analogo per le pagine del blog aperte da mobile che debbono avere immagini meno larghe di quelle aperte da desktop. Per personalizzare tutte questi parametri è sufficiente conoscere un solo dato che è però fondamentale vale a dire il selettore univoco delle immagini.

Lo si può trovare con gli strumenti Ispeziona Elemento di Chrome o Analizza Elemento di Firefox. Solitamente nei modelli di Blogger tale selettore è .post-body img mentre in alcuni vecchi modelli è .post img. Non si può dire nulla di certo per quello che riguarda i modelli scaricati da internet.

MODIFICARE LE DIMENSIONI DELLE IMMAGINI DA DESKTOP

Per impostare tutte le immagini con una stessa dimensione si va su Modello -> Modifica HTML e si cerca la riga </head>, quindi subito sopra si incolla questo codice

<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>

che imposterà la larghezza delle immagini in 500 pixel nei post e in 300 pixel in tutte le altre pagine. Chiaramente questi valori numerici possono essere modificati a piacere. Si salva il template.

Usando i tag condizionali possiamo impostare le dimensioni delle immagini in una data tipologia di pagine incollando sempre sopra a </head> quest'altro codice

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

per impostare la dimensione delle immagini nella sola homepage oppure quest'altro

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

per impostarla solo nei post. I tag condizionali sono stati evidenziati di giallo per maggiore chiarezza. Dopo questa modifica si potranno comunque pubblicare immagini anche con diverse dimensioni usando per esempio un codice come il seguente per mostrare una immagine larga 200 pixel

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

Concludo questa prima parte ricordando che la classe .post-body img può essere diversa da modello a modello e quindi si dovrà sfogliare il template prima di applicare il codice.  

 

IMPOSTARE LE DIMENSIONI DELLE IMMAGINI DA MOBILE

In linea di massima le immagini dovranno automaticamente ridursi di dimensione quando i post verranno aperti da dispositivi mobili. Se questo non dovesse accadere potremo intervenire nel codice incollando subito sopra alla stessa riga </head> questo ultimo codice

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

per avere un risultato come questo

con le immagini dei post tutte ridimensionate. Nella versione mobile in linea di massima non occorre impostare le dimensioni per le immagini nella homepage, nelle pagine di etichette e di archivio perché in tali pagine vengono mostrate solo le miniature che hanno dimensione standard.