21 dicembre 2016

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 immagini articoli ridotti blog
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.

11 commenti:

  1. Buonasera, utilizzo questo post per augurare allo staff MAeSI, un sereno e santo natale e un anno nuovo carico di cose fantastiche... alle prossime domande...

    RispondiElimina
    Risposte
    1. Grazie Antonio,

      i più cari auguri di Buone Feste anche a te.

      Elimina
  2. Bravi, molto utile come funzione per il Blog! Auguri di Buone Feste

    RispondiElimina
  3. Grazie Giuseppe e Topografo.
    Auguri anche da parte nostra.

    RispondiElimina
  4. Grazie per i regali di Natale :D Auguri a tutti e complimenti! Dobbiamo fare petizione per farmi lavorare ad Incomedia. Perchè oltre ad essere veramente bravi, ci mettete la passione e capite le esigenze di noi che creiamo siti :)

    RispondiElimina
    Risposte
    1. Non esageriamo :)
      Ri-Buone Feste anche a te.

      Elimina
  5. Doppio ringraziamento per questo utilissimo script, un sereno augurio di buone feste, e uno sgrunt! per dimostrarci sempre più chi sono i mestieranti e chi i professionisti.
    Bravissimi non aggiungo altro :)

    RispondiElimina
    Risposte
    1. Grazie a te per questo piacevole commento... forse un po' esagerato :)
      Ricambiamo gli auguri di Buone Feste.

      Elimina
  6. Ho inserito lo script ma nn mi funzione purtroppo come posso fare?

    RispondiElimina
    Risposte
    1. Ciao,
      per poterti rispondere dovresti postare un link alla tua prova o sito, grazie.

      Elimina