7 dicembre 2016

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 blog widget carousel slider
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.




41 commenti:

  1. Interessante e utile! Thanks

    RispondiElimina
  2. Ciao. Nel primo esempio "Blog Widget" sembra che, alle risoluzioni inferiori, il contenuto con il testo di anteprima dell'articolo non si adatti in altezza (io vedo sparire l'ultima parte di tale testo "Pubblicato da Admin - data - ora"). Nel secondo esempio, "Scipt MA&SI" invece il contenuto è sempre visibile anche alle risoluzioni inferiori. Ciao

    RispondiElimina
    Risposte
    1. Ciao,
      grazie per la segnalazione, il problema era il valore dell'altezza dell'oggetto Blog Widget: l'abbiamo aumentato da programma.

      Elimina
  3. Grazie MAeSi come sempre un lavoro magnifico, ma non riesco a farlo visualizzare nel mio sito di prova seguendo il 2° metodo:
    http://servizidomus.16mb.com/bloga.php
    I file iniziali del carousel2 (js e 2 css) li ho messi collegati all'oggetto codice html in cui inserisco il div. Come mai?

    RispondiElimina
    Risposte
    1. Ciao, grazie a te per il commento.

      Non hai flaggato l'opzione "Collega il file" per i due .css

      Elimina
    2. Ho provato a collegarlo, però non compaiono le icone, tutto risolta centrato e vorrei aumentare l'altezza per far visualizzare più testo. Cosa devo modificare? Grazie!

      Elimina
    3. Per vedere le icone, come abbiamo scritto nell'articolo, devi integrare Font Awesome oppure puoi inserirle come immagini, ovviamente cambiando l'output nello script.

      Il contenuto centrato lo cambi da programma: stile dell'Oggetto Codice HTML.

      Per visualizzare più testo devi aumentare il valore della variabile desc nello script: c'è pure un commento che lo specifica.

      Elimina
  4. Risolto, grazie Maesi e tanti auguri di buon Natale: siete mitici!

    RispondiElimina
  5. Salve e tanti auguri di buon anno!
    Volevo sapere se fosse possibile poter modificare il codice e scegliere di visualizzare solo gli articoli di una determinata categoria.
    Grazie!

    RispondiElimina
    Risposte
    1. Ciao, Buon Anno anche a te.
      Sì è possibile, nel file .xml ci sono tutte le informazioni necessarie.
      In fondo all'articolo abbiamo aggiunto un link allo script modificato.

      Elimina
    2. Grazie di tutto: ci sorprendete sempre! :)

      Elimina
    3. Ciao MAeSI, io ho nel sito due categorie:
      http://www.unionepizzaioliitaliani.it/blog/?category=BACHECA+LAVORO
      http://www.unionepizzaioliitaliani.it/blog/?category=NEWS+e+EVENTI
      ed ho inserito l'effetto Carousel nella Home Page e come nome nelle variabili cNews ho inserito NEWS+e+EVENTI e BACHECA+LAVORO, ma i post non si visualizzano... come mai?

      Elimina
    4. Ciao,
      rileggi con attenzione quello che ti abbiamo scritto il 21 aprile.
      Inoltre, il nome delle categorie non deve contenere il carattere più (+) ma uno spazio.
      Dovrai anche duplicare e modificare i CSS.

      Elimina
    5. Grazie MaeSI ma ho modificato il nome delle variabili ma non mi compare l'effeto carousel:
      http://unionepizzaioliitaliani.it/temp2.php

      Elimina
    6. Ehm... altro che le variabili... tu hai modificato anche i tag!! Forse ti conviene, prima di addentrarti in modifiche del codice, studiare un po' di JavaScript... in questo momento noi non abbiamo il tempo per farti modifiche personalizzate. Nell'attesa puoi utilizzare il secondo metodo, avendo cura di aggiungere l'attributo target al link.
      Buon lavoro!

      Elimina
  6. Ciao MAeSI, ho visto il codice modificato per visualizzare più categorie ma, dal momento che ho bisogno di visualizzare due carousel ddi 2 categorie sulla Homepage, come faccio visto che il codice si mette globalmente sulla pagina?
    Grazie!

    RispondiElimina
    Risposte
    1. Ciao,
      un modo semplice, anche se non troppo elegante, è quello di duplicare lo script e codice HTML, cambiando nome a varibili, funzione e id del div che conterrà gli articoli ridotti.
      Un modo ancora più semplice e sempre meno elegante, è quello di utilizzare un iframe.

      Elimina
    2. Grazie Maesi, meglio la prima opzione. Grazie mille!

      Elimina
  7. Ciao ragazzi, rieccomi qua per 2 richieste:
    - come faccio a mettere a capo dopo la foto il titolo del blog? ho provato con il tag
    ma non mi funziona...
    - come faccio a poter eliminare lo spazio vuoto dopo il testo di apertura dell'articolo su desktop, invece su mobile mi compare il testo troncato?
    Ecco il link:
    http://unionepizzaioliitaliani.it/home.php
    Grazie mille!

    RispondiElimina
    Risposte
    1. Ciao,
      per mandare il titolo a capo devi modificare il css del div che contiene l'immagine (selettore div#newsBlog div.imgBlog), togliendo float:left;
      Per la gestione degli spazi in modalità desktop devi intervenire sulla disposizione degli oggetti nelle righe: i 5 "pulsanti" a sinistra determinano l'altezza della riga.
      Per gli accavallamenti in responsive degli oggetti prova ad impostare altezza 0 all'oggetto HTML che contiene il codice.
      Guarda però che il tuo sito è estremamente lento a caricarsi, anzi ha un caricamento quasi infinito: molte immagini, molti effetti, la finestra di popup... il cursore del caricamento della pagina non smette mai di girare.

      Elimina
    2. Grazie ragazzi, e come faccio ad allegerirlo?

      Elimina
    3. Adesso ho notato che mi compare un enorme spazio bianco sotto...come faccio ad eliminarlo?

      Elimina
    4. Puoi inserire un CSS che diminuisca il padding inferiore al div con id imCellStyle_143 oppure distribuisci l'Oggetto Codice HTML sull'intera riga, come abbiamo fatto noi nella demo.

      Elimina
    5. distribuisco sull'intera riga, grazie come sempre.

      Elimina
  8. Is there anyway to get this to work in v14 please

    thanks

    RispondiElimina
  9. Ciao,

    Ho una domanda, qualcuno potrebbe inviare un codice per inserire solo l'immagine che verrà scaricata dal BLOG nel widget BLOG?

    Ci scusiamo per la sintassi ma sto usando il traduttore di google.

    Saluti.

    RispondiElimina
    Risposte
    1. Ciao,
      non abbiamo capito bene la tua domanda comunque non abbiamo intenzione di fare altre modifiche al codice.

      Siamo spiacenti.

      Elimina
  10. Buongiorno a tutti.
    Riguardo allo script MaESI, nello scorrimento degli articoli del blog, l'immagine purtroppo non appare se è inserita nella copertina dell'articolo del blog e non nel corpo dell'articolo.
    Penso che si debba modificare lo script, ma non ho conoscenze approfondite in merito.
    C'è qualcuno che può darmi un suggerimento? Grazie

    RispondiElimina
    Risposte
    1. Ciao,
      lo script utilizza i dati presenti nel file x5feed.php, file che il programma produce automaticamente.
      Nella versione attuale di WebSite X5 (16), nel suddetto file non c'è traccia del file immagine usato come copertina quindi tale immagine non può essere prelevata allo stesso modo degli altri dati.

      Se avremo un po' di tempo, daremo un'occhiata ad altre possibili opzioni.

      Elimina
  11. OK, grazie per le informazioni ricevute.
    Se riuscite a trovare qualche soluzione, penso sia utile anche a molti altri utenti di Website.
    Cordiali saluti

    RispondiElimina
    Risposte
    1. Ciao Luciano(?),
      ti abbiamo risposto su WebSite X5 Help Center:
      https://helpcenter.websitex5.com/it/post/195420

      Leggi anche il post successivo, c'è una piccola correzione.

      Elimina
  12. Buongiorno, ottimo script... grazie!
    Segnalo solo un piccolo problema (ma è solo un dettaglio): se nel testo dell'articolo vi sono degli "a capo", nel testo riportato nello slide questi evidentemente vengono eliminati, ma tra le parole non vengono "creati" degli spazi e queste risultano unite. Si risolve ricordandosi di inserre uno spazio alla fine della riga prima dell'a capo, ma sarebbe bene, se si potesse, che gli a capo si trasformassero automaticamente in spazi nel testo riportato.

    RispondiElimina
    Risposte
    1. Ciao,
      se abbiamo capito bene, puoi provare ad usare il metodo .html() invece che .text() nella variabile desc dello script.
      In questo modo però potresti avere altri problemi in presenza di tag HTML non desiderati.

      Nel topic del forum unofficial dedicato a WSX5, linkato all'inizio di questo articolo, puoi trovare informazioni utili riguardanti lo script.

      Elimina
  13. Salve ragazzi.
    Sul sito che ho costruito con Website X5 Ver. 17 https://photoel.com/it/index.php ho inserito il vostro script MAeSI per visualizzare col plugin OwlCarousel2 gli ultimi 6 articoli del blog sulla homepage. Tutto funzionava perfettamente fino a quando non ho fatto l'aggiornamento di website (17.00.11). Dopo l'aggiornamento non si vede più l'oggetto html (solo il titolo (" IL BLOG DI PHOTO ELECTRONICS").
    Ho provato a rifare l'oggetto html e verificato gli scripts ma niente è cambiato. Gli scripts sono copiati ed incollati da quelli del vostro sito, con la sola differenza: var nNews = 6; //numero degli articoli del blog visibili - blog/x5feed.php, per visualizzare gli ultimi 6 articoli, invece che 3.
    Avete una idea di cosa può essere successo ? Se volete posso inviarvi gli script per una verifica (che ho già fatto!).
    Grazie per la vostra disponibilità.

    RispondiElimina
    Risposte
    1. Ciao,
      abbiamo provato lo script con la versione 17.0.11, ma non sembra ci siano problemi.
      Prova a creare un nuovo progetto per verificare tu stesso.
      Nel sito che hai linkato non c'è traccia dello script, forse lo hai rimosso?

      Elimina
  14. Ciao a tutti.
    Sì lo ho rimosso perchè non funzionava più ed al suo posto ho messo un oggetto RSS Feed, che è limitante perchè ha le immagini degli articoli del blog molto piccole e senza la possibilità di dimensionarle. Ho provato ad inserire il carousel su una pagina di prova e funziona (vedi https://photoel.com/it/pagina-13.html). Se io rimetto il carousel sulla homepage, non c'è verso che funzioni.Anche sull'anteprima si vede solo il titolo dato all'oggetto Carousel. Non si vede più l'avviso "Errore nel caricamento degli articoli del blog. Questa funzionalità è attiva solo dopo la pubblicazione del sito su Internet." Gli script sono corretti (altrimenti non funzionerebbe nemmeno nella pagina di prova). Non riesco a capire qual'è il problema.
    Se avete qualche idea...
    Saluti

    RispondiElimina
    Risposte
    1. Per cominciare, correggi gli errori che hai commesso nell'Oggetto Codice HTML dove hai integrato WOWSlider:
      - hai inserito tutta una pagina con i relativi tag doppi;
      - la libreria jQuery non devi aggiungerla, ci pensa già WSX5;
      - il tag link va in head, come scritto anche nel commento

      In sintesi: i codici da inserire sono solo quelli all'interno dei commenti (escluso la riga della libreria jQuery).

      Elimina
  15. Ho modificato lo script dell'oggetto html come mi hai suggerito.
    Incredibile ma ora il carousel funziona!!!
    Io avevo solo fatto un copia/incolla dell'oggetto .html di wowslider, pensando che fosse il sistema corretto di inserire lo slider. Probabilmente questo andava a influire anche sul secondo oggetto html.

    Mille grazie del suggerimento.

    RispondiElimina

Nota. Solo i membri di questo blog possono postare un commento.