Come ridimensionare le immagini postate con l'Editor di Blogger.

Come modificare la larghezza delle immagini di Blogger con un valore qualsiasi al posto delle opzioni piccola, media, grande e extralarge.

Una delle maggiori difficoltà nel confezionare i post per gli utenti di Blogger è costituito dalla gestione delle immagini. Per questa ragione personalmente preferisco scrivere i miei articoli con Open Live Writer per poi postarli come Bozza nell'Editor e pubblicarli dopo aver impostato il Permalink e aver inserito la Descrizione di ricerca.

Le immagini pubblicate con l'Editor di Blogger non possono essere ridimensionate in modo continuo ma lo si può fare solo scegliendo tra varie opzioni. Se per esempio volessimo inserire una immagine della larghezza di 530 pixel non lo potremmo fare con i tool messi a disposizione.

Come è noto per aggiungere una immagine dall'Editor di Blogger si clicca sulla icona per aggiungere la foto e si seleziona il modo come farlo. La foto potrà essere caricata dal computer, dal blog in oggetto, da un album di Google Foto, dal telefono, dalla webcam o da un URL qualora fosse già presente nel web.

Le opzioni disponibili sono: Piccola, Media, Grande, Extra-large, Dimensione originale.

Nel test ho scelto la misura Media che è di 320 pixel. Le dimensioni standard di Blogger sono:

1. Immagine piccola con larghezza di 200 pixel
2. Immagine media con larghezza di 320 pixel
3. Immagine grande con larghezza di 400 pixel
4. Immagine extralarge con larghezza di 640 pixel

Non sono possibili valori intermedi se non modificando il codice. Si va su HTML e si prende in esame il codice della immagine che è stata appena inserita tramite l'Editor e che sarà simile a questo

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhap_VBXlR2U6KcdVfup1SYFfd6CSdX53ngNSPo-AXGtrwf7caseMNGXEX-D3kgXcwtLva08GdJBW-BbUXTiKyc95iW78E6S18omjjWlpP2T2vwGRHOZsv2gupH7MKoS3IdPnz53JDr-vMo/s1600/Inverno.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhap_VBXlR2U6KcdVfup1SYFfd6CSdX53ngNSPo-AXGtrwf7caseMNGXEX-D3kgXcwtLva08GdJBW-BbUXTiKyc95iW78E6S18omjjWlpP2T2vwGRHOZsv2gupH7MKoS3IdPnz53JDr-vMo/s320/Inverno.jpg" width="320" /></a></div>

Come detto ho preso come test una immagine caricata dal computer, con allineamento centrato e ancora senza aver aggiunto i tag Title e Alt che si inseriscono cliccando su Proprietà e che sono fondamentali dal punto di vista SEO. Analizziamo tale codice nei punti che ci interessano.

La riga evidenziata di verde serve per l'allineamento centrale e può variare se si è scelto un altro tipo di allineamento. Il primo URL colorato di blu è quello del link alla immagine. Si tratta in sostanza di un collegamento inserito alla stessa immagine. Se ci si clicca sopra si apre una pagina in cui ci sarà solo la foto. Le immagini con tali link sono cliccabili. Questo accade se non si è abilitato il Lightbox nativo di Blogger che mostrerà le foto con tale effetto quando appunto ci si clicca sopra.

Da notare che in tale URL c'è la stringa s1600 che è quella standard usata per gli URL dei link. Consideriamo adesso l'URL colorato di rosso che è molto simile a quello colorato di blu e si distingue da questo solo per la stringa s320 sostituita a s1600.

Si tratta di un modo per personalizzare la larghezza delle foto usata da Picasa prima e da Google Foto adesso. Infatti è visibile anche il tag width="320" che è quello classico della larghezza. C'è anche il tag dell'altezza, in questo caso height="204", che viene creato automaticamente dall'Editor per mantenere le proporzioni della immagine originale.

PERSONALIZZARE LE DIMENSIONI DELLE IMMAGINI DI BLOGGER

Per evitare di distorcere la foto è opportuno come prima operazione quella di togliere il tag height. Si potrebbe anche lasciare se però si calcola bene l'altezza per mantenere le proporzioni. Per pubblicare una immagine della larghezza di 530 pixel che abbiamo preso come misura di test si deve modificare il codice precedente in questo modo

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhap_VBXlR2U6KcdVfup1SYFfd6CSdX53ngNSPo-AXGtrwf7caseMNGXEX-D3kgXcwtLva08GdJBW-BbUXTiKyc95iW78E6S18omjjWlpP2T2vwGRHOZsv2gupH7MKoS3IdPnz53JDr-vMo/s1600/Inverno.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhap_VBXlR2U6KcdVfup1SYFfd6CSdX53ngNSPo-AXGtrwf7caseMNGXEX-D3kgXcwtLva08GdJBW-BbUXTiKyc95iW78E6S18omjjWlpP2T2vwGRHOZsv2gupH7MKoS3IdPnz53JDr-vMo/s530/Inverno.jpg" width="530" /></a></div>

In definitiva si sostituisce s320 con s530 nell'URL colorato di rosso e si cambia il valore di width="320" con width="530". La mancanza del tag height non incide minimamente sull'aspetto della foto anche se potremo aggiungere height="338" il cui valore è stato trovato con una semplice proporzione.

Se invece di aggiungere un foto dal computer la si carica da un album il codice che ne deriva sarà sostanzialmente lo stesso. Infine se si inserisce una foto con un URL basterà modificare il valore di width e eventualmente di height senza preoccuparci dell'URL della foto.