// Vous lisez...

Vous êtes ici :Sommaire >> Infographiste >> CMS >> Wordpress

add_image_size wordpress

Comment utiliser add_image_size

Utiliser et afficher différentes tailles d’images sous WordPress avec add_image_size

Quand vous installez WordPress pour la première fois et que vous gardez les paramètres par défaut, dans "Réglages des médias" vous avez une case cochée pour "Recadrer les images pour parvenir aux dimensions exactes (normalement, les miniatures sont proportionnées)".
Vous aurez donc 2 images dans le répertoire Uploads lors de l’ajout d’une photo :
- image-150x150.jpg
- image.jpg

Cependant certains thèmes utilisent la fonction add_image_size pour créer vos images avec différentes dimensions.
Exemple sur le thème Megalithe 1.4 utilisé sur Saint Rémy de Provence

// Add new image sizes
add_theme_support('post-thumbnails');
add_image_size('Frontpage', 205, 120, TRUE); // Home Midlle 1
add_image_size('Mini', 125, 90, TRUE); // Home Midlle 3
add_image_size('Square', 86, 86, TRUE);
add_image_size( 'Blog', 680, 280, TRUE ); // Blog
add_image_size( 'portfolio-small', 312, 250, true ); // Portfolio small
add_image_size( 'portfolio-large', 625, 400, true ); // Portfolio large
add_image_size( 'portfolio-thumb', 330, 145, true ); // Portfolio thumb
add_image_size( 'post_thumb', 180, 150, true ); // post thumb
add_image_size( 'post_featured', 655, 280, true ); //post featured

Que l’on retrouve dans les réglages du thème

Cette version du thème avait un gros défaut, elle affichait sur la page d’accueil dans la partie blog tous les derniers articles, mais en utilisant pour chaque l’image originale redimensionnée pour l’affichage, donc avec le poids maximal, d’où une page d’accueil très lourde.
la première chose à faire est de limiter le nombre d’articles ’posts_per_page’ =>’10’,
puis d’utiliser <?php if ( has_post_thumbnail() ) {the_post_thumbnail( 'portfolio-small' ); }?> pour charger une image plus petite, donc moins lourde.


Naviguer d'article en article

article precedent Comment augmenter the max upload size dans Wordpress
Changer d’image en fonction de la langue avec WPML article suivant

Commentaires