Blog Widget di WebSite X5 con effetto carousel slider

In un articolo precedente abbiamo utilizzato un effetto carousel slider per animare i commenti del guestbook inseriti in un'altra pagina.
Lo stesso effetto si può applicare all'oggetto opzionale Blog Widget e anche allo script da noi pubblicato sull'Unofficial forum ormai un paio di anni fa, utilizzato fin dal template Tamarillo per la versione 10 e costantemente aggiornato adeguandolo via via alle nuove versioni di WebSite X5.
Ecco la nostra demo in cui sono presenti le due alternative:

DEMO

Sia che scegliate la prima o la seconda soluzione, per prima cosa dovete scaricare il plugin OwlCarousel dal sito ufficiale oppure da questo file .zip, in cui abbiamo inserito solo i file necessari alla nostra implementazione; dovete quindi allegare al progetto i file owl.carousel.min.css, owl.theme.default.min.css e owl.carousel.js utilizzando la scheda Esperto di un Oggetto HTML inserito nella pagina e flaggando l'opzione Collega il file.

Blog Widget

In una pagina inseriamo l'oggetto Blog Widget del programma. In Mappa, Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD inseriamo questo codice:

<script>
$(document).ready(function() {
  $(".post_container").addClass("owl-carousel owl-theme");
  x5engine.boot.push(function() {
    //owlCarousel e relative opzioni
    var owl = $(".owl-carousel");
    owl.owlCarousel({
      items: 1, 
      loop: true,
      margin: 10,
      autoplay: true,
      autoplayTimeout: 6000,
      autoplayHoverPause: true
    });
  });
});
</script>

Lo script si occupa di assegnare al div generato dall'oggetto Blog Widget le classi che servono per il funzionamento del plugin OwlCarousel e di richiamare il plugin stesso solo dopo che nella pagina sono stati caricati tutti i file JavaScript gestiti dal programma.
Le opzioni del plugin OwlCarousel sono disponibili sul sito dell'autore.

Script MAeSI

Ora ci occupiamo della seconda alternativa, fatta in casa. Inseriamo nella pagina un oggetto Codice HTML contenente questo codice:

<!-- ultimi articoli blog -->
<div id="newsBlog"></div>

Nella finestra Proprietà Pagina, Sezione Esperto, Prima della chiusura del tag HEAD, inseriamo questo codice:

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

var nNews = 3; //numero degli articoli del blog visibili
$(document).ready(function() {
  var request = $.ajax({
    type: "GET",
    url: "blog/x5feed.php",
    dataType: "xml"
  });
  request.done(parseXML);
  request.fail(function() {
    $("#newsBlog").text("Errore nel caricamento degli articoli del blog. Questa funzionalità è attiva solo dopo la pubblicazione del sito su Internet.");
  });
  // START owl carousel
  request.always(function() {
    $("#newsBlog").addClass("owl-carousel owl-theme");
    var owl = $(".owl-carousel");
    owl.owlCarousel({
      items: 1,
      loop: true,
      margin: 10,
      autoplay: true,
      autoplayTimeout: 6000,
      autoplayHoverPause: true
    });
  });
  //END owl carousel
});

//lettura dati x5feed.php
function parseXML(xml) {
  $(xml).find("item").each(function(index) {
    var miadata = new Date($(this).find("pubDate").text());
    var day = miadata.getDate();
    var mese = miadata.getMonth() + 1;
    var year = miadata.getFullYear();
    var titolo = $.trim($(this).find("title").text());
    var link = ($(this).find("link").text());
    var articolo = $($(this).find("description").text());
    var immagine = articolo.find("img").eq(0).attr("src");
    var desc = articolo.text().substr(0, 250); //visualizza i primi 250 caratteri dell'articolo
    var autore = $(this).find("author").text();
    var tag = $(this).find("category[domain^='http']").text();
    var tagImg = immagine ? "<div class='imgBlog'><img src='" + immagine + "' /></div>" : "";
    // OUTPUT
    var link_markup = "<div>"+
      // immagine e titolo dell'articolo
      "<div class='descBlog'>" + tagImg + " <div class='titoloBlog'>" + titolo + "</div>" +
      // categoria
      "<div class='dataBlog'><span><i class='fa fa-tag'> </i>" + tag + "</span>" +
      // autore    
      "<span><i class='fa fa-user'> </i>" + autore + "</span>" +
      //data
      "<span><i class='fa fa-calendar'> </i>" + day + "/" + mese + "/" + year + "</span></div>" +
      // testo e link leggi tutto
      desc + "... <a class='imCssLink' href='" + link + "'>leggi tutto &raquo;</a></div>" +
      "<div class='divisorio'></div></div>";
    // inserimento output nel div contenuto nell'oggetto Codice HTML
    $(link_markup).appendTo("#newsBlog");
    if (index == (nNews - 1)) return false;
  });
}
</script>

Lo script utilizza i dati presenti nel file x5feed.php, file che il programma produce automaticamente e che lo script recupera attraverso una chiamata Ajax. Come detto all'inizio si possono trovare informazioni più dettagliate nel topic del forum Unofficial. L'assegnazione delle classi necessarie al funzionamento del plugin OwlCarousel e il richiamo alla funzione stessa vengono effettuati solo dopo che la chiamata Ajax è stata completata.
E' possibile personalizzare il numero di articoli che si vogliono visualizzare, modificando il valore della variabile nNews:
var nNews = 3; //numero degli articoli del blog visibili 
Anche la struttura dell'output, interamente commentato, può essere modificata a piacere. Facciamo notare che nel codice abbiamo inserito i tag propri per visualizzare le icone Font Awesome: per riprodurre fedelmente la nostra demo dobbiamo quindi anche scaricare dal sito ufficiale ed allegare al progetto tutti i file necessari.

Ovviamente dobbiamo scrivere anche le regole CSS che stabiliscono l'aspetto dell'output. Queste sono le regole utilizzate nella nostra demo, completamente personalizzabili, inserite nella scheda Esperto dell'oggetto Codice HTML:

div#newsBlog div.imgBlog {
    float: left;
    margin: 4px 20px 4px 0;
    width: 100px;
}
div#newsBlog div.titoloBlog {
    font-size: 12pt;
    font-weight: bold;
    margin-bottom: 5px;
}
div#newsBlog div.dataBlog {
    font-size: 12px;
    padding-top: 8px;
    margin-bottom: 10px;
}
div#newsBlog div.dataBlog span {
    margin-right: 10px;
}
div#newsBlog div.dataBlog i {
    font-size: 14px;
    margin-right: 4px;
}

Aggiornamento del 04/01/2017
Di seguito il link allo script (MAeSI) modificato per visualizzare solo tot articoli di una determinata categoria del blog: LINK
Nello script bisogna personalizzare il valore della variabile cNews inserendo il nome della categoria scelta.