Come personalizzare le dimensioni delle immagini 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.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WJCSMZLTLGf7vu7GfMxjRcM7duZNkAAXamIHZ4CbL415sSO7BZ7xJlSg95hb0NtqOO4siq2BWkTHfYOk-N4-Urqm0HDysN9_jSPI3EVAGiIQcIUWJzruoxwRYymYXfYYpT8-KmvKZcZr/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" width="400px" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WJCSMZLTLGf7vu7GfMxjRcM7duZNkAAXamIHZ4CbL415sSO7BZ7xJlSg95hb0NtqOO4siq2BWkTHfYOk-N4-Urqm0HDysN9_jSPI3EVAGiIQcIUWJzruoxwRYymYXfYYpT8-KmvKZcZr/s1600/images.jpg" width="400px" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WJCSMZLTLGf7vu7GfMxjRcM7duZNkAAXamIHZ4CbL415sSO7BZ7xJlSg95hb0NtqOO4siq2BWkTHfYOk-N4-Urqm0HDysN9_jSPI3EVAGiIQcIUWJzruoxwRYymYXfYYpT8-KmvKZcZr/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" width="400px" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WJCSMZLTLGf7vu7GfMxjRcM7duZNkAAXamIHZ4CbL415sSO7BZ7xJlSg95hb0NtqOO4siq2BWkTHfYOk-N4-Urqm0HDysN9_jSPI3EVAGiIQcIUWJzruoxwRYymYXfYYpT8-KmvKZcZr/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WJCSMZLTLGf7vu7GfMxjRcM7duZNkAAXamIHZ4CbL415sSO7BZ7xJlSg95hb0NtqOO4siq2BWkTHfYOk-N4-Urqm0HDysN9_jSPI3EVAGiIQcIUWJzruoxwRYymYXfYYpT8-KmvKZcZr/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" width="400px" ><img border="0" height="350px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WJCSMZLTLGf7vu7GfMxjRcM7duZNkAAXamIHZ4CbL415sSO7BZ7xJlSg95hb0NtqOO4siq2BWkTHfYOk-N4-Urqm0HDysN9_jSPI3EVAGiIQcIUWJzruoxwRYymYXfYYpT8-KmvKZcZr/s1600/images.jpg" width="400px" /></a></div>
<a height="350px" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WJCSMZLTLGf7vu7GfMxjRcM7duZNkAAXamIHZ4CbL415sSO7BZ7xJlSg95hb0NtqOO4siq2BWkTHfYOk-N4-Urqm0HDysN9_jSPI3EVAGiIQcIUWJzruoxwRYymYXfYYpT8-KmvKZcZr/s1600/images.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" width="400px" ><img border="0" height="350px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WJCSMZLTLGf7vu7GfMxjRcM7duZNkAAXamIHZ4CbL415sSO7BZ7xJlSg95hb0NtqOO4siq2BWkTHfYOk-N4-Urqm0HDysN9_jSPI3EVAGiIQcIUWJzruoxwRYymYXfYYpT8-KmvKZcZr/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.
ottime le tue soluzioni!
RispondiEliminaapprofitto 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....
@Fioredicollina
EliminaAspettiamo che finiscano di implementare Google Plus ahah
:-D al solito....prima di risolvere i problemi già esistenti, formulano qualcos'altro! cmq grazie x la tua risposta, un saluto
EliminaCiao Ernesto, ti ho scritto ieri relativamente ad un problema di visualizzazione della sidebar sul blog sportpiccolicomunifg.blogspot.it
RispondiEliminascusami 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à
@RosarioRavalli
EliminaIl 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.
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.
Eliminanon ci sto a capire niente....
neppure io...
EliminaCiao Ernesto,
RispondiEliminavorrei 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
@RobertaR...
EliminaUna 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
Grazie, veloce come sempre...e anche facile!
Eliminasalve, 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@ Il viaggiatore
EliminaDubito 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.
grazie Ernesto, sei stato davvero gentile!!!e grazie per l'aiuto che dai a tutti noi!
RispondiEliminabuon lavoro!
Ernesto mi sono sbagliato,era questo il post..alla fine l'ho scovato.Che segugio da tartufo sono.Grazie!
RispondiEliminaNon ci stò capendo un granchè..Non ho capito dove incollare quel codice,sotto o sopra quale stringa?Grazie.
RispondiEliminaRisolto.Ho aggiunto un CSS regolando a 390 max. Pare che vada bene.Era diventato troppo pesante il Blog con soli 54 post.Grazie.
RispondiElimina