Récupérer la première image attachée dans une boucle WordPress

Un précédent tutoriel évoquait une technique pour récupérer et afficher la première image d’un article sous WordPress via PHP. Je vous propose une autre méthode reposant sur la première image envoyée dans la bibliothèque de médias.

Partons du principe que vous avez envoyé des images via l’outil de mise en ligne de l’éditeur de WordPress. Jusque là rien de plus classique !

Imaginons à présent que vous souhaitiez afficher cette première image comme miniature sur votre page d’accueil et donc sans utiliser le module Image à la une de WordPress. Cela est d’autant plus utile si vous utilisez ce système avant l’apparition de ce module et qu’il serait donc chronophage d’éditer tous vos articles.

Méthode basée sur la première image envoyée via l’éditeur

Etant donné que les images envoyées sous WordPress sont le plus souvent associées à un article – sauf si vous passez directement par la bibliothèque de Médias, il nous faut donc aller récupérer cette dernière.

Pour ce faire, nous allons utiliser les lignes de code suivantes à insérer par exemple dans le fichier index.php à l’intérieur de la boucle de WordPress :

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >

<?php
$attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
if ( ! is_array($attachments) ) continue;
$count = count($attachments);
$first_attachment = array_shift($attachments);
?>
<div class="left"><?php echo wp_get_attachment_image($first_attachment->ID , 'thumbnail'); ?></div>
</a>

Comme vous le voyez, j’encadre le tout d’une balise de lien pour faire pointer vers l’article associé à l’image. Je vais ensuite chercher la première image insérée dans le billet puis je l’affiche avec la fonction wp_get_attachment_image que j’encadre d’une balise div pour la positionner sur la gauche.

Le paramètre thumbnail permet de sélectionner la taille dite miniature dont les dimensions sont fixées dans les réglages du back office de WordPress. Vous pouvez donc choisir d’autres tailles.

J’utilise cette technique sur le site de tutoriels informatiques Protuts.net pour afficher les tutoriels récents en page d’accueil. L’image sur l’accueil et la même que la première de l’article lié.

Méthode combinée avec le module Image à la une

Un deuxième bout de code proposé par Jonathan Buttigieg de chez GeekPress consiste à vérifier dans un premier temps si une image à la une est présente et si tel n’est pas le cas de récupérer la première image attachée :

<?php
// On vérifie si l'article contient une Image à la Une
if( has_post_thumbnail() ) { ?>

<div class="left">

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail(); ?></a>

</div>
<?php
}
else {
// Si l'article n'a pas d'Image à la Une, on récupère la 1ère image attachée
$attachments = get_children(
array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => 1
)
);
if( $attachments ) {
foreach( $attachments as $attachment ) :
?>
<div class="left">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php echo wp_get_attachment_image($attachment->ID , 'thumbnail'); ?></a>
</div>

<?php
endforeach;
}
}
?>

Merci de sa collaboration !

Une fonction de WordPress très utile nous permettant de se passer du module Image à la une dont l’usage n’est pas toujours pertinent à utiliser. A utiliser !

22 commentaires

  1. GeekPress

    Tiens pendant que j’y pense, pour faire un truc bien clean, il faudrait check si il existe pas une Image à la Une avant de choisir la 1ère image attaché.

    Imaginons que j’ai mis une Image à la Une mais elle correspond à la 3ème image attachée. Ca ne sera pas la bonne image d’afficher.

          1. GeekPress

            Pas de problème.

            Je m’absente toute la journée, dès que je te rentre ce soir, je fais le code et je te le transmets par mail.

  2. Mat

    Bonjour,
    Vu les fautes, je lis même pas l’article!! Une faute dans le titre : « une » boucle. Et dans la première phrase : « Un précédent tutoriel évoqué » -> évoquait
    La technique, c’est bien, mais encore faut-il écrire correctement.

        1. Muetdhiverr

          on dit « quel que soit le » et non pas « quelque soit le ».
          Effectivement, un peu d’indulgence et tout ira pour le mieux dans le meilleur des mondes possibles !

  3. Frederique

    Il m’est impossible de laisser des commentaires sur FrancoisDeSouche.

    Quelqu’un aurait il la bonté de m’expliquer le pourquoi du comment de la chose ?

    D’avance , merci

  4. nicolas

    Bonjour,

    Désolé je pense ne pas poster au bon endroit, j’ai une petite question : Y a t il un moyen de mettre une couleur de fond sur un widget text sans l’appliquer à l’ensemble des widgets texte ?

    En gros j’ai un texte dans une sidebar que j’aimerai faire ressortir sans l’appliquer à l’ensemble.

    Merci par avance de votre réponse

  5. Akaralda

    Bonjour et merci pour l’astuce, question :
    Est-ce possible de faire exactement la même chose en enlevant le lien vers l’image ?
    En faite, récupérer uniquement l’image (que je passerai en background par exemple) ? Merci d’avance

  6. Crealp

    Bonjour Aurélien,

    Je suis tombé sur plusieurs de tes articles en cherchant à résoudre un problème sur les images WordPress.
    Malheureusement malgré plusieurs essais effectués grâce à tes articles je n’arrive pas à parvenir à un résultat.

    Voici donc ma question : comment peut-on récupérer l’ID d’une image à partir de son URL ?
    Ou encore mieux : comment récupérer le titre et la description d’une image à partir de son URL ?
    Bien entendu je n’ai pas l’ID de cette image.

    Merci d’avance pour ta réponse.

Laisser un commentaire