Comment créer des tailles d’image additionnelles

Lorsque l’on développe un thème WordPress ou qu’on customise un thème existant, on est régulièrement confronté à l’utilisation d’images de tailles différentes. Pour simplifier cela, il est utile de pouvoir définir de nouvelles tailles d’images à réutiliser avec post_thumbnails(). Dans cet article, nous vous montrerons comment ajouter des tailles d’images supplémentaires.

WordPress dispose d’une fonction intégrée post_thumbnails(). Il existe également une fonction intégrée nommée add_image_size() qui vous permet de spécifier la taille des images et vous donne la possibilité de les recadrer directement lorsque vous les ajoutez à votre bibliothèque.

L’utilisation de ces fonctions de base peut vous simplifier la vie !

Enregistrement de tailles d’images supplémentaires dans WordPress

Vous devrez commencer par ajouter le support des vignettes (thumbs) en plaçant le code suivant (s’il n’existe pas déjà) dans le fichier functions.php de votre thème :

add_theme_support( 'post-thumbnails' );

Une fois que vous avez activé la prise en charge des vignettes, vous pouvez maintenant utiliser la fonction add_image_size() pour enregistrer de nouvelles tailles d’images supplémentaires.

L’utilisation de la fonction add_image_size est la suivante : add_image_size( « nom de la taille », largeur, hauteur, mode de recadrage) ;

Un exemple de code peut ressembler à ceci :

add_image_size( 'images-sidebar', 150, 150, true ); 
add_image_size( 'images-accueil', 200, 150 );
add_image_size( 'images-articles', 600, 9999 );

Si vous observez les 3 lignes de code ci-dessus, vous constaterez que nous avons défini 3 tailles d’images différentes. L’une tronquée, la suivante avec un recadrage simple, et la dernière avec une hauteur illimitée. Passons en revue ces paramètres.

Mode « Tronqué »

Comme vous le remarquez, il y a une valeur « true » ajoutée après la hauteur. Cette valeur « true » indique à WordPress de tronquer l’image à la taille que nous avons définie (dans ce cas, 120 x 120px). C’est la méthode que nous utilisons beaucoup dans la conception de nos thèmes pour nous assurer que tout est proportionné et que notre design ne se casse pas. Cette fonction recadrera automatiquement l’image soit par les côtés, soit par le haut et le bas, selon la taille.

Lorsque vous ajoutez votre image, vous serez alors invités à cadrer la zone que vous souhaitez tronquer de l’image.

Mode de recadrage léger

Par défaut, le mode de recadrage léger est activé, c’est pourquoi vous ne voyez aucune valeur ajoutée après la hauteur. Cette méthode redimensionne l’image proportionnellement sans la déformer. Il se peut donc que vous n’obteniez pas les dimensions que vous vouliez. En général, elle correspond à la dimension de la largeur et les hauteurs sont différentes en fonction des proportions de chaque image.

Mode hauteur illimitée

Il arrive que vous ayez des images super longues que vous souhaitez utiliser dans vos pages, mais que vous vouliez vous assurer que la largeur est limitée. La principale utilisation que nous trouvons pour ce type de taille d’image est sur des infographies. Les infographies ont tendance à être très longues et pleines d’informations. Recadrer une telle image sur une seule page de message n’est pas une bonne idée.

Par nature, les infographies sont plus larges que la largeur du contenu. Vous pouvez donc spécifier une largeur qui ne casse pas votre dessin tout en laissant la hauteur illimitée, de sorte que toutes les infographies puissent être affichées sans aucune distorsion. Pour cela, on utilise la valeur 9999.

Affichage de tailles d’images supplémentaires dans votre thème WordPress

Maintenant que vous avez ajouté la fonctionnalité pour les tailles d’images souhaitées, voyons comment les afficher dans votre thème WordPress. Ouvrez le fichier du thème dans lequel vous souhaitez afficher l’image et collez le code suivant :

<?php the_post_thumbnail( 'nom-du-format-dimage' ); ?>

Note : Ce bout de code doit être collé à l’intérieur de la boucle.

C’est tout ce que vous avez à faire pour afficher les tailles d’images supplémentaires dans votre thème WordPress. Vous devriez probablement l’intégrer dans une balise avec le style qui correspond à votre besoin.

Comment régénérer les tailles d’images supplémentaires pour les médias déjà présents dans la bibliothèque ?

Si vous ne le faites pas sur un tout nouveau site, vous devrez probablement régénérer les vignettes pour les images déjà existantes. La fonction add_image_size() fonctionne de la manière suivante : elle ne génère les tailles qu’à partir du point où elle a été ajoutée dans la bibliothèque. Ainsi, toute image de message qui a été ajoutée avant l’inclusion de cette fonction n’aura pas la nouvelle taille.

Nous devons donc régénérer la nouvelle taille pour les anciennes images. Ceci est assez facile en utilisant le plugin appelé Regenerate Thumbnails.

Une fois que vous avez installé et activé ce plugin, une nouvelle option est ajoutée sous le menu : « Outils > Regénérer les miniatures ».

Une fois sur cette page, vous pouvez cliquer sur le bouton « Regénérer les miniatures pour toutes les XXX pièces jointes ».

Gérer les tailles d’image supplémentaires avec un Plugin

Bien que nous ne soyons pas très friands de plugins, dans cas précis, il est un plugin que nous aimons beaucoup chez WPnuls ! Simple Image Sizes.

En effet, il s’agit d’un plugin très simple d’utilisation et très léger, qui permet de faire tout ce que nous venons de voir précédemment ! A savoir, générer de nouvelles tailles d’images, et régénérer les vignettes pour des tailles spécifiques.

Gregory

Agitateur de Stratégies, addict à WordPress depuis 2003, fada de Google depuis 1998. Incubateur Digital, j'accompagne au quotidien plusieurs entreprises et indépendants dans la gestion de leur stratégie digitale et l'optimisation de leurs sites WordPress. Basé à Aix-en-Provence, je suis à l'écoute de votre projet si vous avez besoin d'un expert WordPress.

Vous aimerez aussi

Laisser un commentaire

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