Dans un article précédent, nous avions vu comment créer des vignettes automatiquement. Pour cela j’utilise un champ personnalisé image_article et l’idée était de s’en servir pour créer une galerie des articles vedettes (featured content).
Une fois trouvée la galerie ajax, et en particulier smoothgallery disponible sur ce site : http://smoothgallery.jondesign.net/showcase/manual-slideshow/, il faut l’intégrer dans notre template.

vedette1Pour que le chargement de la bibliothèque mootools + le css de la galerie ne se fasse que sur la page d’accueil, j’utilise le marqueur conditionnel WordPress is_home().

< ?php if (is_home () ) { ?>
<link rel="stylesheet" href="/wp-content/themes/le-libriste/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="/wp-content/themes/le-libriste/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="/wp-content/themes/le-libriste/scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="/wp-content/themes/le-libriste/scripts/jd.gallery.js" type="text/javascript"></script>
<script src="/wp-content/themes/le-libriste/scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<script type="text/javascript">
        function startGallery() {
                var myGallery = new gallery($('myGallery'), {
                                        timed: true,
                                        showArrows: false,
                                        showInfopane: true,
                                        showCarousel: true,
                                        embedLinks: true,
                                        delay: 6000
 
                });
        }
        window.addEvent('domready', startGallery);
</script>
< ?php }

Pour afficher les articles dans le cadre vedette, j’utilise à nouveau la fonction la boucle query_posts pour récupérer les articles de la catégorie « featured ».

    <div id="myGallery">
        < ?php query_posts('category_name=featured&showposts=4'); ?>
        < ?php if (have_posts()) : ?>
        < ?php while (have_posts()) : the_post(); ?>
        < ?php $image = get_post_meta($post->ID, "image_article", true);?>
 
        <div class="imageElement">
            <h3><a href="<?php the_permalink() ?>">< ?php the_title(); ?></a></h3>
            <p></p>
            <a href="<?php the_permalink() ?>" title="open image" class="open"></a>
            <img src="/wp-content/themes/le-libriste/scripts/timthumb.php?src=/wp-content/uploads/<?php echo $image; ?/>&h=260&w=560&zc=0"  class="full" />
            <img src="/wp-content/themes/le-libriste/scripts/timthumb.php?src=/wp-content/uploads/<?php echo $image; ?/>&h=75&w=100&zc=0"  class="thumbnail" />
        </div>
        < ?php endwhile; ?>
        < ?php endif; ?>
    </div>

Et comme vous pouvez le constater j’utilise à nouveau le script timthumb.php pour créer des vignettes pour le navigateur à base de vignettes.

Dans le prochain article, nous verrons comment créer son propre panneau d’administration du thème.