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.
Podcast: Télécharger (Durée: 3:23 — 0.0KB)
A propos de l'auteur
Aurélien Denis est le fondateur du projet WordPress Channel proposant tutoriels et podcasts librement téléchargeables. En 2010, il fonde Neticpro, une agence Web spécialisée WordPress. Il est aussi co-fondateur du site Protuts.net (tutoriels PC/Mac/Linux) et community manager pour l’Imagine Cup 2011/2012, une compétition mondiale organisée par Microsoft.
WordPress 3.5 – Un CMS pour créer et gérer blogs et sites Web
RT-Theme 17, traduction française
Maven Hosting, 12 mois d’hébergement
Themetick, traduction française
Il y a une version corrigé de cette fonction dans http://core.trac.wordpress.org/ticket/17267(regarde les patchs)
En fait, le code que tu utilises peut poser des problèmes de sécurité (pas très graves) dans certains cas.
OK, merci de l’info.
Pourquoi ne pas se servir de l’image à la une ?
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.
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 ?
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 ?
Je comprends mieux
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
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.
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.
Merci d’utiliser un service comme http://pastebin.com/ pour copier / coller du code.
Qu’elle Syntax pour http://pastebin.com?
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
Oui j’ai supprimé le code.
Par contre, je n’ai pas compris la question précédente ?
Oups,je veut dire comment utiliser http://pastebin.com une fois avoir copier/coller le script ?
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.
ABRACADABRA!
http://pastie.org/private/e5ez1jzj4ilpbzsqkuow
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…
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.
Tu viens de sauver la vie a 3900 articles ^^
merci !
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 ?
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 »
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….
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 !
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.
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.
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 !
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,
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 !
Peut-être que ce tutoriel sur la récupération de la première image envoyée correspond à votre question.
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
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.
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
petit souci je redonne le code
[code]
Derniers articles
query('showposts=5');
?>
have_posts()) : $recentPosts->the_post(); ?>
<a href="" rel="bookmark">
by
[/code]
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 " »;} ?>
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
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