Modèle: Les images

Pour afficher les images mise en avant (image principale du post) dans un modèle (template), il vous suffit d'appeler la fonction suivante:

<?php the_post_thumbnail(); ?>

Cette fontion génèrera la balise <img> entière.

Notez que pour cela, il faudra que le fichier function.php de votre thème contienne la ligne suivante:
add_theme_support( 'post-thumbnails' );

Si vous souhaitez ne pas générer la balise image complète mais seulement afficher l'URL de l'image (dans le cas d'un background-image par exemple), vous pouvez utiliser:

<?php the_post_thumbnail_url(); ?> post thumbnail Configurer différentes tailles d'images

Dans WordPress, lorsque vous importez une image dans la bibliothèque de médias, elles sont automatiquement créées en trois tailles que vous pourrez utiliser pour les images mises en avant, mais aussi dans vos articles ou vos modèles (templates).

Vous pouvez changer les valeurs par défaut de ces trois tailles sous Réglages > Médias.

Affichage selon la taille désirée

Le premier paramètre de <?php the_post_thumbnail(); ?> est le libellé de la taille désirée, soit:

// Vignette (en anglais thumbnail) (150 x 150 rogné) the_post_thumbnail( 'thumbnail' ); // Résolution moyenne (300 x 300 hauteur maxium de 300px) the_post_thumbnail( 'medium' ); // Résolution moyenne-large (768 x 0 hauteur infinie) the_post_thumbnail( 'medium_large' ); // Résolution large (1024 x 1024 hauteur maxium de 1024px) the_post_thumbnail( 'large' ); // Résolution complète (dimension originale de l'image) the_post_thumbnail( 'full' ); Paramètres supplémentaires

Il est possible d'ajouter des paramètres supprémentaires à la fonction via un tableau (array) PHP. Par exemple, si vous souhaitez ajouter une ou des classe(s) CSS à la balise <img>.

Pour ajouter la classe .image-responsive à la balise image générée, voici ce qu'on devrait ajouter: array('class' => 'image-responsive'), comme dans l'exemple ci-dessous

<?php the_post_thumbnail('medium', array('class' => 'image-responsive')) ?>

Vous pouriez aussi ajouter d'autres paramètres tel que l'activation du chargement différé (lazy loading), en ajoutant un autre élément à votre tableau (array) nommé 'loading' => 'lazy'. N'oubliez pas de séparer chaque élément du taleau (array) par une virgule!

post thumbnail Images non reliées à un post

Il est possible que vous ayez besoin de différentes images non reliées à un post spécifique pour contruire votre thème. Pour ce faire, vous pouvez les déposer dans un dossiers images dans votre thème.

Pour générer la balise image du fichier fichier-image.svg, il vous suffira d'inscrire:

<img src="<?php bloginfo('template_url'); ?>/images/fichier-image.svg">