Gérer plusieurs tailles d’images personnalisées sur WordPress

Par défaut, WordPress ne sait gérer que trois types de taille pour les images que nous insérons dans nos articles : la miniature, la taille moyenne et la grande taille. Bien évidemment, ces options ne suffisent pas lorsqu’on se lance dans la création d’un thème de type magazine avec des vignettes de différentes tailles dans tous les sens. Bien heureusement, il est parfaitement possible d’ajouter d’autres tailles d’images personnalisées sur WordPress et nous allons justement voir comment faire dans cet article. En espérant que ce dernier vous soit utile, évidemment.

Gérer plusieurs tailles d'images personnalisées sur WordPress

Activation de l’image à la une

Et en toute franchise, je pense sincèrement que ce sera le cas puisque cette astuce va vous permettre d’intégrer plusieurs vignettes de taille différente dans vos thèmes WordPress, certes, mais également de modifier à la volée la taille de toutes vos images lorsque vous changez de thème. Tenez, par exemple, si vous partez d’un format 125×125 et que vous souhaitez basculer toutes vos vignettes en 300×150, et bien vous pourrez parfaitement vous appuyer sur cette astuce. Vous l’aurez compris, c’est typiquement le genre de truc qui risque de vous simplifier grandement la vie.

Pour se faire, nous allons bien évidemment nous appuyer sur le fichier « functions.php ». Commencez donc par l’ouvrir puis ajouter la ligne suivante afin d’activer la gestion des images à la une :

add_theme_support('post-thumbnails');

Une fois que c’est fait, lorsque vous retournerez sur l’éditeur d’article, vous verrez une nouvelle zone apparaître dans la barre latérale, une zone nommée « image à la une » et qui vous permettra donc de choisir l’image avec laquelle vous pourrez vous amuser dans votre thème.

Création des tailles personnalisées

C’est bien, mais ce n’est pas suffisant puisque nous allons maintenant devoir ajouter nos tailles d’images personnalisées à WordPress. Là encore, tout va se passer du côté du fichier « functions.php », mais ce sont ces lignes là qu’il faudra ajouter :

if (function_exists('add_image_size')) {
     add_image_size('vignette_1', 100, 40, true);
     add_image_size('vignette_2', 80, 30, true);
     etc...
}

Nous allons prendre le temps d’expliquer le fonctionnement de cette fonction. La première ligne va nous permettre de tester si la fonction dont on a besoin existe. En toute logique, elle est nativement implémentée à toutes les dernières versions de WordPress. Ensuite, en dessous, sur chaque ligne, nous allons créer nos vignettes personnalisées grâce à la commande « add_image_size ». Entre parenthèses, nous allons trouver quatre attributs. Le premier, ce sera le nom de notre taille personnalisée, la seconde ce sera la largeur de l’image (en pixels), la troisième ce sera la hauteur de l’image (en pixels aussi), la quatrième ce sera la méthode de recadrage qui devra être utilisée par WordPress.

Ce dernier propose effectivement deux modes de recadrage. Si vous choisissez « false » (ou si vous n’écrivez rien), vous aurez un recadrage sans aucune déformation de l’image. Ce qui risque de donner ensuite des vignettes d’allure différente. Au contraire, si vous mettez « true », alors vous activerez le recadrage avec réajustement homothétique qui vous permettra d’avoir de jolies vignettes bien calibrées. Le seul inconvénient de cette méthode, c’est que vous perdrez certaines zones de l’image.

Bien évidemment, vous pouvez créer autant de tailles personnalisées que vous le souhaitez, tâchez juste de bien choisir leur nom pour les retrouver facilement par la suite. Notez en outre qu’une fois ces tailles créées, vous pouvez utiliser l’extension Regenerate Thumbnails pour générer toutes vos vignettes.

Intégration des vignettes dans le thème

Le plus dur est fait. Nous avons activé la fonction « image à la une », nous avons créer nos tailles d’images personnalisées et il va donc maintenant falloir intégrer nos vignettes à nos thèmes. Yep, et c’est vraiment super simple puisque vous n’aurez qu’une simple ligne à insérer dans votre boucle WordPress, à l’endroit même où vous souhaitez faire apparaître votre vignette :

the_post_thumbnail('nom_de_ma_taille_personnalisee');

Et ça marche bien évidemment avec n’importe quelle boucle. Maintenant, vous allez pouvoir insérer plein de vignettes de taille différente dans vos thèmes et leur donner un peu plus de chien.

Pour aller plus loin

Le gros problème, avec la fonction « image à la une », c’est que cette dernière a été implémentée dans l’une des dernières versions de WordPress. Et si votre blog commence à avoir de l’âge, il est fort possible que vous ne l’ayez pas utilisé dès le début. Or si c’est le cas, il va falloir bidouiller pour générer automatiquement toutes les images à la une de vos billets. L’ami Olivier s’est justement penché sur la question et je vous invite donc à aller consulter son article pour avoir la solution à cet épineux problème.

Sinon, pour les allergiques au code, il y a également ce plugin qui vous permettra de faire exactement la même chose sans vous prendre la tête.



Frédéric Pereira est l'auteur de cet article

Floodeur compulsif, est très actif sur Twitter ou encore sur Facebook. Sachez en outre que la Fredzone a une page sur Google+.

Ces articles peuvent aussi vous intéresser

  • Hadopi : le respect des droits d'auteur n'est pas le même pour tout le monde

    Hadopi : le respect des droits d’auteur n’est pas le même pour tout le monde

    Depuis plusieurs mois, Hadopi se pose comme un grand donneur de leçon et la Haute Autorité n’a ainsi de cesse que de traquer tous les pirates du web afin de leur faire entendre raison. Toutefois, elle a déjà prouvé à maintes reprises qu’elle ne respectait pas ses propres directives. On se souviendra notamment de ce fameux problème de police qui rendait le logo de la Hadopi totalement illégal. Or justement, elle vient tout juste de récidiver en utilisant cette fois plusieurs photographies sans pour autant les créditer. Et ça, les amis, ça prouve au moins une…

  • Non, Digg n'a pas été vendu pour 500.000 $

    Non, Digg n’a pas été vendu pour 500.000 $

    La nouvelle s’est répandue comme une trainée de poudre ce matin, Betaworks (News.me) a racheté Digg ! Mieux, selon la rumeur, ce rachat aurait été conclu pour… 500.000 $, soit une somme parfaitement ridicule. Surtout quand on sait que Digg accueillerait chaque mois plus de 400 millions de visiteurs uniques et qu’il serait en outre le 191ème plus gros site au monde d’après Alexa. Etrange, donc, mais il semblerait justement que cette rumeur ne soit pas aussi fondée qu’on le pense. En tout cas, c’est ce qu’a déclaré Matt Williams, ancien CEO de la firme,…

  • Facebook va nous aider à sécuriser notre compte

    Facebook va nous aider à sécuriser notre compte

    On ne rigole pas avec la sécurité, surtout pas quand on se trouve à la tête d’un réseau social comptant plus de 900 millions de membres. Preuve en est, Facebook a déployé un nouvel outil qui va venir en aide à tous les internautes qui pensent être infectés par de terribles virus ou d’horribles malwares. Un outil qui va complètement les prendre par la main, qui va verrouiller leur compte et qui va en plus les orienter vers plusieurs outils gratuits qui leur permettront de nettoyer leur machine et de sécuriser leurs données. Le nom…


  • initialLED

    Et pour ceux qui ne souhaitent pas modifier leur fichier « functions.php » il existe, entres autres, l’extension « Dynamic Image Resizer » ( http://wordpress.org/extend/plugins/dynamic-image-resizer/ ).
    A mon sens, cette extension est plus simple à utiliser car il suffit simplement d’ajouter la taille souhaitée de l’image à la fin de son nom, rien de plus. L’image sera automatiquement redimensionnée et ce même si la taille spécifiée n’existe pas dans les « Réglages des médias » de WP.

    • http://www.tayo.Fr Tayo

      @initialLED:
      Salut, merci pour le lien mais je ne vos pas trop l’intérêt.
      Ils disent :
      « The result is that space is saved (since images are only created when needed), and uploading images is much faster (since it’s not generating the images on upload anymore). »
      Ben, au final ça changera rien non ? Si je me trompe pas, dès qu’on aura besoin de l’image elle sera générée, alors à moins qu’il n’y ait pas un seul visiteur sur le page / le site, aucune différence noN?

      • initialLED

        @Tayo: Sauf que tu as la possibilité de créer automatiquement des vignettes de tailles différentes que celle imposées par tes réglages dans « Réglages des médias ».

        @Fred: les vignettes d’une taille donnée ne sont générées qu’une seule fois (au premier affichage) et stockées ensuite comme les autres dans /wp-content/uploads/

        Autre avantage de cette extension : Lorsque tu changes de thème, tu renommes tes images dans tes articles en leur attribuant une nouvelle taille et toutes les vignettes sont de nouveau adaptées à ton nouveau thème.
        Il te reste juste à supprimer les non-utilisées (anciennes tailles) de ton serveur. Et il existe aussi une extension pour ça… ;)

        • http://www.fredzone.org Fred

          @initialLED: Ouais, enfin sur 7500 articles, si tu dois repasser sur chaque article ou renommer chaque image, c’est même pas la peine… :s

          • initialLED

            @Fred: Tu peux aussi exporter ta base SQL et travailler dessus en mode texte avant de la réimporter. Un bon éditeur texte pour remplacer des chaines avec macro et le tour est joué.
            Mais bon, c’est vrai que la multiplication des articles multiplie les sources d’erreur. Sur un petit blog comme le mien (38 articles en 6 ans, j’ai honte) ça reste faisable facilement et rapidement.

          • http://www.fredzone.org Fred

            @Fred: Mouais, j’suis pas convaincu quand même, enfin du coup c’est nettement moins simple que ma méthode, et c’est surtout plus source d’erreur.

    • http://www.fredzone.org Fred

      @initialLED: Euh à mon avis, ça, quand tu as beaucoup de trafic, c’est un coup à flinguer ton serveur hein…

  • Pingback: Wordpress : générer les images à la une de ses anciens articles | Fredzone

  • Gwendoline

    Bonsoir,

    Je souhaiterai agrandir la taille de mes images sur mon blog.
    Je pense qu’il faut agrandir la mise en page (mais je n’y connais pas grand chose). Mon problème est que je suis sur WordPress.com et j’ai cru comprendre qu’on ne pouvait pas faire grand chose sur ce support. Quelqu’un peut-il m’aider ? Voici le lien de mon blog: http://depechesmode.com
    Par avance merci !

    gwendoline_2103@hotmail.fr

  • Articles Populaires -

  • Les Bons Plans -

  • Articles au hasard -