12 Nov 2010
Posté dans : Tips and tricks

Gérer différentes tailles d’images à la une dans WordPress

Les images à la une ou post thumbnails sont souvent utilisées dans les thèmes WordPress et permettent de redimensionner et/ou croper automatiquement ses vignettes. C’est le cas sur la home de ce thème. Seulement voila, si je veux avoir une vue blog avec des vignettes de 600 x 150 px et une vue magazine avec cette fois ci des vignettes de 200 x 100px c’est une autre affaire.

Il suffit alors d’éditer le fichier fonctions.php de votre thème et d’utiliser la fonction add_image_size pour chaque nouvelle taille de vignette souhaitée.

//On commence par activer si ce n'est pas déja fait les images à la une sur les articles
add_theme_support( 'post-thumbnails' ); 

//On ajoute ensuite autant de tailles de vignettes que souhaité en utilisant la fonction add_image_size et en spécifiant un identifiant unique, une largeur et une hauteur.
add_image_size( 'category-thumb', 200, 200 );
add_image_size( 'hamepage-thumb', 220, 180, true );

En procédant ainsi, dès que vous uploaderez une nouvelle image à la une, l’image source sera dupliquée, redimensionnée et rognée aux dimension spécifiées.

Il suffira alors pour afficher ces images d’utiliser la fonction the_post_thumbnail et de passer en paramètre l’identifiant de la taille de vignette :

//Si l'article contient une image à la une, afficher cette image avec les dimensions 'category-thumb' définies dans fonctions.php
<?php if ( has_post_thumbnail() ) the_post_thumbnail('category-thumb'); ?>

Seulement voila, dès que vous ajoutez une taille de vignette dans le fichier fonctions.php ou ailleurs, cette taille n’est prise en compte que pour les images que vous uploaderez dans le futur et non pas les anciennes vignettes. Pour éviter de réuploader toutes les vignettes à la main, il existe un plugin qui le fait tout seul ^^

Il s’agit de Regenerate Thumbnails. Une fois l’extension activée, il faut sue rendre dans Outils puis Regen. Thumbnails. Cette opération est à reproduire à chaque fois que vous ajoutez/modifier une taille de vignette.

Laisser un commentaire

Rechercher