Francis Chouquet Graphiste Lettering

Ajoutez des vignettes à votre thème WordPress grâce à TimThumb

0

Avec la mode des thèmes magazines on a vu également l’arrivée des vignettes, ou miniatures sur les blogs. Ca permet d’avoir un aperçu visuel de l’article. Depuis, même les thèmes plus « blog » tendent à les utiliser. Au cours de différents projets, j’ai eu l’occasion d’essayer différentes techniques pour afficher ces miniatures, et à chaque fois, avec plus ou moins de succès… Entre celles qui utilisent les images insérées dans les articles et celles qui utilisent les champs personnalisés, difficile de trouver une solution idéale. Pourtant, il en est une que je réutilise, c’est TimThumb.

TimThumb est un script développé dans le cadre du projet de Darren Hoyt pour Mimbo Pro. Celui-ci fonctionne avec les champs personnalisés. Alors, bien sûr, vous allez me dire qu’il est assez simple d’utiliser les champs personnalisés pour afficher des vignettes. C’est vrai, mais ici, vous n’allez mettre qu’une image dans le champ personnalisé, et le script va redimensionner automatiquement cette image en fonction des paramètres que vous aurez défini et surtout en fonction des pages sur lesquelles afficher ces vignettes. 

Prenons un exemple. Imaginez que vous souhaitiez utiliser des vignettes sur votre pages d’accueil mais aussi sur vos pages de catégories, et que vous souhaitiez que ces vignettes soient de taille différentes… mmm ? Et bien TimThumb redimensionne tout ça en fonction des paramètres attitrés à chaque type de page. De quoi se simplifiez la vie…

Page d'accueil Mimbo Pro

Page d'accueil Mimbo Pro

Page catégorie Mimbo Pro

Page catégorie Mimbo Pro

Alors, comment ça s’installe ?

Tout d’abord, vous allez télécharger le script qui se trouve ici. Ensuite, vous l’uploadez sur votre serveur et vous le placez dans un dossier « scripts », au même niveau que les autres fichiers du thème.

1 
yourdomain.com/wp-content/themes/your-theme/scripts/timthumb.php

Toujours dans ce dossier « scripts », vous allez en créer un nouveau et l’appeler « cache ».

1 
yourdomain.com/wp-content/themes/your-theme/scripts/cache/

Ensuite, vous allez ajouter quelques lignes de code dans votre thème pour appeler le script et le faire fonctionner sur vos images. Vous allez placer ce code dans le loop, bien entendu, et au niveau où vous souhaitez faire apparaître les vignettes. Ici, vous avez trois possibilités:

1. N’affiche que la vignette, sans lien

1 2 3 4 5 6 7 
<?php // This will show only the image. Alter the width and height (in both places) to your needs. ?>   <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?> <div class="postthumb"> <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" /> </div> <?php } ?>

2. Affiche la vignette avec lien vers l’URL de l’article

1 2 3 4 5 6 7 
<?php // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?>   <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?> <div class="postthumb"> <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a> </div> <?php } ?>

3. Affiche la vignette avec lien vers URL à déterminer

1 2 3 4 5 6 7 8 
<?php // This will show the image and link it to anything you place into another custom field of "imglink".  // Alter the width and height (in both places) to your needs.  ?>   <?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?> <div class="postthumb"> <a href="<?php echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php } ?><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" /><?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?></a><?php } ?> </div> <?php } ?>

Une fois le code inséré au bon endroit dans le loop, vous allez pouvoir rédiger un article dans lequel vous allez paramétrer un champ personnalisé pour vos vignettes. Vous allez donc uploader une image et la stocker dans le dossier wp-content/uploads.

Ensuite, au niveau du champ personnalisé, vous allez saisir « thumb » comme « clé » du champ » et l’URL complète de l’image comme « valeur ». Si vous souhaitez envoyer le lien de la vignette vers une autre URL, donc si vous choisissez l’option 3, vous devrez saisir un autre champ personnalisé avec « imglink » comme « clé » et l’URL comme « valeur.

Champ Personnalisé à saisir pour TimThumb

Champ Personnalisé à saisir pour TimThumb

Vous enregistrez ensuite le tout, publiez votre article et si tout va bien, une vignette de cette image aura été créé et appraîtra au bon endroit sur votre page web. Ensuite, à vous de mettre en style tout ça !!

ce qui est bien avec TimThumb c’est bien entendu qu’il génère automatiquement les vignettes mais que vous pouvez facilement en déterminer les tailles et la qualité. Dans le code présenté ci-dessus, vous avez plusieurs paramètres:

  • w: largeur,
  • h: hauteur,
  • zc: rognage de la photo en zoomant dessus… ( 0 ou 1 )
  • q: qualité de la vignette ( 75 par défaut et maximum à 100 ).

Voilà, je crois que j’ai fait le tour de TimThumb, si vous avez des questions n’hésitez pas !! 😉

Source: Chad Coleman

50 Commentaires

  • Sympa ce petit plugin/script ! dommage qu’il faille saisir une URL pour l’image et pas un petit module d’upload à la volée… tu n’as pas ça dans tes cartons Francis ?

    perso j’utilise Post-Thumb qui me génère automatiquement une miniature de la première image qu’il trouve dans chaque post..

  • Holà.
    Pour info
    Sur les thèmes Woo, la plupart payants, il y a souvent la fonctionnalité d’ajout de vignettes justement, à partir d’une url.

  • Yop, pour ceux qui ne suivent pas mon flux Twitter ^^, http://flutter.freshout.us/. Juste le meilleur plugin WordPress jamais vu ! Je pense qu’il réglera aisément vos soucis, images, vidéos ou peut importe et sans codé !

  • Frédéric > Post Thumb est une véritable usine à gaz que j’ai vainement tenté de faire fonctionner… Quoi qu’il en soit, j’ai lu quelques trucs sur des vignettes qui reprendraient la première image d’un article, mais faut.il encore qu’il y en ait une… mais bon, dès que j’aurai trouvé, j’écrirai un petit truc dessus !! 😉

    Par contre, concernant PstThumb, tu peux reprendre la main pour utiliser l’image que tu veux ?

    Pierre > Effectivement, WooThemes utilise bcp cette fonctionnalité.

  • Simon Gireaudot

    Flutter mérite qu’on s’y attarde, il a l’air bien puissant et simple d’utilisation merci Lesly

  • Oui Flutter est vraiment pas mal, cependant il faut quand même mettre du code dans les templates !! ^^ Pour des projets persos, je l’utiliserais sûrement mais pas pour des clients. Trop de risques que le plugin ne soit pas maintenu et ne fonctionne pas sur des versions ultérieures de WP..

  • Merci bcp pour l’info. Jusqu’à présent j’utilisais les champs personnalisés, mais en effet quand il s’agissait de pages catégories avec des formats de vignette spécifiques, la solution était peu satisfaisante (sauf à « croper » les images à l’affichage, ce qui reste très limité).

    Bref un script à essayer dès que possible. Merci!

  • Alex

    Marrant que tu en parles, je l’ai découvert il y a quelques semaines et je l’avais mis en favori. Je m’étais dit que ça me servirait probablement un jour. Et c’est le cas pour deux blogs que je suis en train de refaire. Vraiment pratique !!!! J’adore. Simple et léger.

  • Merci pour ce billet qui va m’être fort utile, car je contai m’y mettre dans pas longtemps 🙂

  • Perso … pour les génération de vignettes, j’utilise YAPB … il permet aussi de choisir la taille des vignette suivant le contexte …
    et en plus il est un peu plus user-friendly en backoffice puisqu’il s’agit d’un champ image avec uploader … 

  • @Francis A mon avis vu le site de fou qu’ils ont mis en place et vu que c’est Matt qui me la fait découvrir je pense qu’il va perduré celui-ci voir apparaitre dans une 3.0 ^^.

    @Ber Mais c’est avec plaisir

    @Alext Faut que tu nous les montres les blogs en questions ^^

    @Rémy Je ne connaissais pas mais je vais tester de ce pas.

  • Rémy > YAPB gère différentes tailles de ton image en fonction d’où il doit l’afficher ?

  • oui … tu as tes pre-réglage dans les paramètre de l’extension en admin … pour les insérer (cas d’un article / de l’accueil / d’un archive / d’une page) et ça les insérer tout seul(pas besoin de toucher au theme) a la taille définie pour chaque cas …
    tu as aussi le choix de l’insérer manuellement dans les template du theme … toujours en paramétrant la taille tout comme ton plugin 😉

  • Simon Gireaudot

    J’ai un peu testé flutter seulement étant une quiche je saisi pas le principe du champ custom, des boutons etc pour faire simple j’aimerais pré-inserer le code youtube quelquepart et ne mettre que l’id de la vidéo, le plugin insère alors le code+id et ça affiche la vidéo ! comment je dois m’y prendre ? merci :'( :'(

  • Simon Gireaudot

    C »est que j’ai cherché un peu de doc pour flutter mais j’ai rien trouvé, le blog de Fran6 est mon dernier espoir !

  • Laurent D

    Bonjour. Sans l’avoir testé, je signale l’existence du plugin WP-imagefit qui n’a pas été cité ici.
    http://factoryjoe.com/projects/wp-imagefit/
    Peut-être une autre piste à explorer pour ceux qui s’interessent au sujet.

  • merci à tous pour vos commentaires je n’avais pas encore chercher pour ce type de plugin

  • Val

    Hello Francis
    Merci pour cette info…
    J’avais vu ça sur différents thèmes et je pensais justement utiliser ce système de vignettes d’ici peu… ça tombe à point 😉
    Je note aussi vos différents liens…
    Merci à tous 😉
    @ +++

  • Au passage et pour les interessés, il est facilement possible de combiner timthumb avec les propriétés de get the image de Justin Tadlock. Du coup on a toutes les options de zom du script Timthumb avec le scan des posts a la recherche d’images de get the image. Cela donne a mon avis la meilleure solution actuellement pour tirer le maximum des custom fields!

  • geo

    hello
    j’ai créer un template avec le loop qui lit les vignettes
    mais la présentation est toujours pareils que la présentation des articles … 5 par pages …
    je voudrais afficher un tableau de x colonnes et y lignes avec toutes les vignettes …
    comement faire ça ?
    merci …

  • sebastien

    Pour post-thumb, il est nécessaire de connaitre le basePath… problème, comment peut-on connaitre son basePath ?
    est-ce que quelqu’un saurait me dire ? Merci

  • Bonjour,

    Pourrais tu me dire stp, ou inserer le code dans le loop ? ou se trouve le loop ?
    afin d’ installer une vignette pour chaque billet ?

    Cordialement,

    Alex

  • Li-An

    Rhaaaa, hd-J, tu en as trop dit ! Mon Post Thumb est en carafe sur mon nouvel hébergeur et je serai curieux de voir cette solution.

  • Li-An

    Ah, j’oubliais. Comme tout le monde cherche des solutions partout, il y a aussi ce plugin (pas encore testé) http://la-passeggiata.com/?lan.....38;cpage=1

  • Bonjour Francis,

    Merci de cet article sur ce plugin.
    Cependant, j’ai des difficultés à le faire fonctionner sur mon site.
    Je désire créer en bas de ma page principale, 3 lignes de 10 petites images.
    Donc un encart qui va reprendre tous les articles de plusieurs catégories précises ayant la clé thumb pour un maximum de 30 articles.
    Mais avec les exemples d’insertions données je n’ai pas l’impression que cela fonctionne.
    Quelle serait la manœuvre ?
    D’avance merci,

  • Bonjour Francis,
    et tout d’abord merci pour ce tuto, très intéressant, qui m’a permis de réaliser une belle page-template, testée pour le moment en local.
    Mais je me trouve confrontée à un problème : j’ai lightbox2, et je souhaiterais que le clic sur la miniature ouvre l’image dans sa taille originale. Or ce n’est pas le cas… sniurffff.
    Y’a-t-il une subtilité que je n’ai pas saisie ? ou le fait d’utiliser TimThumb empêche-t-il dès lors l’ouverture de l’image avec lightbox ? et dans ce cas, je dois faire un choix ?
    Merci pour votre réponse

  • Meli Melo > Je pense que si tu ajoutes le script avec dans le code du lien vers l’image de destination, le fameux rel= »lightbox », ça devrait fonctionner, non ?

  • YESSSSSSS ! Au début, j’ai bien cru que tu me parlais chinois… et puis après quelques efforts, c’est le top ! En local tout du moins !
    Mille mercis pour la réponse si rapide !

  • Bonjour et merci pour le tuto!
    Débutant sur wordpress, j’ai encore un peu de mal avec les boucles. J’utilise le script « Affiche la vignette avec lien vers l’URL de l’article » sur ma page d’accueil. Ça fonctionne très bien mais je voudrais aller un peu plus loin. Serait-il possible d’afficher le dernier article d’une catégorie (et non pas le dernier article posté)? J’ai fait des essais avec query_posts, etc. mais ça ne marche pas – je ne dois pas être sur le bonne voie 😉 Merci++ par avance!

  • Au temps pour moi, il fallait bien utiliser query_posts 🙂

    Code ci-dessous pour ceux que ça intéresse :
    (id catégorie 1 pour l’exemple)

    <a href= » » rel= »bookmark » title= » »><img src= »/scripts/timthumb.php?src=ID, « thumb », $single = true); ?>&h=480&w=640&zc=0″ alt= » » />

    Et pensez à réouvrir un nouveau query_posts si vous voulez afficher d’autres articles (avant ou après) sur la même page.
    +++

  • J’utilise Mimbo 3,j’ai voulu l’installer sur un site hébergé chez Free,la fonction timthumbs,ne fonctionne pas.

  • OMG je cherche ça depuis des mois … et je viens enfin de découvrir !
    Je connaissais le nom de TimThumb, je suis trop bête !!

    Merci beaucoup Fran6 ! 🙂

  • très bon script );

  • cookie_poster

    coucou,
    Petit soucis, sur ma home j’ai un module qui m’affiche les 10 derniers articles postés, avec un thumbnail a côté (classique) j’utilise donc timthumb et c’est génial… si je ne met que 5 thumb… dès que j’en met pour le 6ème article ça casse tout et ma sidebar dégage en bas 🙁
    Je vous mettrais bien une capture en lien mais c’est un site pour adulte 😉 donc peux pas !
    Merci de m’aider c’est pour le boulot et j’en ai marre de galérer la dessus !

  • cookie_poster

    je rectifie… ça ne beug pas tant que je mets la moitié des thumb par rapport aux articles affichés : 5 car 10 articles, j’ai testé pour 12 articles et je ne peux mettre que 6 thumb

  • Une petite erreur s’est glissée mais très gênante ^^

    Pour que l’option 3 fonctionne, il faut retirer l’avant dernier  »
    « 

  • mince ça ne s’écrit pas, il faut enlever l’avant dernier php, ça devrait bon là ^^

  • jerome

    Salut,
    en utilisant les codes proposés ci-dessus tel quel, je me suis aperçu que lorsqu’on passait son site/blog au validateur du W3C, on se retrouvait avec une floppée d’erreurs dues à Timthumb. Cela vient de l’utilisation des esperluettes dans l’url.

    Pour y remédier, il suffit de remplacer les esperluettes située dans l’url (devant h, w et zc) par l’entité html correspondante, à savoir : &

    Normalement, après ce petit changement, timthumb passe au validateur sans problème.
    Si cela peut aider quelqu’un, et éviter de chercher ailleurs !

  • jerome

    Mince, l’entité html s’affiche pas :

    http://fr.wikipedia.org/wiki/Esperluette

  • Merci Jérôme pour cette info ! 😉

  • Guillaume

    Bonjour !!

    Super article ! J’y ai appris beaucoup de choses.

    Pour la réalisation de mon blog perso, je voudrais insérer exactement le même mécanisme que celui présent sur le site http://www.caldoropresidente.it avec l’échelle 1,2,3,4,5 pour les articles. En revanche, j’ignore où trouver le plugin /scrit …. 🙁

    Merci beaucoup par avance de votre coup de pouce !! 🙂

  • Guillaume, depuis la version 2.9, ces méthodes de plugin pour les vignettes sont devenues un peu obsolètes puisqui’il existe à présent la fonction the_post_thumbnail();

  • Bonjour
    ça fait un moment que je cherche un script parreille, le seul probleme c’est que le lient de l’image qu’on met dans « thumb ». l’image doit etre dans le dossier « \images ».

    hors c’est pas le cas pour moi, mes images sont dans un autre site ….

    si je met un autre lient ça marche pas, rien ne s’affiche.

    Comment je peux faire ça :s ??

  • Salut à vous !

    Je viens d’installer un nouveau théme, et celui-ci utilise TimThumb. Mon soucis est que lorsque je mets l’url de l’image dans « valeur » et « thumb » dans nom, que je publie.. et bien .. rien ne se passe. Le théme met une image par défaut, et sur l’article où j’ai essayé de mettre une miniature, l’image de défaut disparait, cela veut bien dire qu’il se passe quelque chose !! Mais.. pas ce que je voudrais..
    Est ce qu’il faut que je code dans le théme ?
    Aidez-moi, je suis perdu 🙁

  • Salut Antoine, tu as résolu ton problème depuis ton message ? Si c’est pas le cas, tu aurais une URL à me fournir ?

  • bjr,

    j’ai installé le script chmode én 777 sur un hebergeur gratuit ca marche..
    chez mon hebergeur cela nemarche pas carre bleu sur la home
    sur le gratuit wordpresse se trouve dans un fichier htdoc a la racine chez mon heebergeur dans un osus fichier wwww lui meme dans le fichier public a la racine

    merci de votre aide

  • Merci pour la revue, je cherchais un thème WP vidéo

  • You could certainly see your skills in the paintings you write. The arena hopes for even more passionate writers like you who aren’t afraid to mention how they believe. All the time go after your heart.

  • I and also my guys appeared to be looking at the nice recommendations located on the website and all of the sudden I got a terrible feeling I never thanked the site owner for those secrets. My men were definitely consequently very interested to read them and already have extremely been making the most of these things. Appreciate your really being very considerate and for figuring out this kind of notable areas most people are really desperate to be aware of. Our honest apologies for not expressing gratitude to sooner.

Success, your comment is awaiting moderation.