Come mostrare la miniatura della immagine accanto al titolo del post nella homepage del sito.

Come mostrare la miniatura dell'immagine del post sulla destra o sulla sinistra del titolo dell'articolo su Blogger.

Alcuni modelli scaricati da internet hanno una homepage in forma di tabella in cui viene mostrato oltre al titolo del post e all'incipit anche la prima immagine pubblicata nell'articolo. Se il nostro obiettivo è quello di mostrare diversi articoli in homepage con titoli, incipit e immagini possiamo anche farlo mantenendo il nostro solito modello ufficiale di Blogger.

La prima operazione da fare è quella di pubblicare gli articoli con il jump vale a dire con l'Intervallo cliccando sulla apposita icona del Modello di Blogger. In questo modo si potranno facilmente inserire nella homepage da sei a dieci articoli senza difficoltà andando su Impostazioni > Post e Commenti > Mostra più post possibili nella pagina principale.

In questa tipologia di pagina iniziale mancheranno però le immagini visto che è sempre opportuno pubblicare la prima foto dopo il Jump o Intervallo che dir si voglia per aumentare la velocità di caricamento della Homepage.  

COME AGGIUNGERE LA MINIATURA AL TITOLO DEL POST

Vediamo come sia possibile visualizzare anche una miniatura della prima immagine accanto al titolo del post. Vogliamo cioè creare una homepage che abbia questo aspetto

con sulla destra dei titoli le miniature delle immagini presenti negli articoli. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga

<b:includable id='post' var='post'>

e si scorre il codice in basso fino a trovare

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

Subito sopra a questa riga si incolla questo codice

<b:if cond='data:blog.url == data:blog.homepageUrl'><img expr:src='data:post.thumbnailUrl' style='float:right; border:1px solid #00f; background:none; padding:2px; margin:-25px 10px 4px 2px; width:72px; height:54px;'/>
</b:if>

in questo modo

Si salva il modello. Le personalizzazioni più importanti riguardano

1. Il tag data:post.thumbnailUrl è il tag di Blogger che richiama la miniatura del post 
2.  border:1px solid #00f; è lo stile del bordo intorno alla miniatura che può essere personalizzato nello stile, nello spessore e nel codice del colore.
3. width:72px; height:54px; sono rispettivamente la larghezza e l'altezza della miniatura. Le misure proposte rappresentano un rapporto di 4:3 che è il quello più usato per la pubblicazione delle immagini. Si possono ovviamente scegliere altri valori e un altro rapporto.
4. padding:2px; è la distanza in tutti i e quattro i lati tra bordo e miniatura
5. background:none; per non avere sfondo tra bordo e miniatura 
6. margin:-25px 10px 4px 2px; rappresentano le distanze tra la miniatura e il resto del layout nei quattro lati. Il parametro più importante è il primo, -25px, che imposta la distanza dalla parte alta e che è negativo per allineare miniatura e titolo. I parametri che seguono sono per le altre direzioni a partire sempre da quella in alto e spostandosi in senso orario.

Con questo codice le miniature saranno mostrate solo in Homepage e non nelle altre tipologie di pagina. Utilizzando i tag condizionali si può modificare questa impostazione. Per esempio eliminando le due righe evidenziate di verde si visualizzeranno sempre. Se si volessero mostrare le miniature non solo in Homepage ma anche nelle pagine delle etichette e in quelle di archivio ma non nelle pagine statiche allora dovremo sostituire la prima riga evidenziata di verde con 

<b:if cond='data:blog.pageType != &quot;item&quot;'> 

Si può anche sostituire float:right; con float:left; se si preferisce visualizzare le miniature sulla sinistra ma in questo caso si pone il problema di calibrare in modo diverso dimensioni delle immagini e margini tra miniatura e resto del layout

Si può comunque riuscire con un po' di pazienza a trovare i parametri giusti.