Utiliser the post thumbnail

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 html 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 php/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=&quot;box&quot;>
 <a href=&quot;<?php echo $permalink; ?>&quot;>
 <div style=&quot;background: url(<?php echo $bckg[0] ?>) center center no-repeat;&quot;>
 </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 codex. 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 !

Ayez la partigitude, la cool attidude, c'est ça la bloguitude !