WordPress: creare uno sliseshow con gli articoli in rilievo stile magazine
Pubblicato da Davide, Aggiornato giovedì 17 dicembre 2009 23 Commenti »
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. ;)
Varie info
Articolo pubblicato domenica 6 settembre 2009 alle 00:19
Segnala questo articolo.. e sentiti utile!
23 Commenti »
Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.
Lascia il tuo commento
1
Nino - Pubblicato il 06 09 2009 alle 16:34
Davvero interessante !
Il tema si potrà scaricare gratuitamente ?
2
Mamma Imperfetta - Pubblicato il 07 09 2009 alle 13:58
Niente, io sarò anche su Repubblica ma TU sei un genio ahahahhaha!
Lo vogliooooooooooooo!!!
3
links for 2009-09-07 » 4exp.net - Pubblicato il 07 09 2009 alle 18:05
[...] WordPress: creare uno sliseshow con gli articoli in rilievo stile magazine – diploD (tags: wordpress css galleria-immagini) [...]
4
davide - Pubblicato il 07 09 2009 alle 19:22
si nino, sarà scaricabile gratuitamente! ;-)
silvia, essere su repubblica è cmq impagabile!
5
davide - Pubblicato il 09 09 2009 alle 17:13
Ciao
Wow … volevo un info da newbie ….
dove posso trovare
mootools.js
slideshow.js
non miè molto chiaro …
Compliemnti per il sito ….
6
Paolo - Pubblicato il 10 09 2009 alle 08:11
Come al solito preciso e raffinato! Grande.
7
Ieda - Pubblicato il 10 09 2009 alle 12:44
Ciao
ma su Explorer non funziona..o sbaglio qualcosa io?
Ieda
8
Davide - Pubblicato il 11 09 2009 alle 17:22
@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
I migliori post della settimana #37 | EmaWebDesign :: Web Programming / Web Design / SEO - Pubblicato il 13 09 2009 alle 10:24
[...] 01) WordPress: creare uno sliseshow con gli articoli in rilievo stile magazine [...]
10
dipo - Pubblicato il 14 09 2009 alle 21:57
ciao davide seguo da tanto il tuo blog,volevo sapere fra quanto tempo sarà possibile scaricare questo ultimo template che hai fatto.Grazie
11
Davide - Pubblicato il 14 09 2009 alle 23:16
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
ZicZac.it, clicca qui e vota questo articolo! - Pubblicato il 17 09 2009 alle 12:52
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
camu - Pubblicato il 17 09 2009 alle 16:30
Moooolto carino :) Io ho usato già slideshow2 per alcuni miei progetti, lo trovo un ottimo prodotto!
14
maria - Pubblicato il 19 09 2009 alle 10:20
si! decisamente molto carino, bravo davide!
15
andrea - Pubblicato il 21 10 2009 alle 22:27
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
Davide - Pubblicato il 21 10 2009 alle 23:14
Beh.. ovviamente ti consiglierei di partire dagli esempi dello script slideshow2, sono molto semplici ed esaustivi.. ;)
17
quakko - Pubblicato il 15 12 2009 alle 15:51
In IE7 non funziona neanche il tuo esempio!
A cosa può essere dovuto??
Mi dice…previsto Identificatore, Stringa o numero
help!
18
Davide - Pubblicato il 16 12 2009 alle 01:13
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
quakko - Pubblicato il 16 12 2009 alle 08:50
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
Davide - Pubblicato il 16 12 2009 alle 23:55
Corretto l’errore, in effetti è cosa buona e giusta sempre testare con tutto..
Grazie mille per la dritta! ;)
21
ale - Pubblicato il 22 01 2010 alle 19:25
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
Davide - Pubblicato il 31 01 2010 alle 18:02
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
Flexslider applicato coi Rio: uno slider jquery davvero flessibile. - diploD - Pubblicato il 01 10 2012 alle 15:07
[...] 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: [...]