Pubblicato il 20/08/16 - aggiornato il  | 4 commenti :

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

dimensione-immagini-blogger-mobile

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.




4 commenti :

  1. Ciao Ernesto, ho due domande da porti.
    La prima, se volessi differenziare le dimensioni delle immagini in home, nel post e sullo smartphone, devo inserire prima dell'head i codici del primo e dell'ultimo box dell'articolo?
    La seconda, sostanzialmente in chiave SEO, quale dovrebbe essere la dimensione (o il peso) delle immagini che carichiamo per i post?
    Complimenti per il tuo lavoro.
    Carlo

    RispondiElimina
    Risposte
    1. A mostrare le immagini di dimensioni diverse da desktop e da mobile in genere ci pensa già Blogger stesso. Il post è di quasi due anni fa. Un codice che potrebbe andar bene potrebbe essere questo

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

      con immagini da 500 pixel nei post da desktop e da 300 pixel da mobile. Dal punto di vista SEO non si può dire nulla. Il codice è sovrabbondante e potrebbe essere semplificato ma bisognerebbe fare dei test al riguardo
      @#

      Elimina
    2. Grazie Ernesto, sei stato esaustivo.
      Le immagini caricate quanto dovrebbero pesare in termini di MB?
      Saluti

      Carlo

      Elimina
  2. Blogger le ottimizza automaticamente quindi non è particolarmente importante il peso. Ho fatto dei test in proposito. È consigliabile di postare immagini con la giusta dimensione. Se si pubblicano immagini larghe 500 pixel non vanno caricate immagini di 1500 pixel
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.