WordPress: creare uno sliseshow con gli articoli in rilievo stile magazine

Pubblicato da Davide, Aggiornato giovedì 17 dicembre 2009 23 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)

Anteprima Slideshow WordPress

Quante volte abbiamo visto siti di magazine dotati di spettacolari slideshow a centro pagina che presentano gli ultimi articoli con immagini a ripetizione? Basta guardare il sito di wired o dell’Economist.. Molti temi wordpress per magazine presentano soluzioni di questo tipo, spesso però pescano le immagini da presentare tra i custom fields di wordpress.

La soluzione che propongo in questo articolo pubblica invece la prima foto allegata al post e la fa girare a rotazione assieme al titolo e all’excerpt (il riassunto). Il risultato finale è visibile in questa demo.

Per fare il tutto ho scelto un javascript gratuito: Slideshow2! Grazie a questa splendida classe per Mootools è possibile creare in pochi istanti effetti davvero accattivanti.
Ci sono diversi plugin per wordpress in giro che utilizzano i più noti script per generare slideshow e gallerie, ma tutti quelli che ho visto servono per creare una gallery a partire da un singolo post. Il mio obbiettivo era diverso: creare uno slideshow con la prima immagine degli ultimi articoli pubblicati. Vediamo come fare..

Prima di tutto il codice.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/slideshow.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slideshow.js"></script>

Questa prima parte va aggiunta nell’elemento <head>, nel file header.php del template wordpress. Non fa altro che caricare un file CSS, la libreria mootools e lo script slideshow. Sempre all’interno dell’elemento <head> va inserito il codice sottostante. Si può posizionare questa porzione di codice anche appena prima del div in cui si desidera far apparire lo slideshow, tipicamente nel file index.php del template wordpress.

<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
<?php $temp_query3 = $wp_query; ?>
<?php query_posts('showposts=5&cat=4'); ?>
<?php if (have_posts()) : ?>
<?php $conta=0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php
// Rileva ID del post
$iPostID = $post->ID;
// Rileva immagini per questo post
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
// Se esistono immagini allegate al post
if($arrImages) {
// Rileva array con le chiavi che rappresentano le immagini allegate
$arrKeys = array_keys($arrImages);
// Rileva la prima immagine allegata
$iNum = $arrKeys[0];
// Rileva url thumbnail
// $sThumbUrl = wp_get_attachment_thumb_url($iNum);
// Rileva url full-size
$sUrl = wp_get_attachment_image_src($iNum,'full');
// Rileva excerpt - riassunto del post
$descrizione = get_the_excerpt();
// Rimpiazza caratteri particolari
$descrizione = str_replace("'", "\'", $descrizione);
$descrizione = str_replace("\n", " ", $descrizione);
?>
<?php if ($conta>0) { ?>, <?php } ?><?php } ?><?php $conta++; ?>
'<?php echo($sUrl[0]) ?>': { caption: '<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link a <?php the_title(); ?>"><?php the_title(); ?></a><br/><?php echo($descrizione) ?></p>' }

<?php } ?>
<?php endwhile; ?>
<?php endif; ?>
<?php //Reset Query
wp_reset_query(); ?>
};
var myShow = new Slideshow('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 780});
});
//]]>
</script>

Questa seconda parte serve per far apparire lo slideshow nel div con ID=”show”. All’inizio vengono indicati il numero di post e la categoria relativa che si desidera far apparire, nella funzione query_posts(). Il codice è ben commentato e non fa altro che rilevare la prima immagine di ogni post per pubblicarla assieme al titolo e al riassunto del post.
La parte HTML necessaria all’interno del <body> è questa:

<div id="show">
<img src="<?php bloginfo('template_url'); ?>/images/default.jpg" alt="welcome" />
</div>

Dove come default.jpg verrà caricata una immagine standard, utile nel caso non ci siano articoli da visualizzare oppure l’utente abbia disabilitato javascript.
Per aggiungere l’effetto di zoom in movimento è possibile utilizzare l’estensione kenburns dello script Slideshow. Caricando nell’ <head> un altro javascrip:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slideshow.kenburns.js"></script>

e modificando le ultime righe dello script sopra in questo modo:

var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});

Le proprietà di zoom e pan sono da regolare per ottenere effetti diversi.

Il risultato HTML è il seguente:

<script type="text/javascript" src="http://lab.diplod.it/demo/wp-content/themes/diplo-magazine/js/slideshow.kenburns.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
//avvio slideshow
var data = {
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691087551_74e61f4da0_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/campo-di-grano/" rel="bookmark" title="Permanent Link a Campo di Grano">Campo di Grano<\/a><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691896442_cafb3a1487_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/le-braccia-del-costruttore/" rel="bookmark" title="Permanent Link a Le braccia del Costruttore">Le braccia del Costruttore<\/a><br/>Le braccia del costruttore ha un riassunto molto breve..<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3166795508_d5cd33c968_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/secondo-articolo-in-rilievo/" rel="bookmark" title="Permanent Link a Secondo Articolo in Rilievo">Secondo Articolo in Rilievo<\/a><br/>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691094985_4327680ea2_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/primo-articolo-in-rilievo/" rel="bookmark" title="Permanent Link a Primo articolo in Rilievo">Primo articolo in Rilievo<\/a><br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat [...]<\/p>' },
};
var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});
});
//]]>
</script>

Per quanto riguarda il CSS, quello proposto assieme allo script è sicuramente un buon punto di partenza, da sistemare se si vogliono cambiare le dimensioni del div che presenta lo slideshow.

Buon design a tutti..

PS: Nel caso in cui qualcuno si stesse domandando da dove provenga il design della demo sopra.. beh: seguite questo blog, prossimamente arriverà un tema wordpress in stile magazine, completamente personalizzabile dal pannello di amministrazione e soprattutto italianissimo. ;)

23 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

  1. 1

    gravatar

    Davvero interessante !
    Il tema si potrà scaricare gratuitamente ?

  2. 2

    gravatar

    Niente, io sarò anche su Repubblica ma TU sei un genio ahahahhaha!
    Lo vogliooooooooooooo!!!

  3. 3

    gravatar

    [...] WordPress: creare uno sliseshow con gli articoli in rilievo stile magazine – diploD (tags: wordpress css galleria-immagini) [...]

  4. 4

    gravatar

    si nino, sarà scaricabile gratuitamente! ;-)
    silvia, essere su repubblica è cmq impagabile!

  5. 5

    gravatar

    Ciao
    Wow … volevo un info da newbie ….
    dove posso trovare

    mootools.js
    slideshow.js

    non miè molto chiaro …

    Compliemnti per il sito ….

  6. 6

    gravatar

    Come al solito preciso e raffinato! Grande.

  7. 7

    gravatar

    Ciao

    ma su Explorer non funziona..o sbaglio qualcosa io?

    Ieda

  8. 8

    gravatar

    @davide: vai su google e scrivi mootools.. http://mootools.net/
    mentre slideshow lo trovi seguendo il link nell’articolo: http://www.electricprism.com/aeron/slideshow/

    @paolo: thanks! ;)

    @ieda: no funziona anche con explorer.. che versione hai?

  9. 9

    gravatar

    [...] 01) WordPress: creare uno sliseshow con gli articoli in rilievo stile magazine [...]

  10. 10

    gravatar

    ciao davide seguo da tanto il tuo blog,volevo sapere fra quanto tempo sarà possibile scaricare questo ultimo template che hai fatto.Grazie

  11. 11

    gravatar

    Il tempo di fare i test necessari.. essendo una roba che faccio nei ritagli non so darti una data precisa, diciamo entro un mese..

  12. 12

    gravatar

    Questo articolo è stato segnalato su ZicZac.it….

    Quante volte abbiamo visto siti di magazine dotati di spettacolari slideshow a centro pagina che presentano gli ultimi articoli con immagini a ripetizione? Basta guardare il sito di wired o dell’Economist.. La soluzione che propongo in questo articolo …

  13. 13

    gravatar

    Moooolto carino :) Io ho usato già slideshow2 per alcuni miei progetti, lo trovo un ottimo prodotto!

  14. 14

    gravatar

    si! decisamente molto carino, bravo davide!

  15. 15

    gravatar

    ciao,
    complimenti per l’articolo… mi hai affascinato! :)
    Anche se la mia richeista è un pò OT, ma se volessi fare la stessa cosa su un sito web genrerico, quali risorse mi consiglieresti?

    Grazie in anticipo e in ogni caso, e grazie per i tuoi post!
    Andrea :)

  16. 16

    gravatar

    Beh.. ovviamente ti consiglierei di partire dagli esempi dello script slideshow2, sono molto semplici ed esaustivi.. ;)

  17. 17

    gravatar

    In IE7 non funziona neanche il tuo esempio!
    A cosa può essere dovuto??
    Mi dice…previsto Identificatore, Stringa o numero

    help!

  18. 18

    gravatar

    Beh.. evidentemente c’è un errorino javascript.
    Devo essere sincero: su IE7 non l’ho testato. Forse per ripicca, tutte le versioni vecchie dei browser microsoft mi stanno antipatiche.. Quando aggiorni alla 8? :)

    PS: grazie per la segnalazione, verificherò.

  19. 19

    gravatar

    Tranquillo ho già aggiornato alla 8, il fatto è che altri non l’hanno fatto quindi testo i lavori su tutti i browser!
    Comunque l’errore era solo dovuto al fatto che c’è la virgola alla fine dell’ultima foto+caption e solo a ie7 non sta bene!

    tolta quella funziona alla perfettamente!

    Ciao

  20. 20

    gravatar

    Corretto l’errore, in effetti è cosa buona e giusta sempre testare con tutto..
    Grazie mille per la dritta! ;)

  21. 21

    gravatar

    Ciao. Ho provato la tua soluzione e funziona alla grande. Ho però una domanda da farti: il gestore del sito ogni volta mi carica foto di 2-3 mb e allora il sito web diventa pesantissimo. Come faccio ad utilizzare l’url della miniatura più grande (max 500px di larghezza) che wordpress mi genera automaticamente?
    Grazie mille,

    ale

  22. 22

    gravatar

    Ciao,puoi estrarre le immagini di un articolo con la funzione wp_get_attachment_image_src

    Se guardi c’è pure nel codice che ho postato sopra.. Se invece di ‘full’ metti ‘large’, puoi estrarre l’immagine generata in automatico da wordpress.

    Qui c’è tutta la documentazione: http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
    Ciao!

  23. 23

    gravatar

    [...] slider e slideshow ce ne sono una infinità. Col tempo ne ho provati e utilizzati diversi, ma come flexslider ce ne sono pochi. Credo di aver finalmente trovato ciò che cercavo: [...]

Lascia il tuo commento

 

http://livregratis.fr/ - http://club-ebook.fr/

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi