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

47 commentaires
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.

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.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

47 commentaires
  1. 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.

    1. Aurélien Denis auteur de l’article

      Ce code ne fonctionne que pour du WordPress. 😉

      1. Damien9m

        Mon site fonctionne bien avec un thème wordpress. D’après mes recherches, je dois modifier les codes de fonction.php et du plugin, mais le résultat n’est pas là.
        liens des codes : http://pastebin.com/2v9iteF9 (Merci pour l’info du site)

        1. Damien9m

          une petite relance pendant les vacances ! 😀

          1. Aurélien Denis auteur de l’article

            Bah en fait je comprends pas ton problème car tout est dit dans le tutoriel…

  2. 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!!

    1. Aurélien Denis auteur de l’article

      Hum non désolé…

  3. 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 🙂

    1. Aurélien Denis auteur de l’article

      La dernière image de l’article n’est-elle pas celle envoyée en premier dans la bibliothèque ?

  4. François

    Merci pour code, il m’est bien utile pour assigner automatiquement des images à la une à des custom post types créés depuis le front par des utilisateurs 🙂

  5. 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 🙂

  6. 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 "”;} ?>

  7. christophe

    petit souci je redonne le code
    [code]

    Derniers articles

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

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

    [/code]

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

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

    1. Aurélien Denis auteur de l’article

      Difficile de répondre sans voir le code mais si tu obtiens l’URL et bien
      utilises la fonction dans un attribut src pour la balise img. 😉

  10. 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 !

  11. 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,

  12. 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 !

  13. 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 !

    1. Aurélien Denis auteur de l’article

      Je pense que ton thème supporte les images à la une que l’on peut ajouter directement via le module du même nom accessible depuis l’éditeur d’articles.

  14. 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….

  15. 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”

      🙂

  16. 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…

    1. Aurélien Denis auteur de l’article

      Oui cela agit de la même façon comme tu peux en voir un exemple sur http://protuts.net/ où les images sont automatiquement reprises sur la page d’accueil à partir de l’article.

      1. Batmoine

        Tu viens de sauver la vie a 3900 articles ^^

        merci !

  17. gwen

    ABRACADABRA!

    1. Aurélien Denis auteur de l’article

      Ah pardon, préfères passer par pastie qui ne nécessite pas de se connecter. Tu colles puis tu soumets l’URL ici ou sur un forum. 😉

  18. 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 😉

    1. Aurélien Denis auteur de l’article

      Oui j’ai supprimé le code. 😉

      Par contre, je n’ai pas compris la question précédente ?

  19. gwen

    Bonjour, pouvez vous m’aidez à trouver la boucle car je n’ arrête pas de faire des fatal erreur..merci beaucoup..

    CODE SUPPRIME CAR TROP LONG.

    1. Aurélien Denis auteur de l’article

      Merci d’utiliser un service comme http://pastebin.com/ pour copier / coller du code. 😉

  20. 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. 😉

  21. GeekPress

    Pourquoi ne pas se servir de l’image à la une ?

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

            Je comprends mieux 🙂

    1. Aurélien Denis auteur de l’article

      OK, merci de l’info. 🙂

Laisser un commentaire