Ajouter des tailles d’images personnalisées dans WordPress

Lorsque vous utilisez WordPress pour créer un site internet ou un blog, les tailles d’images personnalisées peuvent s’avérer nécessaires.
Ces tailles spécifiques vous permettent d’adapter parfaitement l’apparence de vos images à votre mise en page.

Dans cet article, nous allons vous expliquer comment ajouter facilement des tailles d’images personnalisées dans le fichier function.php de votre thème WordPress.

Comment WordPress gère les images ?

Dans votre menu d’administration, dans Réglages > Médias, vous avez les tailles paramétrées de base dans votre installation. De base, WordPress propose les tailles “Large”, “Medium” et “Thumbnail”.

Lorsque vous téléchargez une image depuis votre ordinateur dans la médiathèque de WordPress, le CMS crée plusieurs versions de votre image. Ces versions correspondent aux paramètres présents dans les réglages des médias.

Ainsi, cette fonctionnalité permet de charger la taille adaptée en fonction des supports d’utilisation du site (PC, mobile, tablette) ou, si vous le souhaitez, d’afficher un format totalement différent comme un format vertical par exemple.

Si vous chargiez une image de 2000 pixels sur mobile, le temps de chargement serait bien trop long.

Création de tailles d’images personnalisées dans WordPress

Ouvrez votre fichier function.php, présent dans votre thème enfant, et insérez cette ligne :

add_image_size( 'nom-de-la-taille', largeur, hauteur, recadrage );

Explications :

• La fonction add_image_size permet d’ajouter une taille d’image.
• Nous indiquons un identifiant pour notre taille, ce qui nous permettra de l’appeler ultérieurement.
• Nous définissons une hauteur pour notre image.
• Nous définissons une largeur pour notre image.
• Nous spécifions le recadrage souhaité. Lorsqu’il est paramétré sur “true”, l’image sera recadrée pour respecter exactement les dimensions spécifiées. Lorsqu’il est paramétré sur “false”, les proportions de l’image seront conservées. Ce paramètre est facultatif. Si nous ne le spécifions pas, l’option sera considérée comme paramétrée sur “false”.

Exemple : j’ajoute une taille bandeau avec un recadrage strict.

add_image_size( 'bandeau', 1000, 200, true );

A partir de l’ajout de ma fonction, WordPress va créer une version au format « bandeau » à chaque fois que j’ajouterai un média à ma médiathèque.

Utiliser les tailles d’images personnalisées

Pour afficher mon bandeau, j’utiliserai une fonction de ce type :

the_post_thumbnail( 'bandeau' );

Régénérer les miniatures

Si vous ajoutez une taille supplémentaire à votre site après avoir téléchargé des images dans votre médiathèque, ou si vous modifiez la taille de votre image de bannière, vous devrez créer une version “bandeau” pour toutes les images déjà existantes.

Utiliser le plugin regenerate thumbnails

Installez le plugin. Puis, rendez-vous dans ” Outils > Régénérer les miniatures“, puis cliquez sur “Régénéré les miniatures pour toutes les XXX pièces jointes“