Pubblicato il 23/02/14 - aggiornato il  | 14 commenti :

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.

dimensioni-immagini-blogger

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.


14 commenti :

  1. Ciao! io ho un template predefinito che autoridimensiona le immagini dei post come vuole. Invece io vorrei aumentarne la dimensione, ma se agisco sul template modificando la stringa post-body img aumenta la grandezza delle foto ma vengono "tagliate" poiché lo spazio disponibile è sempre lo stesso. C'è un modo per modificare questa impostazione del mio template? Vorrei allargare appunto la dimensione della colonna che contiene il post (ma essendo predefinito non posso agire in "modifica larghezze".
    Grazie come sempre di cuore, mi aiuti a modificare l'impossibile :)

    RispondiElimina
    Risposte
    1. Stavolta non ti posso aiutare :)
      Essendo un template scaricato da internet solo il suo autore conosce il codice alla perfezione. Però potresti modificare le larghezze senza andare sul Designer Modelli usando questa tecnica
      http://www.ideepercomputeredinternet.com/2011/05/come-cambiare-la-larghezza-del-blog-e.html
      @#

      Elimina
    2. Grazie comunque Ernesto! oggi ho saputo fare da me trovando la stringa dove erano contenute le misure ossia l'Outer-Wrapper. Sto diventando brava eh!? Ciao!!

      Elimina
  2. Utilissimo, grazie! Mi ero appena incasinata con una modifica al template e adesso è tutto risolto :)
    Grazie grazie grazie

    RispondiElimina
  3. Scusa Ernesto, mi puoi dire come posso fare per fare l'operazione inversa? Vorrei lasciare le immagini delle pagine statiche libere, in modo da potermele gestire a seconda del caso. Come devo fare? Devo togliere qualche pezzo di codice? Grazie mille!

    RispondiElimina
    Risposte
    1. Dopo che hai impostato una condizione devi fare in modo che questa non valga per le pagine statiche quindi devi inserire una riga all'inizio e una alla fine del codice prescelto vale a dire
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      all'inizo e
      </b:if>
      alla fine
      @#

      Elimina
    2. Grazie infinite, adesso ci provo!

      Elimina
  4. Io avrei una domanda, invece: quando sul blog inserisco delle foto panoramiche (esempio 2400 px di larghezza), modifico l'HTML del post e le adatto alla larghezza del blog, così da essere della stessa larghezza dei testi e lascio sotto l'immagine la didascalia che suggerisce di cliccare per ingrandire le immagini. Ora, il limite che blogger mi riduca le immagini a 1600 pixel di larghezza massima è aggirabile in qualche modo?

    Premetto che le immagini del mio blog si visualizzano con il Lightbox, e non so se sia proprio questo il motivo del ridimensionamento a 1600 pixel di larghezza massima.

    RispondiElimina
    Risposte
    1. Non è tanto il limite di Blogger ma il limite della risoluzione degli schermi. Comunque puoi gestire la larghezza delle foto caricate su Picasa con questa semplice strategia
      http://www.ideepercomputeredinternet.com/2012/11/picasa-blogger-immagini.html
      @#

      Elimina
    2. Grazie per aver risposto. Sì, immaginavo ci fosse di mezzo la questione degli schermi, ma comunque, io le foto le carico sull'album di Google+. Fa lo stesso?

      Elimina
    3. Devi avere il loro link diretto. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      oppure puoi trovare le tue foto aprendo questo URL
      https://picasaweb.google.com/lh/myphotos
      P.S. Google Foto sarà eliminato a breve ma le foto rimarranno
      @#

      Elimina
    4. Mentre seguivo quanto scritto nel post che faceva a caso mio mi sono accorto che questa cosa già la sapevo, ma l'avevo dimenticata. Ancora grazie comunque.

      Elimina
  5. salve e possibile poter cliccare delle immagini in home in modo tale che si ingrandiscano a piena pagina?

    RispondiElimina
    Risposte
    1. Guarda se ti vanno bene questi due effetti
      http://www.ideepercomputeredinternet.com/2011/02/effetto-per-ingrandire-le-immagini-al.html
      che non sono proprio quello che chiedi
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy