Come personalizzare una immagine in un post o in un widget.

Se si usa l'Editor di Blogger o Windows Live Writer possiamo agevolmente personalizzare ogni parametro delle foto che inseriamo nei post. Riferendomi a WLW, selezionando l'immagine postata e andando su Strumenti immagine

si può ritagliarla, visualizzarne le dimensioni e modificarle, ruotarla a sinistra, ruotarla a destra o inclinarla. E' anche possibile applicare un particolare stile ai bordi scegliendo quello ereditato dal blog oppure eliminandolo. Cosa necessaria quando si usano immagini animate in GIF. Si può modificare anche il contrasto o aggiungere una filigrana che può servire come watermark

Nella finestra popup che si apre è sufficiente digitare il testo, scegliere la famiglia di caratteri, le dimensioni dei font, la posizione e cliccare su OK. Questo può essere utile per chi pubblica foto di alta qualità per affermarne la propria paternità. Si possono altresì scegliere i margini della foto in tutte e quattro le direzioni. Ci sono anche le icone per selezionarne l'allineamento: in linea con il testo, a sinistra, al centro e a destra. Particolarmente importanti sono le icone che permettono di inserire un link alla foto scegliendo tra nessun collegamento, immagine di origine e indirizzo web. Ricordo che il Lightbox nativo di Blogger viene applicato solo alle foto senza collegamento. E' fondamentale inserire il Testo alternativo, necessario per una migliore indicizzazione da parte dei motori di ricerca (leggi il post sul tag Alt).

E' anche possibile inserire tutta una serie di effetti quali la ricolorazione, la nitidezza, la sfocatura e il rilievo. Se vogliamo inserire una immagine in un widget, non abbiamo a disposizione tutti questi strumenti. Possiamo però sempre arrangiarci inserendo la foto su una bozza di Windows Live Writer, modificarla e copiarne l'HTML da inserire poi nel widget.

Possiamo fare tutto questo anche esclusivamente con i CSS che offrono delle personalizzazioni ulteriori. Per esempio questa immagine

è stata postata in modalità HTML con questo codice

<img alt="cavalli" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8iiUZaB6VnjUw3pCzfi6xwCG9FyO6PBulHaV3Ud2yjFW8PQI8mahNg6Psshm6QAkd9B6F46S4DwBIEYVvucO-72FMq40D2wabkpqX8IBIbmBZc3RoH-VRpgwEJdJcr9MTThmnZGG4QJM/s180/cavalli.jpg" style="background-color: white; border: #505961 3px solid; box-shadow: 0px 10px 10px 0px #FF0000; display: block; float: none; height: 131px; margin: 20px auto; padding: 3px; width: 180px;" />

Oltre all'URL della immagine, i parametri da personalizzare riguardano le dimensioni, lo sfondo della immagine, lo stile del bordo, l'ombreggiatura (box-shadow visibile solo con Firefox, Chrome, Opera e IE10), il margine esterno (margin) e quello interno (padding). La posizione nel layout è data da display: block; float:none;. In questo caso sarà visualizzata al centro del layout, sostituendo none con right o con left si vedrà rispettivamente a destra o a sinistra.