L’emploi des images dans WordPress est parfois un casse tête. Si la naissance de la fonction post_thumbnail aura résolu certains soucis, il reste encore du chemin pour qui souhaite personnaliser complètement son thème. 

Je ne saurais trop vous recommander de suivre les usages standards de WordPress en matière d’utilisation des médias. Ce qui vous éviteras quelques mauvaises surprises, tout comme cela vous éviteras de vous arracher les cheveux des heures durant pour cpaler vos images dans votre nouveau thème.

Mais revenons à notre petite astuces, bien connue des développeurs. Le principe est d’utiliser notre image comme background dans une div.

Après avoir attaché une image comme « image à la une » dans notre article, nous pouvons donc désormais récupérer cette dernière pour l’afficher sur notre site.

Mais la fonction the_post_thumbnail nous renvoie par défaut un code htmlHtml : Langage courant des pages internet composé de balises qui permettent de structurer la page et son contenu complet qui affiche la vignette. Dans certains cas, ce n’est pas ce que je souhaite. J’ai simplement besoin de l’url de l’image pour l’utiliser autrement. Alors, je vais récupérer cette url en utilisant les fonctions natives de WordPress mises à ma disposition.

Le code

Cette portion de code phpLangage serveur qui permet de généré les pages de votre site à la volée selon les informations demandées par l'internaute. Fonctionne traditionnellement de concert avec un base de données, de type MySQL. Avec PHP, on parle de site dynamique./html est à utiliser dans la boucle.

<?php
$id = get_post_thumbnail_id(); // récuper l'id du post en cours par défaut
$bckg = wp_get_attachment_image_src($id,large); // spécifier la taille de l'image à récupérer : thumbnail, medium, large, full
?>
<div class="box">
 <a href="<?php echo $permalink; ?>">
 <div style="background: url(<?php echo $bckg[0] ?>) center center no-repeat;">
 </div>
 </a>
</div>

Explications

get_post_thumbnail_id : permet, comme son nom l’indique, de récupérer l’id de notre image

wp_get_attachment_image_src : va nous permettre de récupérer les informations de l’image, comme sa taille. Cette fonction me retourne un tableau qui se présente comme suit :

• 0 : url de l’image
• 1 : largeur de l’image
• 2 : hauteur de l’image

Donc $bckg[0] va me renvoyer l’url de mon image, c’est tout juste ce dont j’ai besoin.

Je peux donc désormais utiliser mon image comme je le souhaite, et je n’ai pas eu besoin de librairie externe comme timthumb.

J’ai mis le lien vers le détail de chaque fonction dans le codexC'est la documentation officielle de WordPress, la Bible. Rédigée principalement en anglais, vous y trouverez (presque) tout au sujet de WordPress.. Je ne saurais trop vous inviter à suivre ces derniers.

Voilà, désormais, vous pouvez donc désormais faire ce que bon vous semble de votre image.

Amusez vous bien !

Pour les moteurs, ça parle de :

• the_post_thumbnail wordpress
• afficher image par son id wordpress
• wordpress article post-thumb
• url image medium template wordpress
• the_post_thumbnail(); <img
• the_post_thumbnail personnalisé
• the_post_thumbnail and timthumb
• the post thumbnails
• the post thumbnail wordpress
• post thumbnail