30 agosto 2012

Come modificare le dimensioni di una foto con l'Editor di Blogger.

Gli utenti di Blogger sono da sempre alle prese con problemi concernenti l'inserimento di immagini negli articoli. Sono più di quattro anni che posto articoli in siti sulla piattaforma Blogger e il problema delle immagini non è stato ancora risolto. Mi ricordo all'inizio quando dovevamo trascinare con il mouse le foto senza riuscire mai a trovare la giusta collocazione. Con l'Editor aggiornato le cose sono un po' migliorate ma non hanno ancora raggiunto il livello desiderato.

Se si posta con Windows Live Writer possiamo sbizzarrirci come vogliamo con le immagini. Si possono incollare nel post direttamente con il destro del mouse, inserire ombreggiature, bordi, cornici e soprattutto possono essere ridimensionate in modo continuo utilizzando le apposite maniglie.

Con l'Editor di Blogger non è possibile adattare con il mouse la dimensione di una immagine al layout. Selezionando una immagine possiamo sceglierne la dimensione tra Piccola, Media, Grande, Extralarge e Dimensione originale mentre per la posizione ci sono i pulsanti Sinistra, Centra e Destra. E' anche possibile aggiungere una Didascalia e andando su Proprietà anche i tag Alt e Title.

immagine-editor-blogger

Non si può però manualmente fare in modo che una foto sia per esempio larga esattamente 400 pixel. Se vogliamo inserire delle dimensioni esatte per le immagini dobbiamo andare in Modalità HTML e applicare al codice queste modifiche

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-zRP-bKrLTUA/UD8wxb99F2I/AAAAAAAAaE0/VD7bm4Phwds/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" width="400px" ><img border="0" src="http://3.bp.blogspot.com/-zRP-bKrLTUA/UD8wxb99F2I/AAAAAAAAaE0/VD7bm4Phwds/s1600/images.jpg" width="400px" /></a></div>

dove le due espressioni width="400px" sono state aggiunte manualmente. Così come fatto per la larghezza si può procedere anche per l'altezza in questo modo

<div class="separator" style="clear: both; text-align: center;">
<a height="350px" href="http://3.bp.blogspot.com/-zRP-bKrLTUA/UD8wxb99F2I/AAAAAAAAaE0/VD7bm4Phwds/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" width="400px" ><img border="0" height="350px" src="http://3.bp.blogspot.com/-zRP-bKrLTUA/UD8wxb99F2I/AAAAAAAAaE0/VD7bm4Phwds/s1600/images.jpg" width="400px" /></a></div>

In questo caso i due valori inseriti (height="350px" e width="400px") dovranno essere coerenti con le misure originali altrimenti la foto risulterà distorta. Ovviamente solo i parametri in rosso del codice vanno presi in considerazione, tutto il resto è solo un esempio di come sia l'HTML di una foto in Blogger.


16 commenti:

  1. ottime le tue soluzioni!
    approfitto per darti spunto per il prossimo tuo post ...da oggi nei blog Blogspot c'è in alto vicino alla B (Blogger) una nuova scritta 'condividi G+ '
    ecco ti ho dato uno spunto....

    RispondiElimina
    Risposte
    1. @Fioredicollina
      Aspettiamo che finiscano di implementare Google Plus ahah

      Elimina
    2. :-D al solito....prima di risolvere i problemi già esistenti, formulano qualcos'altro! cmq grazie x la tua risposta, un saluto

      Elimina
  2. Ciao Ernesto, ti ho scritto ieri relativamente ad un problema di visualizzazione della sidebar sul blog sportpiccolicomunifg.blogspot.it
    scusami per la mail privata ma ho trovato il tuo utilissimo blog per caso e non sapendo come porti il quesito ho mandato la mail... adesso spero di non sbagliare una seconda volta.
    Ho provato ad apportare le modifiche da te suggerite ma purtroppo il problema persiste. Cosa strana è che è solo la pagina principale (la home) ad avere problemi perchè aprendo i post la sidebar è al suo posto.
    Ti invio anche il codice, sperando serva a fare più luce...

    /* Outer-Wrapper----------------------------------------------- */
    #outer-wrapper{width:960px;margin:0px auto 0px;padding:0px;text-align:left;}
    #content-wrapper{background:#fff;padding:13px;}
    #main-wrapper{width:460px;margin:0px;padding:0px;float:left;word-wrap:break-word;overflow:hidden;text-shadow:0px 1px 0px #fff;}
    #lsidebar-wrapper{width:160px;float:left;margin:0px 15px 0px 0px;padding:0px;word-wrap:break-word;overflow:hidden;text-shadow:0px 1px 0px #fff;}
    #rsidebar-wrapper{width:280px;float:right;margin:0px 0px 0px 13px;padding:0px;word-wrap:break-word;overflow:hidden;text-shadow:0px 1px 0px #fff;}

    grazie per la disponibilità

    RispondiElimina
    Risposte
    1. @RosarioRavalli
      Il codice lo conoscevo, ero andato a vederlo sul sorgente pagina. A prima vista sembra che la sidebar vada sotto perché non entra sulla destra, però accade solo sulla homepage. E' cosa strana. Prova a aumentare la larghezza di outer-wrapper da 960 a 1000. Comunque dovrebbe un problema del genere.

      Elimina
    2. ho portato il valore a 1000 ma il problema persiste. ho anche provato a cambiare template (un due colonne) e incredibilmente il problema è lo stesso... home page sfasata e tutto il resto ok.
      non ci sto a capire niente....

      Elimina
  3. Ciao Ernesto,
    vorrei sapere come inserire il padding che voglio io nel codice automaticamente generato da Blogger quando inserisco un'immagine. Di default tra l'immagine e la sua cornice ci sono 8 px, ma io vorrei salire a 10 per motivi estetici (sono un po' pedante!!!). Ho fatto alcuni tentativi ispirandomi a qualche codice ma niente! La foto deve essere centrata e avere il caption. Qui non riesco a postare il codice che mi genera Blogger perché la pagina non me lo accetta, comunque l'immagine a cui mi riferisco è l'ultima del post "Christopher Pike: Remember Me". (La prima ha il float a sinistra, per cui non sono capace di adattare quel codice alla seconda, che invece deve essere centrata). Spero di essere riuscita a spiegarmi! Grazie.

    Roberta

    RispondiElimina
    Risposte
    1. @RobertaR...
      Una cosa è inserire una immagine con un determinato padding dall'Editor e un'altra cosa modificare il codice del modello per fare in modo che tutte le immagini dei post abbiano gli stessi parametri. In questo caso vai su Modello > Modifica HTML > Procedi e cerca questo blocco di codice

      .post-body img {
      padding: 8px;
      background: #feefbc;
      border: 1px solid #e67235;
      -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
      box-shadow: 0 0 20px rgba(0, 0, 0, .2);
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      }

      Al posto di
      padding: 8px;
      metti
      padding: 10px;
      5px è invece il raggio di curvatura dell'arrotondamento degli angoli
      mentre
      background: #feefbc;
      border: 1px solid #e67235;
      sono rispettivamente il colore di sfondo e lo stile del bordo di tutte le immagini
      http://www.ideepercomputeredinternet.com/2011/01/come-modificare-gli-stili-i-colori-e-le.html

      Elimina
    2. Grazie, veloce come sempre...e anche facile!

      Elimina
  4. salve, a suo tempo avevo modificato l'html per avere foto di uguali dimensioni. Ora pero' vorrei eliminare questo vincolo, in quanto ho bisogno di inserire foto di dimensioni differenti. Potreste dirmi come fare a ripristinare il codice standard?grazie sergio

    RispondiElimina
    Risposte
    1. @ Il viaggiatore
      Dubito che tu abbia modificato tutto post per post. Probabilmente lo hai fatto dal modello e non mi ricordo di aver mai pubblicato nulla al riguardo. Forse lo hai trovato da altre parti. Non so quindi come hai fatto. Ti consiglio però di dare una occhiata al codice che inizia con
      .post-body img {
      ci dovrebbero essere una o due righe che indicano la larghezza e la altezza tipo
      width:400px !important;
      height:300px !important;
      togliendole e salvando il template dovresti risolvere. Prima di fare delle modifiche salva sempre una copia del modello.

      Elimina
  5. grazie Ernesto, sei stato davvero gentile!!!e grazie per l'aiuto che dai a tutti noi!
    buon lavoro!

    RispondiElimina
  6. Ernesto mi sono sbagliato,era questo il post..alla fine l'ho scovato.Che segugio da tartufo sono.Grazie!

    RispondiElimina
  7. Non ci stò capendo un granchè..Non ho capito dove incollare quel codice,sotto o sopra quale stringa?Grazie.

    RispondiElimina
  8. Risolto.Ho aggiunto un CSS regolando a 390 max. Pare che vada bene.Era diventato troppo pesante il Blog con soli 54 post.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 al post.