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.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.