Site icon WPMarmite

Ajouter un nouveau format d’image sur WordPress

Quand on regarde dans les réglages de WordPress, on constate que 3 tailles d’image sont disponibles : grande, moyenne et les miniatures.

En complément, les thèmes proposent généralement trois ou quatre tailles d’images différentes. Par exemple, il y en a une pour les images à la une des articles, des pages d’archives etc.

Pour des raisons de design et d’esthétisme, vous pouvez avoir besoin d’un format personnalisé.

WordPress propose une fonction pour déclarer un nouveau format d’image :

add_image_size( string $name, int $width, int $height, bool|array $crop = false )

Les différents paramètres sont :

Le snippet suivant vous montre comment ajouter une nouvelle taille d’image :

function wpm_new_image(){

// L'image sera tronquée exactement à la dimension indiquée
add_image_size( 'wpm_taille_1', 200, 200, true );

// L'image sera redimensionnée de manière proportionnelle à la largeur indiquée (ici 600px)
// La hauteur peut-etre différente d'une image à l'autre pour garder la proportion originale
add_image_size( 'wpm_taille_2', 600, 300 );

// Utile si vous publiez de très grande image type infographie.
add_image_size( 'wpm_taille_3', 590, 9999 );

}
add_action( 'after_setup_theme', 'wpm_new_image' );

Intégrez le code suivant dans le fichier functions.php du thème enfant pour utiliser une taille d’image personnalisée en adaptant le nom et les dimensions à celles que vous souhaitez.

Pour afficher ces images dans le thème, il suffit d’utiliser le code suivant par exemple :

<?php the_post_thumbnail( 'wpm_taille_1' ); ?>

Avant de vous laissez repartir, voyons…

Comment regénérer les images existantes de WordPress

Si vous avez déjà envoyé des images dans la bibliothèque de médias, la nouvelle taille d’image que vous venez de définir ne leur sera pas appliquée.

Pour générer vos images dans cette nouvelle taille, vous pouvez utiliser l’extension Regenerate Thumbnails.

Une fois installée, rendez-vous dans Outils > Regen. Thumbnails et lancez le processus 🙂

Quitter la version mobile