Visualizzare le immagini negli articoli ridotti del blog di WebSite X5

Nel blog di WebSite X5 possiamo organizzare la visualizzazione degli articoli della pagina principale attraverso la scheda Struttura, scegliendo tra tre opzioni:

1. Il primo esteso, gli altri ridotti
2. Tutti estesi
3. Tutti ridotti

La differenza consiste nel testo visualizzato - quello dell'intero articolo nell'articolo esteso, quello scritto nel campo Descrizione breve nell'articolo ridotto - e nell'assenza dell'immagine negli articoli ridotti.

Se volessimo rendere questa pagina più gradevole senza eccedere con la lunghezza dei contenuti, cioè senza scegliere l'opzione Tutti estesi, potremmo inserire nella Descrizione breve di ogni articolo l'immagine corrispondente, scrivendone il relativo codice HTML, esempio:

<img class="imgPostS" src="../images/nomeimg.ext" alt="testo alternativo" />

Il valore dell'attributo src dovrà essere ricavato dal corrispondente articolo esteso. La classe imgPostS data all'immagine servirà per definirne la formattazione con qualche riga di CSS.

Questo metodo risulta però poco pratico poiché dovremmo inserire il codice dell'immagine manualmente articolo per articolo.
Noi abbiamo allora cercato una via alternativa, che non prevede l'inserimento di nessun codice nel campo Descrizione Breve, ma un unico script per tutti gli articoli che, in automatico, aggiunge l'immagine relativa in ogni articolo ridotto.
Ecco la nostra DEMO:

DEMO

Ma come associare in automatico la giusta immagine con il giusto articolo?
Analizzando il codice HTML generato della pagina del blog esportata abbiamo notato che, in realtà,  l'immagine, se presente nell'articolo esteso, viene riportata anche nell'articolo ridotto ma è nascosta con display none e dotata dell'attributo itemprop, adottato da Schema.org, cosa che ci fa ipotizzare che l'immagine serva per una migliore indicizzazione dei contenuti del blog.
Abbiamo quindi scritto un codice jQuery che recupera dalla pagina tutte queste immagini nascoste, le inserisce in un array e, con un ciclo successivo, le associa al corrispondente articolo:

<script>
/* =========================================================================================
   Author's custom code: http://quellidelcucuzzolo.blogspot.it - Please do not remove credit
   ========================================================================================= */

$(document).ready(function() {
  var imgBlog = new Array();
  var i = 0;
  $("img[itemprop='image']").each(function() {
    imgBlog.push($(this).attr("src"));
  })
  $(".imBlogPostSummary").each(function() {
    if ($(this).nextAll().eq(1).css('display') == 'none') {
      $(this).prepend("<img class='imgPostS' src='../" + imgBlog[i] + "' />");
      i++;
    }
  });
});

</script>

Lo script è da inserire in Proprietà della Pagina Speciale del Blog, Esperto, Prima della chiusura del tag HEAD. L'unica personalizzazione da fare riguarda la chiave dell'array imgBlog[i]: se utilizziamo, come nel nostro esempio, la modalità di visualizzazione 1. Il primo esteso gli altri ridotti e il post esteso ha un'immagine, dobbiamo modificare la chiave aggiungendo +1 in questo modo: imgBlog[i+1]

Il risultato sarà visibile solo dopo aver esportato il sito online.

La classe presente nell'immagine ci permette di facilitare l'inserimento delle regole di stile per una formattazione più appropriata.
Queste sono le regole di stile che abbiamo inserito nella nostra demo, sempre in Proprietà della Pagina Speciale del Blog, Esperto, Prima della chiusura del tag HEAD, preferibilmente prima dello script precedente:

<style>
.imgPostS {
  float: left;
  width: 100%;
  max-width: 200px;
  padding: 0 10px 8px 0;
}

.imBlogSeparator {
  clear: both;
  padding-top: 10px;
}

</style>

Una precisazione finale: il link generato dal programma per l'immagine nascosta con attributo itemprop è errato. Nello script abbiamo corretto l'URL relativo affinché l'immagine sia effettivamente visualizzata.