[v. 10 - Pro] Articoli del blog in home page

[stesil]

Esistono molte alternative per inserire in una pagina l'elenco degli ultimi articoli del blog, alcune veramente macchinose, che richiedono l'aggiornamento manuale dei contenuti.

Rispolverando l'esempio fatto un paio di anni fa per la v.9, io e lemon abbiamo provato ad utilizzare il file xml del blog, che viene generato automaticamente dal programma, per rendere completamente automatico l'inserimento degli ultimi articoli del blog in un'altra pagina.

Qui l'esempio: http://stesil.altervista.org/evo10/news-home-page/index.html

La procedura da utilizzare è piuttosto semplice:

Nella pagina in cui si vogliono visualizzare le news inserire un oggetto HTML con questo contenuto:

Codice:

Only registered users can see contents. Please click here to Register or Login.
Nella scheda esperto copiare il seguente codice CSS, che può essere completamente personalizzato:

Codice:

Only registered users can see contents. Please click here to Register or Login.
In proprietà pagina, sezione esperto, prima della chiusura del tag head:

<script>
var nNews = 5 ;// numero delle notizie visibili
</script>
<script src="files/newsblog.js"></script>

Il valore in rosso è da personalizzare e indica, come dice il commento, il numero delle news che si vogliono visualizzare.

Il file newsblog.js è scaricabile qui http://stesil.altervista.org/evo10/news-home-page/files/newsblog.js e si deve allegare al progetto sempre attraverso lo stesso oggetto HTML, indicando come destinazione la cartella files.

Ovviamente questo è solo uno dei sistemi possibili, utilizzando js/jQuery, ma si può ottenere la stessa cosa anche utilizzando il file .php che genera il programma: nelle sezioni evo10/9 del forum si possono trovare i relativi topic.

[stesil]

Articoli del blog in home page - variante con miniature

Questa variante visualizza, accanto alla sintesi dell'articolo del blog, la prima immagine (se esiste) presente nell'articolo stesso. Qui l'esempio: http://stesil.altervista.org/evo10/news-home-page/pagina-2.html

Il codice da inserire nell'oggetto HTML è lo stesso del post precedente:

Codice:

Only registered users can see contents. Please click here to Register or Login.

In head della pagina inserire questo script:

Codice:

Only registered users can see contents. Please click here to Register or Login.

Il file newsblogThumbs.js è scaricabile qui: http://stesil.altervista.org/evo10/news-home-page/files/newsblogThumbs.js ed è da allegare al progetto, attraverso l'oggetto HTML, nella cartella files.

Questo il codice CSS modificato, sempre completamente personalizzabile:

Codice:

Only registered users can see contents. Please click here to Register or Login.


Testato con la versione 10.1.10.54

[Fabio B.]

Stesil, visto che hai aggiunto anche le miniature, potresti fare in modo che conservino anche i rispettivi links?
http://test.sitocentrale.org/index.php
Le immagini di questo test devono puntare a questa pagina che ne illustra il metodo di realizzazione.

[stesil]

Sì, si può fare anche questo.

Memorizzi in una nuova variabile l'attributo href del tag <a> genitore della prima immagine.

Quindi con un if/else o con l'operatore ternario verifichi l'esistenza della nuova variabile e, se la condizione è vera, attribuisci alla variabile tagImg il nuovo markup per l'immagine con link, se la condizione è falsa mantieni il valore precedente, cioè il markup per l'immagine o nulla se l'immagine non è presente.

O almeno questo è quello che farei io. Come sempre ci sono tante strade per arrivare al medesimo risultato.

[Fabio B.]

Sì, si può fare anche questo.

Memorizzi in una nuova variabile l'attributo href del tag <a> genitore della prima immagine.

Quindi con un if/else o con l'operatore ternario verifichi l'esistenza della nuova variabile e, se la condizione è vera, attribuisci alla variabile tagImg il nuovo markup per l'immagine con link, se la condizione è falsa mantieni il valore precedente, cioè il markup per l'immagine o nulla se l'immagine non è presente.

O almeno questo è quello che farei io. Come sempre ci sono tante strade per arrivare al medesimo risultato.

Grazie Stesil; ce lo tradurresti in codice? Così affiancandogli la spiegazione sopra impariamo a leggerlo.

[stesil]

Certo, era pronto da ieri sera  : http://stesil.altervista.org/evo10/news-home-page/pagina-3.html

var linkImg = articolo.find('img').eq(0).parent('a').attr('href'); //memorizza in una nuova variabile l'attributo href del tag <a> genitore della prima immagine

var tagImg = linkImg ? "<a href='"+linkImg+"' target='_blank'><img src='"+immagine+"' class='imgBlog' /></a>" : tagImg;
//operatore ternario che verifica l'esistenza della nuova variabile e, se la condizione è vera, attribuisce alla variabile tagImg il nuovo markup per l'immagine con link, se la condizione è falsa mantiene il valore precedente

Secondo me aggiungere link esterni al sito in questa sezione che rimanda al blog risulta dispersivo.

ps: correggi nel tuo esempio il link al forum perché rimanda all'apertura di un nuovo post

[Fabio B.]

Grazie Stesil; ho corretto i links nel mio sito ed il file newsblogThumbs.js secondo le tue indicazioni; tutto perfetto.
Allego il file corretto.
Purtroppo non mi é ancora lampante la sintassi per costruire una modifica del genere; dovrò comprarmi un libro di javascript.

[lemonsong]

Allego il file corretto.

Corretto?
Sicuro?
Poi, perché farlo, se il file CORRETTO si può scaricare dal sito di stesil?
http://stesil.altervista.org/evo10/news-home-page/files/newsblogThumbsLink.js

Prova ad inserire un articolo nel tuo blog (col tuo script ovviamente) con un'immagine senza link o un articolo senza immagine e vedrai cosa succede.

Confronta il tuo script con quello di stesil e capirai cosa manca.

[Fabio B.]

  avevo capito che la riga del var tagImg andasse sostituita, non raddoppiata; colpa mia.
Quanto al suo link  per il download del file, io avevo scaricato da lì la versione precedente del file; non sapevo che Stesil avesse ripubblicato anche il file inclusivo della correzione che ci ha suggerito per esteso.
Grazie per aver già provveduto a cancellare il link sbagliato dal mio comment

[lemonsong]

Quanto al suo link  per il download del file, io avevo scaricato da lì la versione precedente del file; non sapevo che Stesil avesse ripubblicato anche il file inclusivo della correzione che ci ha suggerito per esteso.

Beh, se ha pubblicato l'esempio in Rete, mi sembra ovvio che ci sia pure lo script relativo 

Certo, era pronto da ieri sera  : http://stesil.altervista.org/evo10/news-home-page/pagina-3.html

Grazie per aver già provveduto a cancellare il link sbagliato dal mio comment

Questa non l'ho capita ma ad una certa età mi dicono che è normale 

[Fabio B.]

Grazie Stesil; ho corretto i links nel mio sito ed il file newsblogThumbs.js secondo le tue indicazioni; tutto perfetto.
Allego il file corretto.
Purtroppo non mi é ancora lampante la sintassi per costruire una modifica del genere; dovrò comprarmi un libro di javascript.

pardon...nuova svista mia, il link per il download dell'allegato contenente il mio file scorretto é ancora lì; mods, per favore, potete tagliarlo via insieme alla mia replica? E' fuorviante e dispersivo per i lettori; grazie

[Fabio B.]

Stesil, sarebbe possibile avere lo script per una nuova variante?: icona con link + titolo articolo con link + visualizzazione orizzontale + scorrimento da destra a sinistra
es.: http://www.duepiu.net/

[stesil]

Stesil, sarebbe possibile avere lo script per una nuova variante?

Un'altra? Noooooooooooo... basta!! 

Una nuova variante è possibile, anzi sono possibili infinite nuove varianti. Sul tavolo ci sono tutti gli ingredienti. Si tratta solo di combinarli in modo da ottenere un altro tipo di visualizzazione.

Appena trovo un po' di tempo commento tutto il codice... così ciascuno può provare ...nuove ricette 

[Fabio B.]

  grazie splendida!!! Aspettiamo...

[axel88]

Ciao Stesil, ho dato uno sguardo alla tua pagina, davvero molto utile!
Sono interessato a creare le news scorrevoli prese dal blog, potresti spiegare anche come fare (magari se è possibile allegando anche il codice) per creare la versione scroll come sulla tua pagina? Grazie mille!