Récupérer la première image d’un article via PHP pour WordPress

Si vous envisagez d’afficher une image sur votre page d’accueil ou de catégorie, mais que vous n’utilisez pas l’outil de miniatures incorporé dans WordPress et encore moins un script comme timthumb ou même un custom field alors il vous reste l’utilisation de cette fonction PHP. Testé et utilisé sur de nombreux sites personnels !

Cette fonction PHP peut être insérée notamment dans un fichier home.php ou index.php à l’intérieur d’une boucle.

Elle aura pour effet de récupérer la première image présente dans votre article. De cette manière, vous pourrez l’utiliser comme miniature sur votre page d’accueil par exemple.

Vous devez tout d’abord ajouter ces lignes de code dans le fichier functions.php :

<?php function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
?>

Vous remarquerez qu’il est possible d’indiquer une image par défaut à la ligne :

$first_img = "/images/default.jpg";

Il nous faut ensuite identifier la zone où commence la boucle (loop) de WordPress puis appeler la fonction suivante :

<?php echo catch_that_image() ?>

Ce tutoriel est certes un peu technique pour le néophyte mais j’ai trouvé intéressant de partager cette technique avec la communauté francophone de WordPress dont le tutoriel source est l’œuvre de Jean-Baptiste Jung de WPRecipes.

47 commentaires

    1. Aurélien Denis auteur de l’article

      Le gros avantage est de ne pas avoir à utiliser la fonction d’image à la une qui prend du temps.

      De même, si l’on utilisait WordPress avant l’apparition de l’image à la une, il faut éditer à nouveau tous les articles… très fastidieux !

      Cette fonction est donc un gain de temps sérieux.

      1. GeekPress

        Est-ce que parser l’ensemble d’un fichier utilise moins de ressources qu’une requête SQL ?

        De toute façon, je doute fort que l’on récente la différence côté front-office, on parle en milliseconde

        « De même, si l’on utilisait WordPress avant l’apparition de l’image à la une, il faut éditer à nouveau tous les articles… très fastidieux ! »

        Je ne comprends pas ce que vous voulez dire. Pourquoi doit-on éditer nos articles si on passe par la loop de WP ?

        1. Aurélien Denis auteur de l’article

          L’ajout d’une image via le module image à la une nécessite une bonne minute en termes de temps pour l’utilisateur – je ne parlais pas de l’aspect performances.

          Pour le second point, si tu n’utilisais pas les images à la une avant son apparition, il te faut modifier chaque billet pour en ajouter une manuellement.

          Suis-je plus clair dans mon propos ?

  1. christophe

    bonjours,

    où ce trouve le fichier loop-index.php,
    car j ai bon chercher dans les fichiés du thème et de wordpress mais rien à faire j’arrive pas à le trouver.

    Pouvez vous m’aider ?

    merci

    1. Aurélien Denis auteur de l’article

      Si vous n’utilisez pas le thème par défaut, il s’agit probablement du fichier home.php ou index.php qui contient la boucle de WordPress affichant la liste des articles. Cela est précisé en haut du tutoriel.

  2. gwen

    oulala! le code n’est pas bon, j’ai pourtant copier/coller désolé vous pouvez tout effacer..même celui-ci..encore une fois désolé..Heureusement que vous modérez

  3. Batmoine

    Si j’ai bien compris, ce script permet (dans le cas ou l’on utilisais pas la fonction « image a la une ») de récupérer toutes les première image de tous les articles WordPress et de les définir comme « image a la une » par défaut, c’est bien ça ?

    Si c’est ça, ça m’intéresse très fortement…

  4. Batmoine

    Bon en fait je viens de regarder et mon problème est un peu plus compliqué que ça… En fait, j’ai 3900 articles, tous avec une image directement incluse dans le post (donc pas « image a la une »). Le truc, c’est que j’ai mis en place un theme tout nouveau tout beau, avec gestion des thumbnails via « Timthumb » (intégré au thème). J’ai essayer la modif que tu as proposé dans ton article, sans succès… Ya pas un moyen de faire un traitement par lot pour que toutes les premières images des articles soient basculées en « image a la une » ? même quite a conservé l’image originale dans l’article ?

    1. Batmoine

      J’me réponds a moi même Je viens de trouver la perle rare qui fait exactement ce que je veux : l’extension « Auto Post Thumbnail »

  5. val88

    Bonjour je suis en train de créer mon propre thème pour wordpress et j’ai ajouté d’après tes conseils la fonction pour les photos. Mais j’ai un problème, l’adresse des photos apparaît sous l’article mais pas la photo alors que quand je vais dans l’article les photos sont là… Je ne comprends pas pourquoi la photo n’apparaît pas sous les articles….

  6. Robin

    Hello,
    Je suis néophyte dans le code et avec si peut d’explications je n’arrive malheureusement pas à faire fonctionne cette modification qui m’intéresse énormément ! Je suis en train de monter un petit Blog privée et multi-utilisateur pour partager ses photos entre amis.

    Si quelqu’un (l’auteur du post?) à quelques minutes pour adapter ce système dans ce thème : http://wpshower.com/themes/imbalance/
    Ça serait vraiment top !

    Merci d’avance !

  7. Robin

    Merci pour cette réponse rapide.
    L’idée étant de ne pas utiliser l’interface WordPress mais d’avoir une génération automatique des images à la Une, ça m’aiderai grandement.
    On cherche à poster des « articles » seulement par envoie de mail avec le plugin Postie (qui récupère des images sur une adresse email).
    Le problème, c’est que les thèmes gallery ou portfolio sympa utilisent forcément le système d’image à la une qui oblige de passer par l’interface WordPress =(

    Merci pour votre aide.

    1. Robin

      Je viens aux nouvelles :

      Le plugin auto-post-thumbnail m’a entièrement donné satisfactions !
      Une recherche en anglais plutôt qu’en français m’a menée vers le bon chemin =)

      Merci !

  8. RaBoLo

    Bonsoir Aurélien,
    Tout d’abord, merci à toi pour cette article claire est précis.
    J’aimerais savoir, je souhaite récupérer une dizaine d’article d’un de mes sous site afin d’afficher sous forme d’une liste de titre sur mon site principal. A cette occasion j’aimerais afficher seulement la première image de cette liste. ma question : peux t on appliquer ta technique afin d’afficher une et seul image si oui que faut t’il modifier dans la fonction.
    j’ai testé le script et il m’affiche bien une image de chaque article.
    Merci d’avance pour tes conseils.
    Cordialement,

  9. Speedover

    Merci pour cet article, vous savez si il est possible d’utiliser une taille image définie ? Genre l’adresse de l’image du post qui est récupérée correspond à la miniature de l’image en question. C’est pour avoir des images de même tailles sans avoir à les déformer.

    Le site existe déjà et même si on peut lui rajouter la possibilité d’utiliser une image à la une, votre code permet d’affecter une image pour les articles déjà existants.

    merci d’avance !

  10. christophe

    bonjour aurélien

    merci pour ce tuto, j’ai essayé de faire la même chose pour ajouter une image dans les 5 derniers articles (sidebar) dans l’esprit Lucid Theme et a la place de l’image j’ai l’url de l’image qui s’affiche ?

    j’utilise nextgen-gallery pour insérer mes images.

    je te remercie par avance.
    christophe

  11. christophe

    merci aurélien pour ta réactivé
    voici le code dans function.php :
    function catch_that_image() {
    global $post, $posts;
    $first_img =  »;
    ob_start();
    ob_end_clean();
    $output = preg_match_all(‘//i’, $post->post_content, $matches);
    $first_img = $matches [1] [0];

    if(empty($first_img)){ //Defines a default image
    $first_img = « image1/default.jpg »;
    }
    return $first_img;
    }

    Et celui des 5 dernier articles dans le sidebar.php, j’ai juste ajouté ‘thumbnail’ pour éviter que la photo soit en taille réelle.

    Derniers articles

    query(‘showposts=5’);
    ?>

    have_posts()) : $recentPosts->the_post(); ?>

    <a href=" » rel= »bookmark »>
    by

    Je n’ai pas compris le sens ta phrase par « utiliser la fonction dans un attribut src pour la balise img  »

    si j’utilise la fonction des images a la une les vignettes s’affichent correctement devant les 5 derniers articles.

    Je te remercie par avance,
    christophe

  12. christophe

    petit souci je redonne le code
    [code]

    Derniers articles

    query(‘showposts=5’);
    ?>
    have_posts()) : $recentPosts->the_post(); ?>

    <a href=" » rel= »bookmark »>
    by

    [/code]

  13. christophe

    bonsoir Aurélien
    le problème est résolu, petite modification dans l’appel de la fonction, maintenant les vignettes s’affichent correctement.

    <?php $image = catch_that_image();
    if ($image == ""){}else
    echo " »;} ?>

  14. Nathalie

    Bonjour,

    Je me permets de répéter qu’il faut encadrer le code avec :
    <img src="http://adressedevotreblog.com » style= »float: left; » width=’xxx’ height=’xxx’ />

    L’image s’affiche et on peut régler les différents styles, la taille…

    Merci Aurélien pour cette fonction bien pratique, qui m’a aidée à personnaliser ma partie « blog ». Continuez votre site est une mine

  15. Mikael

    Hello, j’ai testé avec un grand intérêt ce code car j’en ai justement besoin. (ceci dit les infos sur ton site son truc utile )

    J’ai un petit soucis, le code (copier tel que) ne m’affiche pas la 1ere image mais… la dernière qu’il trouve dans mon article (j’utilise WP 3.7), comme s’il parcourait l’ensemble des images de l’article et ne conservait dans $first_img que la dernière image qu’il trouve… une idée ? ca m’aiderait bien

  16. Tonnykidd

    Bonjour!
    Je viens vers vous parceque c’est exactement le genre d’article que je cherchais.
    Je voudrais savoir si vous saviez comment faire pour que l’image du dernier article s’affiche comme une image à la une et qu’en suite, lors de la publication d’un autre article, que l’image redevienne normale.
    Merci.
    Parfait votre tuto, au passage!!

  17. Damien9m

    Bonjour Aurélien et merci beaucoup pour cette vidéo claire.

    Cette fonction est elle exploitable pour récupérer l’image à la une d’un article extérieur à ton site internet ? donc, image extérieure à la bibliothèque média. exemple : facebook ou google actualités.

    Je m’explique. Je tente sans succès d’insérer ce code sur mon thème wpeddit, la version wordpress de reddit.
    Utilisation pratique :
    Quand un utilisateur ajoute un article, il doit coller l’url de l’article dans un input puis télécharger l’image dans « thumbnail ». J’aimerais supprimer l’option téléchargement de thumbnail pour qu’automatiquement, l’image à la une de l’article extérieure soit retrouvé et insérée visuellement dans la présentation de l’article.

    D’avance merci pour ton aide qui pourrait m’être précieuse.

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