Come inserire la miniatura del post prima del titolo in Blogger.

Recentemente ho pubblicato un articolo sui tag di Blogger illustrando il significato di quelli che sono i più importanti. Si tratta di variabili che iniziano tutte con data:, che hanno senso solo se inserite nel modello di Blogger e che mostrano dei contenuti in modo dinamico così come avviene per linguaggi di programmazione più evoluti. In questo post utilizzeremo il tag

data:post.thumbnailUrl

che determina in modo univoco la miniatura della prima immagine presente nell'articolo e che non avevo inserito nell'elenco appena citato. Questa immagine processata dai server di Blogger ci viene inviata con le dimensioni di 72x72 pixel. Volendo si possono modificare mantenendo però l'uguaglianza tra larghezza e altezza pena la distorsione della foto. L'obiettivo di questo articolo è quello di visualizzare insieme al titolo di ciascun post, la miniatura della prima foto pubblicata nello stesso. Se non ci sono immagini si vedrà un quadrato bianco. Per dare l'idea ecco come si visualizzeranno i post nella Homepage

Da notare che la miniatura sarà visualizzata anche se l'immagine si trova sotto all'intervallo del Continua a leggere. Andate su Modello > Backup/Ripristino e salvate il modello completo. Tornate su Modello > Modifica HTML > Procedi e espandete i modelli widget. Cercate con F3 o Ctrl+F la riga

<h3 class='post-title entry-title'>

e subito sotto incollate quest'altro codice

<img expr:src='data:post.thumbnailUrl' style='float:left; border:1px solid #003366; background:none; padding:2px; margin:2px 10px 4px 2px; width:72px; height:72px;'/>

che può naturalmente essere personalizzato. Ricordo brevemente i parametri che possono essere modificati:

1. Il bordo ha un suo spessore (1px), un suo aspetto (solid) e un suo colore (#003366) che possono essere modificati consultando il post sullo stile dei bordi. Tale attributo può anche essere tolto se vogliamo visualizzare la sola miniatura
2. Lo sfondo del quadrato non sarà visibile (none) ma può essere inserito un colore (vedi i codici dei colori)
3. La distanza interna tra miniatura e quadrato (padding) è stata impostata su 2 pixel
4. I quattro numeri di margine (2px 10px 4px 2px;) sono rispettivamente le distanze del quadrato dalla parte alta, dalla parte destra, dalla parte bassa e dalla parte sinistra del layout. Si parte cioè dall'alto e poi si procede in direzione oraria. Determinano le distanze del quadrato nelle quattro direzioni.
5. 72 pixel è la dimensione dell'altezza e della larghezza della miniatura
6. Se si vuole visualizzare l'immagine sulla destra invece che sulla sinistra basta sostituire float:left; con float:right;

Si salva il modello e si vedono le modifiche apportate. In questi casi è opportuno prima dare uno sguardo all'Anteprima.