Un carrousel d’images au lieu de simples liens sur votre blog WordPress

[ 10 ] Commentaires
Share

Sur plusieurs blogs, j’ai pu trouver ce que j’appellerai un « carrousel d’images« , permettant d’afficher l’image d’un billet, cliquable, avec sur celui-ci une partie grisée sur laquelle est écrit le titre de ce billet. C’est une façon visuelle de faire un lien vers un billet, et je crois que cela permet aux visiteurs d’un site de mieux appréhender le contenu qu’ils vont trouver derrière un lien. Au final, l’image associée à un lien est un élément supplémentaire de transparence quant à votre contenu, et donc d’honnêteté envers le visiteur, ce qui ne peut pas être mauvais pour votre site.

Comment réaliser ce carrousel, alors ?

Je vais vous donner la façon dont j’ai mis en place le mien, sans vous cacher que je me suis grandement inspiré (le mot est faible) de ce que j’ai trouvé ailleurs. Alors voilà.

Le carrousel se situant dans la sidebar, c’est là que l’on va mettre le code (attention aux guillemets, ils passent mal, donc repassez derrière le code afin de vérifier ceux-ci).

    <h2><b>Derniers</b> billets </h2>
    <ul>
    <?php query_posts('showposts=10'); ?>
    <?php while (have_posts()) : the_post(); ?>

    <?php $values = get_post_custom_values("Image"); // this grabs the image filename
    if (isset($values[0])) /* this checks to see if an image file exists */ { ?>

    <li>
    <a href="<?php the_permalink() ?>"><img src="<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" width="100%" title="<?php the_title(); ?>" /></a>
    <h3><a href="<?php the_permalink() ?>"><span><?php the_title(); ?></span></a></h3>

    </li>

    <?php } ?>

    <?php endwhile; ?>
    </ul>

Comme vous pouvez le voir, le carrousel n’affiche les liens que si le billet auquel ils sont associé comporte un attribut « Image » (via le is_isset(), qui teste si il y a une image. J’aurais pu mettre un truc qui prend une image par défaut si il n’y en a pas, mais je n’aime pas beaucoup mettre des images par défaut, c’est pas très joli). Cet attribut vient des champs personnalisés, comme vous pouvez le voir ci-dessous, par exemple :

Donc, pour résumer ce que va faire le code :

POUR les 10 derniers billets,

SI le billet comporte un attribut Image (le numéro 0),

Alors on affiche l’image, puis la partie grisée, et enfin le titre.

FIN SI

FIN POUR

Voilà.

Le CSS associé à ce code est très important également, voilà les lignes utilisées pour ce blog :

    li.sidebarPost{overflow: hidden; position: relative; margin-bottom: 10px;}

    img.sidebarThumb { width: 100%; }

    h3.sidebarTitle{position: absolute; display: block; width: 100%; background: url(images/overlay.png) 0 0 repeat; bottom: 2px;}

    h3.sidebarTitle span{display: block; padding: 5px; color: #fff;}

En gros, que fait ce CSS ?

Pour les images, c’est géré par la classe sidebarThumb, pour l’ombre, c’est géré par le sidebarTitle (l’ombre étant faite par le overlay.png), et pour le titre par dessus, c’est le span qui fait tout. Vous pouvez télécharger le overlay.png ici.

Voilà voilà : vous avez le code à mettre dans votre sidebar.php, vous avez celui à mettre dans votre style.css. Il ne vous manque rien.

Pour ma part, j’ai décidé de n’afficher que ce carrousel sur les billets (et non sur les pages d’archives ni de Home), ce qui fait que j’ai mis tout ça dans une condition telle que ci-dessous :

    <?php if( !(is_home() || is_archive()) ) { ?>

    <!– La vous mettez le code PHP que je vous ai donné ci-dessus –>

    <?php } ?>

Je me permets de vous rappeler que la doc des fonctions WP est là : is_home et is_archive.

Notez que vous auriez également pu mettre :

    <?php if( is_single() ) { ?>

    <!– La vous mettez le code PHP que je vous ai donné ci-dessus –>

    <?php } ?>

Si vous avez des questions, mettez-les en commentaire, je m’efforcerai de tenter d’y répondre.

Vous serez peut-être intéressé :

10 commentaires sur ce billet

  1. Philippe dit :

    L'idée me plaît bien. Jusqu'à présent je connaissais http://www.fairweb.fr/plugins-wordpress/fw-post

    RépondreRépondre
  2. Louis dit :

    Humm, je pense que le plugin fait à peu près la même chose, mais plus proprement (en facilitant le travail de celui qui l'utilise).

    RépondreRépondre
  3. fairweb dit :

    Bonjour Louis, très simpa comme idée. Je suis l'auteur du plugin que Philippe t'a indiqué. En fait, toi tu récupères la première image qui appartient au billet, ce que je faisais avant la sortie de WP 2.9 qui propose maintenant d'indiquer une miniature pour chaque article. Ce que fait mon plugin, c'est soit récupérer cette fameuse miniature, à défaut la première image du billet, à défaut la première image rencontrée dans le contenu. L'idée était une rétrocompatibilité. Mais mon plugin ne fait que filtrer une fonction native de WP 2.9 que tu pourrais très bien utiliser dans ton script (the_post_thumbnail) que tu pourrais utiliser dans ton script, avec ou sans mon plugin, à partir de WP 2.9.

    Merci en tout cas de partager cette astuce sympa.

    RépondreRépondre
  4. Louis dit :

    Alors non, je ne récupère pas la première image qui appartient au billet : je récupère le premier champ « Image » des champs personnalisés. Donc mon truc ne fonctionne qu'à condition que tu aies mis une URL dans ce champ.

    Je pourrais utiliser the_post_thumbnail aussi, effectivement, mais l'avantage de ma méthode, c'est que je suis vraiment maitre de ce que je mets comme image de thumbnail, or quelque fois cette image n'est pas affichée dasn le billet (par exemple, si l'image dans le billet est trop longue, je ne pourrais pas la mettre en thumbnail proprement, donc je préfère mettre une autre image, même si celle-ci n'apparait pas).

    En tout cas ton plugin est sympa, bravo pour le boulot 🙂

    RépondreRépondre
  5. fairweb dit :

    Ah ok j'étais mal réveillée j'avais pas bien étudié ton code. En fait, the_post_thumbnail, nouvelle fonction de WP2.9, sans parler de mon plugin, ne nécessite pas d'afficher l'image sur ton post. Il faut qu'elle fasse simplement partie des média uploadés via WP. Donc ça pourrait t'être utile et alléger ton code.

    RépondreRépondre
  6. Babali dit :

    Cela fonctionne mais il y a un bug sous IE6. Les titres qui doivent se positionner sur les images ne le sont pas.
    Ils sont positionné en dehors.

    RépondreRépondre
  7. Bonjour c’est l’un des script quej e cherchais, comment faire pour que ça s’affiche à l’horzontale.
    j’aimerais le mettre dans ma page « single.php ».

    Voici l’un des plus beau que j’ai pu voir ces jours ci http://www.mikii.fr/blog/

    RépondreRépondre
  8. Louis dit :

    @Joris de meetatalent: Pour le mettre à l’horizontale (les uns après les autres), je pense qu’il faut rajouter quelque part un float:left; pour chaque élément < li > (mais je n’ai pas testé, c’est juste une idée).

    Pour le reste, le site que vous m’indiquez, ce n’est pas très difficile de faire la même chose, il « suffit » d’analyser leur code source (comme je l’ai fait pour le code ci-dessus) et de prendre les mêmes éléments pour refaire ça chez vous.

    RépondreRépondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *