Pubblicato il 03/01/14 - aggiornato il  | 19 commenti :

Rendere le immagini di Blogger tutte della stessa larghezza.

Come ridimensionare automaticamente tutte le immagini dei post di Blogger e utilizzare i tag condizionali per le eccezioni.
Le immagini di Blogger solitamente sono inserite nei post con l'Editor di Blogger in cui si possono scegliere le dimensioni proposte cliccando sulle opzioni Piccola, Media, Grande, Dimensione originale e Extralarge. Si può anche inserire nel modello una condizione particolare per cui dette foto non possano superare una determinata larghezza. Questo può essere utile se si modifica il modello e se nel nuovo layout non entrano le immagini più larghe di un certo numero di pixel.

Se siamo soliti postare foto tutte più o meno delle stesse dimensioni potremmo volerle ridimensionare tutte insieme. Questo significa che potremmo volere tutte le foto larghe per esempio 500 pixel. Con la modifica che vado a presentare le immagini meno larghe di 500 pixel si ingrandiranno mentre quelle più larghe si rimpiccioliranno mantenendo però inalterate le proporzioni.


ridimensionare-immagini-blogger

Le immagini risultanti risulteranno tutte della stessa larghezza a prescindere dalle dimensioni originali. Si va su Modello > Modifica HTML, si cerca la riga di codice ]]></b:skin> quindi, subito sopra a questa, si incolla questo semplice CSS

.post-body img {
width: 500px !important;
height: auto !important;
}

dove al posto di 500px può ovviamente essere inserito un altro valore per la larghezza. Dopo aver salvato il modello tutte le immagini dei post si visualizzeranno con la stessa larghezza e con l'altezza in proporzione. È anche possibile andare oltre e per esempio inserire una cornice usando un particolare stile del bordo. Se al posto del precedente incolliamo infatti questo codice

.post-body img {
width: 500px !important;
height: auto !important;
border: 2px solid #940F04 !important;
}

il risultato sarà quello di avere una cornice di spessore 2 pixel e di colore 940F04 in tutte le immagini

immagini-con-cornice

CASI PARTICOLARI


Se ci fosse una immagine che non vogliamo assolutamente ridimensionare e che vogliamo mantenere nella grandezza originale basterà aprire il post con l'Editor e modificare il codice del post in modo da ottenere questo risultato

immagine-non-ridimensionata

Per impedire che la foto con il codice seguente venga ridimensionata

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-BHymj850ul0/UcAe1VeC8OI/AAAAAAAAiOc/Imhu0vOFjvA/s1600/pesce1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-BHymj850ul0/UcAe1VeC8OI/AAAAAAAAiOc/Imhu0vOFjvA/s1600/pesce1.jpg" /></a>
</div>

modificheremo detto codice in questo modo

<div align="center">
<img style="height: 320px !important; width: 320px !important;" src="http://2.bp.blogspot.com/-BHymj850ul0/UcAe1VeC8OI/AAAAAAAAiOc/Imhu0vOFjvA/s1600/pesce1.jpg"/></div>

in cui abbiamo inserito i valori che devono avere la larghezza e l'altezza della foto.

Se invece volessimo ridimensionare solo le foto dei post ma non quelle della homepage, delle etichette o delle pagine statiche possiamo usare i tag condizionali e il tag <style>. Posto due esempi pratici e ricordo che in questo caso il codice va incollato subito sopra alla riga </head> e non a  ]]></b:skin>

RIDIMENSIONARE SOLO LE FOTO DEI POST


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

RIDIMENSIONARE TUTTE LE FOTO ESCLUSO QUELLE DELLE PAGINE STATICHE


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

Concludo facendo presente che la classe .post-body nei modelli molto vecchi potrebbe non esserci e al suo posto esserci il selettore .post. In questo caso basterà fare una sostituzione nel codice.


19 commenti :

  1. buongiorno Ernesto, seguendo una tua guida sono riuscito a mettere un widget di immagine sopra all'header del blog. Ora per favore mi dici come posso centrare l'immagine? è leggermente spostata sulla sinistra. Va bene però se si può centrare è meglio.Grazie e buon weekend

    RispondiElimina
  2. Ho scritto migliaia di post. Quando dici che hai usato un mio tutorial non posso sapere quale sia. Quindi per facilitarmi la risposta sarebbe bene che mi incollassi l'URL dell'articolo. Per centrare un oggetto prova a seguire questo post
    http://www.ideepercomputeredinternet.com/2009/09/come-centrare-un-testo-unimmagine-o-un.html
    ma chiaramente dipende dal modo in cui hai inserito la foto. Non mi hai neppure incollato l'URL del tuo blog e quindi non ho potuto neppure dare una occhiata
    @#

    RispondiElimina
  3. ciao Ernesto, grazie per la celere risposta. ecco l'url del mio blog www.arteinmovimentodemaria.com

    RispondiElimina
    Risposte
    1. È già centrata. Ho visto che hai usato correttamente il tag div align="center"
      @#

      Elimina
  4. ciao ernesto, quale sarebbe codice da inserire nel caso volessi ce le immagini avessero la stessa larghezza del post, grazie

    RispondiElimina
    Risposte
    1. ho provato a fare come hai indicato nel post, ma così anche l'immagine del bottone pinterest diventa grande, come posso ovviare a questo?

      Elimina
    2. Ti rispondo cumulativamente a entrambe le domande. Per la larghezza esattamente come quella del post prova con questa riga
      width: 100% !important;
      al posto di quest'altra
      width: 500px !important;
      Per evitare che una singola immagine venga ridimensionata leggi la sezione dopo questo titolo
      "Per impedire che la foto con il codice seguente venga ridimensionata"
      @#

      Elimina
    3. senti ernesto, mi pare che le foto pero siano allineate sulla sinistra, come posso centrarle. questo è il mio blog www.madeinbottega.com

      Elimina
    4. Non sono un genio dei linguaggi di programmazione. So qualcosa ma ho delle lacune. Nello specifico posso dirti come centrare una singola immagine
      http://www.ideepercomputeredinternet.com/2011/04/come-centrare-l-dell-o-header-in.html
      Si può tentare di applicarlo a tutto il blog in questo modo
      .post-body img {
      width: 500px !important;
      height: auto !important;
      display: block;
      margin-left: auto !important;
      margin-right: auto !important;
      }
      ma non so se funzionerà o se avrà degli effetti collaterali
      @#

      Elimina
  5. WOW! Sono riuscita a mettere tutte le immagini della stessa larghezza grazie al tuo utilissimo post! :-)

    RispondiElimina
  6. A me invece proprio non funziona. Quale può essere il motivo?

    RispondiElimina
  7. ...nel senso che non succede nulla, non c'è alcun cambiamento nella larghezza delle foto

    RispondiElimina
    Risposte
    1. Ho dato uno sguardo al codice del tuo blog e c'è la classe .post-body img quindi dovrebbe funzionare. Forse hai lasciato una parentesi graffa in più nella riga con /b:skin
      @#

      Elimina
  8. macchè, le ho provate tutte (almeno credo): le foto non ne vogliono sapere di adattarsi!

    RispondiElimina
  9. è come se ci fosse qualcosa, qualche impostazione, che blocca il css

    RispondiElimina
  10. Ciao Ernesto. Una cortesia. Devo aver combinato qualche pasticcio nel mio blog. Per cui adesso non riesco più a mettere le foto tutte delle stesse dimensioni, come ho sempre fatto seguendo le tue info. Puoi dirmi dove sbaglio? Grazie!

    RispondiElimina
    Risposte
    1. Il tuo blog è questo?
      http://borsettefatteamano.blogspot.it/

      Hai tolto una parentesi graffa e quindi il CSS non funziona più.

      Cerca questo codice

      #PageList1 ul {
      width:auto;
      height:auto;
      margin-left:auto;
      margin-right:auto;.post-body img {
      width: 250px !important;
      height: auto!important;
      }

      e metti una parentesi graffa in più in questo modo
      #PageList1 ul {
      width:auto;
      height:auto;
      margin-left:auto;
      margin-right:auto;
      }
      .post-body img {
      width: 250px !important;
      height: auto!important;
      }

      Hai settato le immagini tutte di larghezza 250 pixel
      @#

      Elimina
  11. Grazieeee! Davvero! Immaginavo di aver cancellato qualcosa ma non riuscivo a capire....come sempre sei stato d'aiuto!!!!! Grazie e buona vita! :)

    RispondiElimina
  12. Ciao Ernesto! Devo ammettere che il mio blog, appena nato (https://frederikag.blogspot.it/) , sta migliorando nel suo aspetto solo grazie alle tue dritte!! Grazie!!!

    RispondiElimina

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