Modificare la dimensione della miniatura del gadget "Post popolari"

Si tratta di qualcosa che in precedenza richiedeva JavaScript per poter modificare l'immagine originale caricata dal gadget, che misurava solo 72 pixel. Ne abbiamo ottenuta una più grande sfruttando il problema, già noto, delle  immagini multiple di dimensioni diverse che abbiamo in Blogger quando ne memorizziamo una nuova sul suo server, associandola... in precedenza a Picasa e ora a Google Foto.

Tuttavia, attualmente ottenere questo risultato è molto più semplice grazie all'integrazione di nuovi operatori in Blogger, in particolare resizeImage ( spiegato anche in precedenza ), e all'integrazione precisa del gadget "Post popolari" nel suo nuovo codice . Novità sì, dato che è stato aggiornato non molto tempo fa.

Quindi, la prima cosa che dobbiamo fare è modificare il template e individuare il codice del gadget. Lo troveremo cercando la parola chiave "popularposts".
Una volta individuato, la riga che ci interessa è quella che recita:

<b:con valore='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72 , "1:1") : data:post.thumbnail' var='image'>

Vedete quel numero 72 laggiù? Beh, è ciò che indica che le immagini originali dei rispettivi post devono essere trasferite sul gadget con una dimensione quadrata di soli 72px.
Il modo per farle apparire più grandi nel suddetto gadget (o più piccole, se per qualche motivo lo volessimo) sarebbe quello di cambiare quel numero. Ad esempio, per ottenere un ritaglio quadrato dell'immagine originale di 300px, il codice dovrebbe essere modificato in questo modo.

<b:con valore='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300 , "1:1") : data:post.thumbnail' var='image'>

Penso che sia molto semplice, quindi se non funziona, l'unica possibile ragione è che hai ancora il vecchio codice del gadget e non riesci a trovare la riga che ho indicato. In tal caso, la cosa migliore da fare è eliminare il gadget e aggiungerlo di nuovo. Questo aggiornerà quasi sicuramente il codice e, poiché le opzioni di configurazione sono limitate, non perderai nulla e non perderai quasi tempo.

---

E poiché il design potrebbe risultare un po' rovinato se le miniature fossero troppo grandi, questo CSS potrebbe aiutarti:

.PopularPosts ul,
.PopularPosts li,
.PopularPosts img {
margine: 0 !importante;
spaziatura: 0 !importante;
rientro del testo: 0 !importante;
}
.PopularPosts .item-thumbnail {
float: nessuno !importante;
margine: 10px 0 !importante;
}
.PopularPosts .item-title a {
peso del carattere: grassetto;
dimensione del carattere: 110%;
}

fonte