Pubblicato il 16/04/13e aggiornato il

Come ridimensionare automaticamente tutte le immagini in Blogger.

Come ridimensionare automaticamente tutte le immagini di Blogger già pubblicate superiori a una data larghezza lasciando inalterate le proporzioni modificando il template.
Modificare le dimensioni di una immagine è operazione molto semplice che può essere fatta in molti modi. Si può per esempio andare nell'Editor di Blogger, selezionare l'immagine e scegliere tra Piccola, Media, Grande, Dimensione originale e Extralarge. Se la foto è stata inserita usando il suo indirizzo web si può operare direttamente nel codice modificando i valori di width e height. Una delle domande ricorrenti è come si possa ridimensionare automaticamente tutte le immagini che siano già state pubblicate nel blog operando nel template. Questa opzione può risultare utile per chi abbia già pubblicato centinaia se non migliaia di foto e abbia necessità di mostrarle di una larghezza standard perché per esempio ha cambiato il template.

Mettiamo il caso che si sia passati da un modello di Blogger con una ampia area del post a un template che la abbia invece più piccola. Avevamo pubblicato delle immagini larghe che adesso non si adattano più al nuovo modello e debordano nella sidebar adiacente. Poniamo che le dimensioni massime supportate per le immagini siano di 500 pixel e di mantenere il rapporto tra larghezza e altezza. Visto che l'Editor del template di Blogger è recentemente cambiato vediamo come procedere con la nuova interfaccia. Si va su Modello > Modifica HTML  e si clicca in un'area vuota della scheda Modifica Modello. Si digita Ctrl+F e, nel campo Search che si apre, si incolla ]]></b:skin> quindi si va su Invio per visualizzare l'area del codice in cui è presente tale linea che sarà evidenziata

cercare-riga-codice-html-template

Si posiziona il cursore subito sopra a tale linea e si incolla questo codice

.post-body img {
max-width: 500px !important;
width: espression(this.width>500 ? 500: true;)
height: auto!important; }

Si salva il modello.Ovviamente il valore 500 pixel può essere adattato e modificato a piacere. Tutte le immagini che abbiano una larghezza inferiore a 500 pixel rimarranno immutate mentre quelle con larghezza superiore si ridimensioneranno a 500 pixel mantenendo inalterate le proporzioni. Si tratta di un'ottima soluzione per chi abbia cambiato template e adesso si trovasse con una gran quantità di immagini che siano troppo grandi per una area del post diventata più piccola. Nei vecchissimi modelli al posto di .post-body img potrebbe essere necessario inserire .post img.




27 commenti :

  1. Caro Ernesto sei super!!! complimenti sempre

    RispondiElimina
  2. Ho provato ma non funziona, dato che i miei post sono stati editati in LiveWriter e le immagini ridimensionate lì, immagino che i valori imposti dall'editor non vengano modificati, giusto?

    RispondiElimina
    Risposte
    1. mi correggo, ora funziona, ma ho aggiunto il codice in "aggiungi CSS" del "Designer/Avanzato". Grazie mille, è utilissimo, rieditare tutti i post sennò sarebbe stato un incubo!

      Elimina
    2. ho notato però che le proporzioni vengono alterate, cioè l'altezza non viene modificata proporzionalmente :-(

      Elimina
    3. aggiungo un'altra domanda, non so se è possibile, ma con lo stesso codice e diversi attributi si possono ridimensionare anche gli oggetti (embed di video ad es.)? Grazie mille e mi scuso per la moltiplicazione di commenti.

      Elimina
    4. Il codice vale per le immagini quadrate (500x500 pixel). Se sei solito postare immagini rettangolari modifica i valori. Con questo codice non si possono modificare le dimensioni dei video e neppure con altri codici. Vanno modificati uno per uno @#

      Elimina
    5. Sono stato precipitoso nel commento. Non è proprio così. Non si dovrebbero distorcere, strano @#

      Elimina
  3. grazie , ho risolto un bel problema!

    RispondiElimina
  4. Ciao,
    ho cambiato template e non capisco perchè nel demo le immagini sulla home erano abbastanza piccole ora sulla mia home effettiva compaiono grandi (pur avendo scelto l'opzione "piccola" prima della pubblicazione del post.. come posso fare per averle di una certa dimensione sulla home e ingrandirle solo quando si apre il post?

    non so se questo articolo fa per me ..le vorrei flessibili, non so come dirti, ma sulla home troppo grandi non mi piacciono..

    ciao!

    RispondiElimina
    Risposte
    1. Prova a procedere in questo modo.
      1. Salvi il template
      2. Vai su Modello > Modifica HTML e cerca questo codice

      .crop {
      width: 300px;
      height:auto;
      position:relative;

      Modifica il valore di 300px con uno più piccolo per esempio 250px. Da notare che l'altezza è ridimensionata automaticamente in modo da mantenere le proporzioni
      @#

      Elimina
    2. Ciao,
      ho modificato ma cambia la larghezza e invece io vorrei ridurre la lunghezza,
      ho cambiato height con una misura, ma non ho ottenuto nulla..

      Elimina
    3. no scusa ... funziona!!
      avevo solo dimenticato di scrivere px dopo la misura!

      GRazie!!!

      ^_^

      Elimina
  5. Ciao Ernesto, ho bisogno del tuo aiuto, vorrei far si che le immagini attuali (tutte con larghezza 650 px) diventino più grandi (850 px), è possibile modificare il codice che hai ideato per farlo lavorare "al contrario"? Grazie :)

    RispondiElimina
    Risposte
    1. Prova con questo codice
      .post-body img {
      width: 850px !important;
      height: auto !important;
      }
      da incollare subito sopra alla solita linea che delimita i CSS e che contiene /b:skin
      Magari guardo se trovo qualcosa di meglio (senza impegno)
      @#

      Elimina
    2. ho fatto una prova (con il vecchio template) e funziona egregiamente anche con la semplice anteprima! grazie mille, sei la mia salvezza!!!

      Elimina
    3. Grazie del test! Vorrà dire che ci farò un post :)
      @#

      Elimina
    4. confermo, ha funzionato perfettamente anche ora che ho caricato il nuovo template! mi hai salvato la vita, ridimensionare tutte le immagini sarebbe stato un lavoro alienante!! già che ci sono ti pongo un quesito: in termini di tempo di caricamento pagina (e sapzio su google immagini ex picasa) conviene che io continui comunque a caricare immagini più piccole e sfruttare questo ridimensionamento? Grazie ancora!

      Elimina
    5. ps. nuova domanda (sono il tuo incubo lo so...) è possibile evitare che si ridimensionino anche le immagini contenute nelle pagine statiche....? grazie di nuovo!

      Elimina
    6. Ho appena pubblicato il post
      http://www.ideepercomputeredinternet.com/2014/01/how-to-resize-blogger-images.html
      Per le immagini delle pagine statiche leggi lì. Se la qualità delle foto non peggiora troppo puoi continuare a postarle più piccole anche se io userei dei tool specifici per ridurre il peso delle foto
      http://www.ideepercomputeredinternet.com/2013/08/ottimizzare-immagini-blogger-template.html
      @#

      Elimina
    7. Grazie Ernesto, dal prossimo post inizierò ad usare i tool che hai consigliato, sono curiosa di vedere quanto riesco a velocizzare! Per la questione pagine statiche purtroppo ho provato ad inserire la condizione ma non funziona... Né quella relativa solo alle foto del post né quella che esclude le pagina statiche... :( :( :(

      Elimina
  6. @FedericaCimetti
    Forse non ti funziona perché hai lasciato anche quell'altro codice
    @#

    RispondiElimina
    Risposte
    1. Magari... E invece sono ancora più tonta... Mi ostinavo ad incollarlo sotto a /head anziché sopra...! Funziona tutto!!!!!!!!!!!!!

      Elimina
  7. Ciao Ernesto, utilissimo, come sempre. E se si volessero allineare tutte le foto a sx per esempio...?
    Grazie :)

    RispondiElimina
    Risposte
    1. Al codice del post dovresti aggiungere questa nuova riga
      float:left !important;
      oppure usare solo questo codice
      .post-body img { float:left !important;}
      da incollare con le stesse modalità se ti interessa solo questa personalizzazione
      @#

      Elimina
  8. Grazie! Era proprio quello che cercavo! Ci proveró :)

    RispondiElimina
  9. Ciao, ho installato nel mio template, ma non funziona. :(( le foto sono enormi. io le scatto dal cellulare senza alcuna modifica. messa nel post, clicco in nella dimmensione media, ma niente, continuano grandi, come mai? :( che pasticcio, io sono una frana proprio!

    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.