Come creare una galleria fotografica con Wordpress 2.5

Slide 1: Benvenuto Wordpress 2.5. Caro Flickr addio... ovvero come crearsi una galleria fotografica sfruttando le nuove funzionalità di Wordpress 2.5 Davide Salerno [ davide.salerno@gmail.com ] iWordCamp -10 Maggio 2008 - Milano 1

Slide 2: Instant Bio • Davide Salerno • 23 anni • Studio Ingegneria Informatica al Politecnico di Torino • Sviluppatore Web (PHP/MySQL) • Arbitro di calcio • Continua... (http://www.davidesalerno.net/info/) Davide Salerno [ davide.salerno@gmail.com ] 2 iWordCamp -10 Maggio 2008 - Milano

Slide 3: Vantaggi di una galleria fotografica con WP • Non affiderete le vostre foto a terzi • Avrete più contenuti sul vostro sito • I motori di ricerca vi porteranno più visitatori • Avrete più link al vostro sito • Non avrete rallentamenti dovuti a plugin pesanti (se Matt ha caricato più di 1200 foto vuol dire che è una soluzione affidabile anche per grandi quantità di immagini...) • Sfrutterete lo spazio illimitato del vostro hosting • Non dovrete pagare più nessun abbonamento Davide Salerno [ davide.salerno@gmail.com ] 3 iWordCamp -10 Maggio 2008 - Milano

Slide 4: Svantaggi di una galleria fotografica con WP • E’ meno “sociale” • Non avrete alcune funzioni “avanzate” (Picnic, Geotagging, Flickr Uploadr....) Davide Salerno [ davide.salerno@gmail.com ] 4 iWordCamp -10 Maggio 2008 - Milano

Slide 5: Cosa bisogna fare? Panoramica • Creamoci una categoria “Foto” • Nascondiamola dal loop dei post • Aggiustiamo il tema • Creamoci una pagina dove mostrare i nostri album/set • Cariachiamo le nostre foto Davide Salerno [ davide.salerno@gmail.com ] 5 iWordCamp -10 Maggio 2008 - Milano

Slide 6: Cosa bisogna fare? Creazione categoria E’ banale... Segnatevi però l’ID della nuova categoria perchè ci servirà più avanti Davide Salerno [ davide.salerno@gmail.com ] 6 iWordCamp -10 Maggio 2008 - Milano

Slide 7: Cosa bisogna fare? Nascondiamo la categoria Andate a modificare tutti i file del vostro tema che contengono un loop con i post andando ad escludere la categoria che avete appena creato. Solitamente il loop si trova nei file: • index.php • archive.php • search.php • the_loop.php Subito dopo il seguente frammento di codice: <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> ! ! Andate ad inserire: <?php if (in_category('ID') ) continue; ?> Ovviamente al posto di ID sostituite l’ID della vostra categoria. Davide Salerno [ davide.salerno@gmail.com ] 7 iWordCamp -10 Maggio 2008 - Milano

Slide 8: Cosa bisogna fare? Nascondiamo la categoria Se avete delle pagine di archivio o mostrate l’elenco delle categorie sulla barra laterale nascondete anche lì la vostra categoria “segreta” Solitamente i file da modificare sono: • archives.php • sidebar.php Trovate il seguente frammento di codice: <?php wp_list_cats(); ?> ! ! e modificatelo così: <?php wp_list_cats('exclude=ID'); ?> Ovviamente al posto di ID sostituite l’ID della vostra categoria. Davide Salerno [ davide.salerno@gmail.com ] 8 iWordCamp -10 Maggio 2008 - Milano

Slide 9: Cosa bisogna fare? Aggiustiamo il tema Creamoci un template per pagine all’interno del quale visualizzeremo l’elenco dei nostri album/set* <?php /* Template Name: Galleria fotografica */ ?> <?php get_header(); ?> <?php // Which page of the blog are we on? $paged = get_query_var(‘paged’); if($paged==’’){$paged=1;} query_posts(‘cat=ID&paged=’.$paged); //gets all posts ?> <?php $x=0; if (have_posts()) : ?> <?php $post = $posts[0]; // Hack. Setta la variabile $post in modo che la funzione the_date() venga eseguita correttamente. ?> <div class=”post” id=”post”> ! ! <h2 class=”storytitle” style=”margin:5px 0”><a href=”http://www.vostrodominio.com“ rel=”bookmark” title=”Permalink a Foto”>Foto</a></h2> ! ! ! ! <?php while (have_posts()) : the_post(); ?> ! ! <?php global $wpdb; ! ! ! ! $attachment_id = $wpdb->get_var(“SELECT ID FROM $wpdb->posts WHERE post_parent = ‘$post->ID’ AND post_status = ‘inherit’ AND post_type=’attachment’ ORDER BY post_date ASC LIMIT 1”); ?> ! ! ! ! <div class=”photo-content”> ! ! ! ! <div class=”photo-thumb” style=”width:30%;float:left;”><a href=”<?php the_permalink() ?>” title=”Guarda la galleria <?php the_title (); ?>” rel=”bookmark”><?php echo get_attachment_icon($attachment_id); ?></a></div> ! ! ! ! <div class=”photo-desc” style=”width:70%;float:right;”> ! ! ! ! <h3 class=”storytitle”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permalink a <?php the_title(); ?>”><?php the_title (); ?></a></h3> ! ! ! ! <div class=”meta”><span class=”tags”>Questo album contiene <?php $attachments = get_children(array(‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘orderby’ => ‘menu_order’)); if ( ! is_array($attachments) ){ echo “0”;}else{ $count = count($attachments); echo $count;}?> foto</span> <?php edit_post_link (‘(modifica)’,’’,’’); ?></div> ! ! ! ! </div></div> ! ! ! ! <?php endwhile; ?> ! ! ! ! </div><hr /> ! ! ! <div class=”navigation”> <?php next_posts_link(‘<span>&laquo;</span> Gallerie Precedenti’) ?> <?php previous_posts_link(‘Gallerie Successive <span>&raquo;</span>’) ?> ! ! ! </div> ! ! <?php endif; ?> <?php get_footer(); ?> *Prendete spunto dalla pagina page.php del vostro template facendo attenzione al codice evidenziato che va posizionato così com’è nel vostro template Davide Salerno [ davide.salerno@gmail.com ] 9 iWordCamp -10 Maggio 2008 - Milano

Slide 10: Cosa bisogna fare? Aggiustiamo il tema Creamoci un template per le pagine dei singoli album/post* <?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class=”post” id=”post-<?php the_ID(); ?>”> ! ! ! ! ! ! ! <h2 class=”storytitle”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permalink a <?php the_title(); ?>”><?php the_title (); ?></a></h2> ! ! ! ! <div class=”meta”><span class=”tags”>Questo album contiene <?php $attachments = get_children(array(‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘orderby’ => ‘menu_order’)); if ( ! is_array($attachments) ){ echo “0”;}else{ $count = count($attachments); echo $count;}?> foto</span> <?php edit_post_link(‘(modifica)’,’’,’’); ?></div> ! ! ! ! ! <div class=”storycontent”> ! ! ! ! ! <?php the_content(‘Continua a leggere &raquo;’); ?>! ! ! ! ! </div> ! ! ! ! ! ! ! ! <div class=”respond”> ! ! ! ! <p></p> ! ! ! ! ! </div> </div>! ! ! ! <div class=”navigation”><div class=”left”><?php previous_post_link(‘&laquo; %link’,’%title’,TRUE) ?></div><div class=”right”><?php next_post_link(‘%link &raquo;’,’%title’,TRUE) ?></div></div> ! <?php comments_template(); ?> ! <?php endwhile; else: ?> ! <h2 class=”center”>Non trovato</h2> ! ! ! <p align=”center”>Spiacente nessun articolo corrisponde alla tua ricerca</p> ! ! <?php endif; ?>! <?php get_footer(); ?> *Prendete spunto dalla pagina single.php del vostro template facendo attenzione al codice evidenziato che va posizionato così com’è nel vostro template Davide Salerno [ davide.salerno@gmail.com ] 10 iWordCamp -10 Maggio 2008 - Milano

Slide 11: Cosa bisogna fare? Aggiustiamo il tema Andiamo a modificare il template dei singoli post (single.php) In cima come prima riga inseriamo <?php if(!in_category(‘ID’)){?> Al posto di ID inserite l’ID della categoria che conterrà la galleria fotografica. Alla fine del file come ultima riga inseriamo <?php }else{load_template(TEMPLATEPATH . ‘/photos.php‘);}?> Al posto di photos.php inserite in questa riga il nome del template file creato alla slide 10 Davide Salerno [ davide.salerno@gmail.com ] 11 iWordCamp -10 Maggio 2008 - Milano

Slide 12: Cosa bisogna fare? Aggiustiamo il tema Creamoci un template per le pagine delle singole foto* <?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> ! ! <div class=”post” id=”post-<?php the_ID(); ?>”> ! ! ! ! ! ! ! <h2 class=”storytitle”><a href=”<?php echo get_permalink($post->post_parent); ?>“ rev=”attachment”><?php echo get_the_title($post->post_parent); ?></a> &raquo; <?php the_title(); ?></h2> ! ! ! ! ! <div class=”storycontent”> ! ! ! ! ! <div class=”attachment” ><a href=”<?php echo wp_get_attachment_url($post->ID); ?>“><?php echo wp_get_attachment_image( $post->ID, ‘medium’ ); ?></a></div> ! ! ! ! ! <div class=”caption”><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the “caption” ?></div> ! ! ! ! ! <?php the_content(‘Continua a leggere &raquo;’); ?>! ! ! ! ! </div> ! ! ! ! ! ! ! ! <div class=”respond”> ! ! ! ! <p></p> ! ! ! ! ! </div> ! <div>Vedi l’immagine alla <a href=”<?php echo wp_get_attachment_url($post->ID); ?>” tile=”Fullsize”>dimensione massima</a></div> </div>! ! ! ! <div class=”navigation” id=”navigation”><div class=”left”><div class=”photo-thumb”><?php previous_image_link() ?></div></div><div class=”right”><div class=”photo-thumb”><?php next_image_link() ?></div></div></div> ! <?php comments_template(); ?> ! <?php endwhile; else: ?> ! <h2 class=”center”>Non trovato</h2> ! ! ! <p align=”center”>Spiacente nessun articolo corrisponde alla tua ricerca</p> ! ! <?php endif; ?> <?php get_footer(); ?> *Prendete spunto dalla pagina single.php del vostro template facendo attenzione al codice evidenziato che va posizionato così com’è nel vostro template Davide Salerno [ davide.salerno@gmail.com ] 12 iWordCamp -10 Maggio 2008 - Milano

Slide 13: Cosa bisogna fare? Creiamo una nuova pagina Creiamo una nuova pagina dalla dashboard di Wordpress e assegnamogli come template pagina quello creato alla slide 9 Davide Salerno [ davide.salerno@gmail.com ] 13 iWordCamp -10 Maggio 2008 - Milano

Slide 14: Cosa bisogna fare? Creiamo un nuovo album Creiamo un nuovo album/set semplicemente creando un nuovo post. Carichiamo le nostre foto in tutta comodità con il nuovo sistema di upload di Wordpress 2.5 ed inseriamole nel nostro post Selezioniamo come categoria per il post quella che abbiamo appositamente creato all’inzio Davide Salerno [ davide.salerno@gmail.com ] 14 iWordCamp -10 Maggio 2008 - Milano

Slide 15: Ecco il risultato... ...allora cosa state aspettando? Davide Salerno [ davide.salerno@gmail.com ] 15 iWordCamp -10 Maggio 2008 - Milano

Slide 16: Contatti Davide Salerno davide.salerno@gmail.com davide.salerno2 http://www.davidesalerno.net Davide Salerno [ davide.salerno@gmail.com ] 16 iWordCamp -10 Maggio 2008 - Milano

Slide 17: Note Quest’opera è rilasciata con Licenza Creative Commons Attributions Share-Alike. Per leggere copia della licenza visitare il sito: http://creativecommons.org/licenses/by-nc-nd/2.5/it/ o spedisci una lettera a: Creative Commons 559 Nathan Abbott Way, Stanford California,94305, USA Davide Salerno [ davide.salerno@gmail.com ] 17 iWordCamp -10 Maggio 2008 - Milano