WordPress 2.9 « Carmen McRae » dans les bacs : the_post_thumbnail();

Après de longs mois de développement, la version 2.9 (appelée Carmen McRae) de WordPress vient d’arriver dans les bacs et j’y vais donc de mon petit billet. J’avais déjà présenté rapidement les principales nouveautés mais je souhaite revenir plus précisément sur la fonction the_post_thumbnail();. Fonction que je n’ai pas encore eu le temps de documenter que ce soit dans le Codex US ou dans le Codex FR. Je vais donc remédier à ce manque ici avant de compléter la documentation officielle. Tout ce qu’il faut savoir sur la fonction the_post_thumbnail(); se trouve donc ci-dessous. N’attendez pas la version 3.0 (qui sortira théoriquement au printemps) pour vous mettre à la page !

Depuis WordPress 2.9, vous pouvez attribuer une (ou plusieurs) miniature(s) à un article. Pour afficher cette miniature, vous devez utiliser la toute nouvelle fonction the_post_thumbnail(); dans le fichier de thème de votre choix. Il est bien sûr possible d’utiliser la fonction brute comme je viens de la donner ou de lui passer des arguments pour modifier l’apparence de la miniature, son positionnement, sa taille, etc…

Déclarer que le thème supporte/utilise la fonction the_post_thumbnail();

Afin de pouvoir utiliser la fonction the_post_thumbnail(); dans vos fichiers de thème, il faut ajouter une ligne au fichier functions.php :

1

<?php add_theme_support('post-thumbnails'); ?>

Appeler la miniature dans votre fichier de thème

Bon là rien de très compliqué, on ajoute cette ligne au fichier de thème et la miniature s’affiche :

1

<?php the_post_thumbnail(); ?>

Modifier sa taille d’affichage

Il est possible de passer 3 formats d’images à la fonction.

1
2
3
4
5
6
7
8

// the thumbnail
the_post_thumbnail('thumbnail'); 
 
// medium resolution
the_post_thumbnail('medium');
 
// large resolution
the_post_thumbnail('large');

Ces formats d’images sont directement liés à ceux que vous avez paramétré dans l’administration de votre blog (Réglages -> Médias).

Modifier son positionnement et appliquer une classe CSS

Il est possible d’attribuer une classe à la fonction afin que la photo soit alignée comme vous le souhaitez.

1
2
3
4
5
6
7
8
9
10
11

//  Photo alignée à gauche
the_post_thumbnail('thumbnail', array('class' => 'alignleft'));
 
//  Photo alignée à droite
the_post_thumbnail('thumbnail', array('class' => 'alignright'));
 
//  Photo centrée
the_post_thumbnail('thumbnail', array('class' => 'aligncenter'));
 
// Photo alignée à droite + classe personnalisée
the_post_thumbnail('thumbnail', array('class' => 'alignright ma_propre_classe'));

Afficher les miniatures dans un tableau

Les miniatures peuvent être affichées sous la forme d’un « tableau » en contrôlant leur taille.

1
2

// Miniature recadrée à 100x100 pixels
the_post_thumbnail(array(100,100), array('class' => 'alignleft'));

Les proportions (largeur/hauteur) de l’image sont toujours conservées, même si l’on spécifie d’autres valeurs. Dans le cas présent, si l’image originale fait 150×50 pixels, elle sera redimensionnée à 100×33 pixels.

Appeler les dimensions fournies dans l’administration…

Les concepteurs de thèmes peuvent rencontrer un problème puisqu’il ne peuvent pas prévoir à l’avance les valeurs qui seront définies par l’utilisateur. Une façon d’aborder ce problème étant d’interroger les valeurs pour les différentes tailles :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Largeur des miniatures
get_option('thumbnail_size_w');
 
// Hauteur des miniatures
get_option('thumbnail_size_h');
 
// Largeur maximale de la taille moyenne
get_option('medium_size_w');
 
// Hauteur maximale de la taille moyenne
get_option('medium_size_h');
 
// Largeur maximale de la grande taille
get_option('large_size_w');
 
// Hauteur maximale de la grande taille
get_option('large_size_h');
 
//  Si la fonction retourne "1" comme valeur, le recadrage est activé aux dimensions exactes, sinon "0" et le recadrage (crop) est désactivé.
get_option('thumbnail_crop')

Modifier ces dimensions

1
2
3
4
5

<?php
$w = get_option('thumbnail_size_w') / 2; /* On divise par 2 la largeur du format "miniature" et on stocke la valeur dans $w */
$h = get_option('thumbnail_size_h') /2; /* On divise par 2 la hauteur du format "miniature" et on stocke la valeur dans $h */
the_post_thumbnail(array($w, $h), array('class' => 'alignleft')); /* On affiche la miniature avec ces nouvelles valeurs */
?>

Démonstration par l’exemple…

Concrètement, si la taille de la miniature excède 150×150 pixels et si le recadrage (crop) est activé, la miniature doit être recadrée à 150×150 pixels. Si la miniature n’excède pas 150×150 pixels alors on utilise la taille d’origine de la miniature.

1
2
3
4
5
6
7

<?php
if(get_option('thumbnail_size_w') > 150 && get_option('thumbnail_crop') == 1) {
    the_post_thumbnail(array(150,150));
}else{
    the_post_thumbnail('thumbnail');
}
?>

Dernière précision !

Ne pas abuser de ce système car l’affichage d’une miniature génère deux requêtes vers la base de données.

J’aime pas Noël !