Les vignettes dans WordPress 2.9

Si il y a une des fonctionnalités de le 2.9 qui me rend contente, c’est bien celle là. 

Je travaille pas mal avec des thèmes magazines, basés notamment sur Mimbo, et je n’avais pas fait la mise à jour au moment de la mise en place du plugin timthumb, à la fois parce qu’il marchait mal avec php4, et parce que la nouvelle version de Mimbo me demandait trop de travail pour remettre mes propres personnalisations. 

Mais avec les thumbnails de la 2.9, on peut tout faire !

Préparer le terrain : activer les thumbnails

La première étape est à faire dans le fichier functions.php de son thème, qui contient déjà au moins les déclarations de sidebar.

On va d’abord tout simplement ajouter le support des thumbnails avec
add_theme_support( 'post-thumbnails' );

Et on définit leur taille :
set_post_thumbnail_size( 50, 50, true ); 

En fait, cette définition ne passe pas par dessus les réglages de l’admin. Elle me semble donc un peu inutile

Le « true » sert à indiquer qu’on veut rogner les bords de l’image si elle n’est pas carrée. Si on n’ajoute pas ce paramètre, alors l’image sera réduite en conservant ses proportions initiales. 

Et voilà…. à la limite, cela suffit. Les thumbnails seront alors générés avec les tailles que vous aurez définies par défaut dans le paramétrage des medias.
Paramétrage des médias

Mais pour des thèmes magazines, on peut avoir besoin d’autres tailles d’images.

Pas de problème, on peut en définir autant qu’on veut dans le fichier fonction php.
add_image_size( 'kategorie', 150, 150, true );
add_image_size( 'lead', 269, 178, true );
add_image_size( 'feature', 255, 88, true ); 

Ici j’ai défini ajouté à la taille par défaut une vignette carrée de 150 pixel de large, et deux autres vignettes, qui sont utilisées dans la page d’accueil, pour les articles mis en valeur. 

Afficher les thumbnails

Pour afficher la vignette, il suffit d’utiliser le code :
the_post_thumbnail('thumbnail')
qui correspond à la taille de la vignette définie dans l’administration.

Et si on veut utiliser une des autres tailles définies dans l’administration, ce sera avec le nom
the_post_thumbnail('large')
ou medium… 

Pour raffiner un peu, il vaut mieux tester si l’article a un contenu :
if ( has_post_thumbnail() )
the_post_thumbnail ;
else
une image par défaut

Mais on peut faire plus avec cette fonction.
Par exemple, si on souhaite donner un style particulier à la vignette avec une classe particulière ?
the_post_thumbnail('thumbnail', array('class' => 'la_classe")) ;

De la même façon, on peut modifier les paramètres alt et title enregistrés dans la bibliothèque des medias. 

Et pour l’historique ?
Un plugin a été développé par Fairweb, qui permet de récréer les thumbnails, en prenant d’abord le premier « attachment » de l’article, c’est à dire la première image chargée par le gestionnaire des médias, ou, à défaut, la première balise img du post. 

Un vrai bonheur, je vous dis. 

16 commentaires

  1. Ravie de voir que mon plugin t’es utile et merci de le recommander. Comme toi, je travaille pas mal sur des projets de type webzine et je l’ai créé pour passer en douceur sur les nouvelles fonctionnalités de WordPress 2.9, pour prévoir l’avenir pour mes clients tout en gardant une rétrocompatibilité sur les articles plus anciens, ceux qui n’utilisaient pas encore le post thumbnail. J’espère qu’il conviendra à de nombreux utilisateurs.

    Répondre à Fairweb
  2. Sur mes thèmes Mimbo, il ne m’est pas trop utile, puisque je gérais les images par le biais de champs personnalisés. En revanche je l’ai mis en place sur deux autres blogs où je ne travaillais qu’avec des images insérées dans les articles, et là c’est très bien !!

    Répondre à Marie-Aude
  3. Attention tout de même, cela scanne le contenu, donc ça mange de la ressource. C’est pour celà que c’est bien pour la rétrocompatibilité pour ne pas casser le design sur les articles anciens. Il est vaut mieux recommander au client de s’habituer au nouveau système natif dans WordPress.

    Répondre à Fairweb
  4. je crois que tout bon développeur WordPress avait sa propre solution pour les miniatures.

    J’avais quelque chose similaire à toi avec :

    1. Attachment de l’article
    2. Image dans l’article
    3. Vidéo dans l’article (compatible Vimeo/Youtube)

    + La compatibilité WPmu :)
    Héhé :) Poubelle tout cela !

    Répondre à Amaury
  5. Salut Amaury ;)
    Et encore, je trouve qu’on s’en sort pas mal puisque tes solutions comme les miennes sont restées fidèles à des fonctionnalités natives ce qui nous délivre de la dépendance d’un plugin (ça parce qu’on est développeurs). C’est pour celà que je n’ai jamais utilisé de champs personnalisés pour les images. J’avais développé un petit plugin basé sur l’attachment que je n’avais pas livré à la communauté, faute de temps. A la sortie de WP 2.9, je l’ai adapté et livré. Celà n’a été possible que grâce à l’ouverture du code natif qui prévoyait des filtres. C’est ce que j’aime dans WordPress :)

    Répondre à Fairweb
  6. Et ça te fait plaisir on dirait ^^

    Répondre à Marie-Aude
  7. Je suis comme toi Marie-Aude, j’ai choisi de faire ce qui me passionne ;)
    Alors je travaille et je m’éclate en même temps.

    Répondre à Fairweb
  8. Très intéressant, comme plugin, je vais l’essayer au plus vite.

    Répondre à truffo
  9. Mouais, en ce qui concerne les champs personnalisés, s’ils sont bien agencés, ils ne consomment pas plus de ressources que les fonctionnalités natives…

    Encore une fois, c’est le nombre de requêtes (et naturellement le poids des médias) qui influe(nt) sur la consommation.

    Donc si le code est bien agencé et les médias allégés, les plugins sont aussi efficaces qu’un « code maison ».

    Se pose ensuite la question de la dépendance des plugins… mais c’est une autre histoire =)

    En tout cas article très utile en soi, bien qu’un peu succint ^^

    Répondre à d0r1an
  10. Merci :)

    Le « truc » avec les champs personnalisés, c’est de charger d’un coup tous les champs du post plutôt que un par un.

    Répondre à Marie-Aude
  11. Merci pour ce post Marie-Aude.
    Toi et ceux qui ont laissé un commentaire, auriez-vous des exemples de sites utilisant ces vignettes ? Autre question (toujours de débutant) : comment insère-t-on proprement une vignette à un article dans le flux RSS ?

    Répondre à Olivier
  12. Bonjour Olivier, tu peux regarder http://www.tazzarine.com, le dernier article, sur la TV amazigh, utilise les thumbnails.

    Répondre à Marie-Aude
  13. Très bon article !
    Une question : Je n’arrive pas à mettre en place de thumbnails via « depuis le web », je n’arrive qu’en uploadant sur le FTP, le soucis étant le peu de place sur mon FTP.
    En fait j’arrive bien à insérer l’URL mais il ne me propose pas – comme dans l’onglet « depuis votre ordinateur » – « Enregistrer comme miniature ». Il y a juste « Insérer dans l’article ».

    Répondre à Yannick
  14. Merci pour la revue, je cherchais un thème WP vidéo

    Répondre à gfx
  15. Merci beaucoup Lumière de Lune pour cette article, une fois de plus tu me sauves la vie :)

    Répondre à K-rip

Commenter

*Informations requises Merci de donner les informations requises

  • Pas de liens raccourcis
  • L'auteur doit s'identifier avec son pseudo, son nom, son prénom ou s'il le veut le nom de son entreprise ou de son site, sauf si celui-ci correspond à des mots clés. Toutes les combinaisons sont permises dans ce cadre.
  • L'url peut être celle d'un site ou profil de réseau social, uniquement la page d'accueil
  • Pas d'adresse email jetable

*

*