Come preimpostare la larghezza delle immagini dei post e delle sidebar

{Read in English...}

Quasi certamente vi sarà capitato di visitare un blog e di trovarvi alcune immagini che... invadevano spazi non loro. Ad esempio, così:
Come preimpostare la larghezza delle immagini dei post e delle sidebar
In questo post, un'immagine sta bellamente debordando nella sidebar. L'effetto non solo è bruttissimo, ma rende potenzialmente illeggibili alcuni contenuti.
La stessa cosa può succedere con le immagini della sidebar, come in questo caso:
Come preimpostare la larghezza delle immagini dei post e delle sidebar
Io riscontro spessissimo questo problema, anche in blog che seguo abitualmente. E ogni volta mi domando: “Possibile che all'autore/autrice non dia fastidio?!”

Per non incappare in questa bruttura è sufficiente ridimensionare le immagini che inseriamo in base alla larghezza delle colonne del nostro blog.
È comunque vero che può capitare di prendere un'immagine di fretta e scordarci di questo passaggio: capita spessissimo coi banner di giveaway, iscrizioni a gruppi, etc..
Quando mi viene commissionato un blog, dopo aver scelto la larghezza per contenuto e sidebar, la prima cosa che faccio è inserire qualche riga di codice CSS: in questo modo evito a priori che questo inconveniente si possa presentare al destinatario del mio lavoro.

Aggiungere questo codice non è difficile: potete benissimo farlo anche voi!
Per prima cosa serve sapere quanto sono larghe le vostre colonne, margini esclusi.
Io di solito carico le foto dei post leggermente più grandi dello spazio che occupano, di circa 30 pixel in più: questo perché, se un giorno decidessi di allargare la mia colonna principale, mi basterebbe modificare il codice CSS per avere ancora le foto larghe quanto il contenuto!

Ecco il codice per le immagini dei post:
.post-body img {
max-width: 730px;
height: auto;
}
Per inserirlo {dopo aver fatto il backup, come sempre!}, da Blogger andate su Modello > Personalizza > Avanzato > Aggiungi CSS.
Ora vediamo cosa fanno queste tre righe:
  • .post-body: significa che stiamo dando uno stile al contenitore dei nostri post.
NB. Quasi tutti i modelli di Blogger utilizzano questa nomenclatura per definire la classe che contiene i post: verificate che sia così anche per voi andando su Modello > Modifica HTML, premendo ctrl+f e scrivendo .post-body nella casella di ricerca che apparirà.
Se lo ritrovate nel codice, siete a posto! In caso contrario, se serve aiuto, sono a disposizione ;)
  • img: le proprietà che stiamo per assegnare si applicano a tutte le immagini inserite nell'elemento .post-body
  • max-width: stiamo impostando la larghezza massima che le nostre immagini potranno assumere. Questo significa che un'immagine più piccola non verrà stirata e sgranata per raggiungere i 730px {questo sarebbe accaduto se avessimo scritto solo “width”}, mentre una più grande verrà sempre ridimensionata a questa misura. Se scegliamo la dimensione in pixel che combacia con l'ampiezza della colonna del contenuto del blog, avremo sempre foto larghe tanto quanto i nostri post, senza il rischio che debordino dal loro spazio.
  • 730px: questa è la larghezza della mia colonna principale. Modificate il valore in base a quella della vostra!
  • height: impostare questa proprietà con auto fa in modo che le proporzioni larghezza-altezza delle immagini si mantengano e che quindi non vengano deformate.
Per quanto riguarda le sidebar: stessa cosa, ma anziché .post-body img bisogna scrivere .column-right-inner img {se l'avessi avuta a sinistra, ovviamente, sarebbe stato .column-left-inner}.
Anche in questo caso, verificate che il nome sia questo anche nel codice del vostro modello, come per le immagini dei post!

Quando inseriamo un'immagine in un post dall'editor di Blogger, se abbiamo scelto di avere le immagini larghe quanto il corpo del testo, non dobbiamo centrarle, altrimenti Blogger creerà dei margini automatici che faranno debordare la foto di un pezzetto. Allimeiamo quindi a sinistra e scegliamo di visualizzare l'immagine nelle sue dimensioni originali.

Se invece l'immagine è un po' più piccola, meglio centrarla.

Vediamo che succede se applichiamo queste poche righe di CSS al modello del mio blog di prova...
Come preimpostare la larghezza delle immagini dei post e delle sidebar
TA-DAN! Tutto rientra nei bordi e l'occhio tira un sospiro di sollievo!
Ok, gli occhi non sospirano, ma avete capito.
Il bello è che questa modifica si applica automaticamente a tutto ciò che avete già inserito: ogni cosa andrà magicamente al suo posto inserendo questo codicillo, senza dover eliminare e reinserire alcuna immagine. L'importante è che specifichiate la max-width giusta per le vostre colonne!

Spero che questo post possa esservi chiaro e utile, scusate se la sintesi non è stata dalla mia parte questa volta!

EDIT: Devo ancora scrivere un post che possa aiutarvi a capire qual è l'esatta misura delle colonne di un blog. Prometto di pubblicarlo presto, ma se nel frattempo vi serve aiuto posso dirvelo io in due secondi! Basta che me lo chiediate in un commento :)

Altri articoli sulle immagini:

Altri articoli interessanti sul tema, scritti da due fantastiche amiche blogger:
La larghezza delle immagini - by Io, Me & Design
Allineamento Post e Sidebar - by C'è Crisi, C'è Crisi!

27 commenti:

  1. Molto utile! Di solito evito "immagini invadenti" ma aggiusto sempre a mano nel codice html del post... Devo provare questo che indubbiamente semplifica tutto! :-)

    RispondiElimina
    Risposte
    1. Questo passaggio si fa una volta e poi ci si può dimenticare delle immagini che rischiano di eccedere dai loro spazi. Diciamo che è un investimento sul tempo che si risparmia in futuro :D

      Elimina
  2. Ottimo ed utile tutorial.
    Grazie! =)
    Dani

    RispondiElimina
    Risposte
    1. Grazie Daniela :) Scusa per l'assenza, passo presto a farti visita.

      Elimina
  3. io lo uso già da tempo grazie a te! Sempre GRAZIE!
    Le mie immagini non debordavano dal margine (perchè anche io odio quell'effetto) e quindi per contenerle le mettevo medie.
    Ora invece posso andare con l'extra large senza nessun problema!
    Ora che lo hai postato divulgo il verbo :D

    RispondiElimina
    Risposte
    1. Ce ne ho messo di tempo a formulare un tutorial nella speranza che risulti umanamente comprensibile :D
      Comunque da quando metti le foto in grande il tuo blog è ancora più bello. Le immagini del tuo ultimo post sono splendide e perfettamente "a filo"!

      Elimina
  4. Finché non riuscirò a migliorare la qualità delle mie immagini continuerò a postarle non troppo grandi... ^_^
    Però magari prima o poi ce la farò e quindi mi segno già sul mio quadernino degli appunti questo tuo prezioso suggerimento!! Grazie Silvia!!

    RispondiElimina
  5. wowo fantastico e utilissimo questo post..non capivo come poter fare per mettere un immagine grande senza farla strabordare...grazie di queste informazioni!^_^Un bacione dolcissima,...

    RispondiElimina
    Risposte
    1. Sono contenta di esserti stata utile :D
      Un bacione Seleny

      Elimina
  6. Complimenti per il tutorial, preciso, completo e comprensibilissimo, ne farò sicuramente tesoro :-)
    I tuoi suggerimenti sul ridimensionameno delle immagini mi sono stati utilissimi!!!!
    Grazie!!!

    RispondiElimina
  7. Ottimo suggerimento, io adesso ridimensiono sempre le immagini prima di pubblicarle, mi tengo l'originale e ne faccio una copia per web (così pesa meno) delle esatte dimensioni 600 px per le orizzontali o 460 px per le verticali.
    Già che riduco il peso portandole a pochi kb ne riduco anche la dimensione però hai ragione, se decidessi di cambiare il layout al Blog sarei fregata.
    Grazie
    Ciao

    RispondiElimina
    Risposte
    1. Fai benissimo così Norma! Se più avanti sarai dell'idea di aumentare l'ampiezza dei post magari puoi iniziare a caricare le foto leggermente più grandi (ma non troppo, o diventano pesanti ovviamente) e "bloccarle" con questo codice.
      Buon weekend!

      Elimina
  8. Sempre super utili i tuoi post! Io ovviamente mi dovrò applicare con più calma perché così alla prima non ce la posso fare! ; )

    RispondiElimina
  9. Ciao! Prima di tutto complimenti per il tuo blog..ti seguo con passione! :) Volevo dirti che nel mio blog c'è un nuovo giveaway! e mi farebbe piacere se partecipassi, dacci un'occhiata magari ti può interessare o comunque restare in contatto se ti va! Grazie mille e scusa il disturbo!
    Un bacio,
    Cecilia
    SMILE'S AVENUE 

    RispondiElimina
  10. Ciao Silvia, post utilissimo, complimenti! Solo che io, l'imbranata, sto ancora lottando con le proporzioni dell'intero blog. Non ho fatto grandi cambiamenti sulla struttura e questo è il momento per iniziare. Vorrei chiederti:dove verifico la larghezza della colonna principale? scusa l'ignoranza ma si tratta della larghezza dell'intero blog che trovo andando su Designer modelli di blogger e poi modifica le larghezze? grazie mille, Valeria

    RispondiElimina
    Risposte
    1. Ciao Valeria! La larghezza della colonna principale la ricavi dal designer modelli, sottraendo la/le sidebar dalla larghezza totale, solo che a volte ci sono dei margini di mezzo...
      Dovrei trovare un modo semplice per spiegare in un post come si usano Firefox e Chrome per ricavare queste info perché è più facile da farsi che da spiegarsi... Comunque posso già dirti che nel tuo caso la larghezza del contenuto dei post è di 602 pixel :)

      Elimina
  11. Un codice assolutamente da implementare, appena mi collego col PC lo aggiungo anche io, grazie mille!!
    Daniela - Mani di Dani

    RispondiElimina
  12. Bellissimo post, soprattutto chiarissimo!!!
    E grazie per la tua bontà nel menzionarmi ♥♥♥

    RispondiElimina
  13. Grazie per il tutorial, mi è stato davvero molto utile :)

    RispondiElimina
  14. Ne avevo proprio bisogno, tutorial utilissimo!

    RispondiElimina
  15. Ciao Silvia.. sarebbe utile questo codicillo, ma non riesco a capire come posso ricavare la larghezza della colonna :(

    dove riesco ad individuarla?

    grazie mille.

    RispondiElimina
    Risposte
    1. Ciao Giulia! Credo di dover scrivere un post dedicato perché è un po' complesso spiegarlo nei commenti (avrei già dovuto farlo da tempo. Sorry!).
      Comunque te lo dico io: nel caso del tuo blog la larghezza della colonna è di 466px :)

      Elimina
    2. grazie Silvia.. sei stata davvero gentilissima!
      dovrei metterci mano al mio blog.. si sta evolvendo con me.. e vorrei davvero snellirlo e focalizzarlo.
      vediamo intanto di seguire i tuoi preziosi consigli x sistemare quello che si può!

      grazie!

      Elimina
    3. Non c'è di che! Per qualsiasi altra cosa mi trovi qui :)

      Elimina
  16. Ciao Silvia, scrivo qui nei commenti sperando di essere utile per altre blogger:
    ho seguito le tue istruzioni ed aprendo il CSS ho trovato già una parte di codice:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: none !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }


    al che mi sono fermata... meglio non fare danni :D

    la domanda ovviamente è la seguente:
    devo aggiungere sotto il codice che ci hai insegnato o devo correggere quello che c'è già?

    grazie e scusami se faccio domande stupide :|

    RispondiElimina
    Risposte
    1. Tranquilla, mi sembra una domanda pertinente :)
      Questo CSS che hai riportato è quello che molti usano per rimuovere la formattazione standard delle immagini inserite in Blogger (ad esempio, quelle brutte cornici bianche con l'ombra nelle foto dei post). Se non vuoi ritrovartele di nuovo, lascia quel codice così com'è e inserisci pure quello che ho scritto in questo post. Non si daranno fastidio tra di loro perché forniscono istruzioni diverse :)

      Elimina
  17. perfetto.. gentilissima come sempre

    RispondiElimina

Ti ringrazio per il tuo commento: mi stai dedicando due minuti del tuo tempo e lo apprezzo immensamente!
I commenti vengono modrerati, perciò non sono visibili appena inviati.
Mi riservo il diritto di cancellare messaggi:
• offensivi, diffamatori e/o volgari;
• a sfondo esplicitamente politico;
• pubblicitari;
• che richiedono 'follow 4 follow': seguimi se ti fa piacere, io farò altrettanto!

Related Posts Plugin for WordPress, Blogger...