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 !

27 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.

  7. Stéphanie

    Bonjour,

    Je vous remercie de traiter le sujet. Malheureusement je n’arrive à ne rien remonter mise à part afficher ma vignette et ouvrir ma lightbox. Mais dans ma lightbox les images attachées à l’article en question ne remonte. Il m’affiche toujours l’image à la une..Je m’arrache les cheveux ! Je vous remercie pour votre aide.
    Bon week end.
    Stéphanie

    http://pastebin.com/NXJVg21N

    1. Stéphanie

      Bonsoir,
      Merci Aurélien pour votre aide. Finalement j’utilise pour la gestion de mes albums photos un custom post type.
      Mais mon soucis reste identique.. Si je n’affiche que la première image attachée pour chaque galerie sur ma homepage, dans ma lightbox ne ressortira aussi que la première image…c’est ce paramètre « ‘numberposts’ => 1, » qui m’embête….Je ne vais plus avoir de cheveux si cela continue !!! lol

      Voici mon code :
      [php]
      $future_posts_query = new WP_Query(‘post_type=galerie&post_status=publish&showposts=30&order=ASC’);
      if ($future_posts_query->have_posts()) : while ($future_posts_query->have_posts()) : $future_posts_query->the_post();

      $attachments = get_posts( array(
      ‘post_type’ => ‘attachment’,
      //’posts_per_page’ => -1,
      ‘post_parent’ => $post->ID,
      ‘numberposts’ => 1,
      ‘exclude’ => get_post_thumbnail_id()
      ));

      if ( $attachments ) {
      foreach ( $attachments as $attachment ) {

      //echo $count = count($attachments);
      //echo wp_get_attachment_link( $attachment->ID);
      echo wp_get_attachment_link( $attachment->ID);

      }

      }

      ?>

      [/php]

      1. Aurélien Denis auteur de l’article

        Bonjour Stéphanie,

        tout d’abord, merci d’utiliser un service tiers comme Pastebin pour partager efficacement du code.

        Ensuite, l’argument numberposts est en conflit avec posts_per_page. C’est soit l’un soit l’autre avec une préférence pour le second, bien plus courant. Je pense qu’il suffit de supprimer la ligne relative à 'numberposts' => -1 dès lors pour corriger votre souci.

        1. Stéphanie

          Bonjour Aurélien
          Merci beaucoup pour votre aide.
          Et bien non j’ai supprimer selon vos conseils ‘numberposts’ => -1 et le résultat est toujours le même.
          Lorsque je clique sur ma vignette, j’en ai toujours qu’une seule qui ressort dans ma lightbox.
          Merci d’avance pour votre aide.
          Cdt,
          Stéphanie
          Voici de nouveau mon code :
          [php]
          have_posts()) : while ($future_posts_query->have_posts()) : $future_posts_query->the_post();

          $attachments = get_posts( array(
          ‘post_type’ => ‘attachment’,
          ‘posts_per_page’ => 500,
          ‘post_parent’ => $post->ID,
          ‘post_mime_type’ => ‘image’,
          ‘exclude’ => get_post_thumbnail_id()
          ));

          if ( $attachments ) {
          foreach ( $attachments as $attachment_id => $attachment ) {

          //echo $count = count($attachments);
          //echo wp_get_attachment_link( $attachment->ID);

          wp_get_attachment_url( $attachment->ID);

          }

          }

          ?>

          <a rel="nofollow" href="ID);?> » class= »fancybox » title= » »><img width="200" height="180" src="ID, ‘small’);?> »>

          [/php]

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX