Récupérer la première image d’une publication WordPress

Mathieu Chartier 20 août 2015 à 16:11 Tutoriels illustrés 0 commentaire

WordPress est un CMS complet qui nécessite toutefois des connaissances techniques et une certaine maîtrise de PHP (et du codex WordPress) pour montrer tout ce qu'il a sous le capot.

Lors de la refonte de ce blog en août 2015, j'ai décidé de mettre en avant mes publications (articles essentiellement) dans les catégories et sur la page d'accueil. Comme dans beaucoup de thèmes payants "tendance", l'objectif est d'afficher une "image à la Une" (la "post thumbnails" en anglais) pour chaque publication afin de la faire apparaître joliment en front office (côté client), comme dans l'exemple ci-dessous.

Afficher l'image à la Une comme première image WordPress

Cependant, mon blog ayant déjà plus de 6 ans, je n'avais jamais inséré d'images à la Une, et je me voyais mal le faire pour l'ensemble des publications, j'ai donc trouvé une solution de secours pour afficher le plus souvent possible des images pour les lecteurs, en utilisant la première image des articles.

N.B. : code complet à la fin de ce tutoriel illustré ainsi qu'un zip à télécharger de la fonction d'affichage de la première image.

Étape n°1

Vérifier que la fonction n’existe pas déjà au sein des multiples fonctionnalités de WordPress.

J’ai donc attribué le nom get_first_image(); pour l’exemple.

if(!function_exists('get_first_image')) {
   function get_first_image($id, $size = "thumbnail") {
      // Code de la fonction
   }
}

Étape n°2

Récupérer les images relatives à la publication en cours grâce à l’ID ($attachments retourne un tableau de données).

// $id est le premier argument de la fonction
// $id correspond à l'ID de la publication en cours
$attachments = get_attached_media('image', $id);

Étape n°3

Faire une boucle pour chaque image trouvée afin de déterminer celle qui correspond le mieux à nos attentes.

foreach($attachments as $image) {
   // Code de la boucle (étape suivante)
}

Étape n°4

Récupérer la hauteur des tailles spécifiées dans WordPress, soit dans les tailles prédéfinies (« thumbnail », « medium »…), soit dans des tailles personnalisées (à l’aide de la variable globale $_wp_additionnal_image_size).

N.B. : on pourrait également le faire avec la largeur en adaptant le code, j’avais plus besoin de la hauteur dans mon cas…

// Récupération de la hauteur d'origine
if(in_array($size, array('thumbnail', 'medium', 'large', 'full'))) {
   $hauteur = get_option($size.'_size_h');
} else {
   global $_wp_additional_image_sizes;
   $hauteur = $_wp_additional_image_sizes[$size]['height'];
}

// Récupération de la hauteur de l'image courante
$imageSize = wp_get_attachment_image_src($image->ID, $size);

Étape n°5

Toujours dans la boucle, ajouter le code ci-contre pour récupérer l’image la plus adaptée à la taille désirée (ici, la hauteur la plus grande pour correspondre à la hauteur attendue en front office).

// On retourne l'image la plus grande ou l'image originelle au bon format
if($imageSize[2] < $hauteur) {
   $allImages[] = array($imageSize[2], $image->ID);
   rsort($allImages);
   // Retourne l'image la plus grande
   $result = wp_get_attachment_image($allImages[0][1], $size);
} else {
   $result = wp_get_attachment_image($image->ID, $size);
   break; // On stoppe la boucle dès qu'une image est trouvée !
}

Étape n°6

Juste après la boucle, retourner le résultat.

return $result;

Conclusion

Voilà, nous savons désormais comment récupérer la première image d’une publication WordPress, mais surtout l’image la plus adaptée à la taille désirée. Le code complet est présent ci-dessous et à télécharger un peu plus bas. J’espère que ce petit tutoriel aura pu vous aider un petit peu… :-)

// Retourne la première image d'un article
if(!function_exists('get_first_image')) {
	function get_first_image($id, $size = "thumbnail") {
		$attachments = get_attached_media('image', $id);

		foreach($attachments as $image) {
			// Récupération de la hauteur d'origine
			if(in_array($size, array('thumbnail', 'medium', 'large', 'full'))) {
				$hauteur = get_option($size.'_size_h');
			} else {
				global $_wp_additional_image_sizes;
				$hauteur = $_wp_additional_image_sizes[$size]['height'];
			}

			// Récupération de la hauteur de l'image courante
			$imageSize = wp_get_attachment_image_src($image->ID, $size);
			
			// On retourne l'image la plus grande ou l'image originelle au bon format
			if($imageSize[2] < $hauteur) {
				$allImages[] = array($imageSize[2], $image->ID);
				rsort($allImages);
				// Retourne l'image la plus grande
				$result = wp_get_attachment_image($allImages[0][1], $size);
			} else {
				$result = wp_get_attachment_image($image->ID, $size);
				break; // On stoppe la boucle dès qu'une image est trouvée !
			}
		}
		return $result;
	}
}

Télécharger “Fonction get_first_image() WordPress”get_first_image_wordpress.zip – Téléchargé 95 fois – 667 B