Petit rappel sur les images à la une dans WordPress
Les images à la une sont un moyen d’attacher une image à un post, une page ou custom_type. Ca permet par exemple d’afficher une vignette propre à chaque article dans une page où on liste les articles. Si les images à la une n’apparaissent pas dans l’admin de votre site, ajoutez cette ligne dans votre fichier functions.php
add_theme_support( 'post-thumbnails' );
Si vous ne précisez rien, les images à la une seront disponibles pour les posts et les pages. Vous pouvez aussi les activer uniquement pour les posts
add_theme_support( 'post-thumbnails', array( 'post' ) ); // Ajouter les images à la une sur les articles uniquement
Afficher une image à la une
Pour afficher votre image à la une, c’est très simple :
the_post_thumbnail(); // affiche la miniature par défaut
Par défaut, une image uploadée dans WordPress a 4 tailles. Pour afficher votre image à la une, passez une chaîne à la fonction the_post_thumbnail(), exemple
the_post_thumbnail('large');
Les valeurs possibles sont thumbnail, medium, large, full. Il peut être prudent de tester l’existence d’une image à la une avant de tenter de l’afficher…
if ( has_post_thumbnail() ) { // dans la boucle the_post_thumbnail(); }
Ne récupérer que l’url d’une image à la une
WordPress a prévu une fonction pour afficher l’image à la une et une pour récupérer le tag html complet sans l’afficher get_the_post_thumbnail(). Que faire si on ne veut récupérer que l’attribut src de l’image pour utiliser dans les css par exemple ?
$imageData = wp_get_attachment_image_src(get_post_thumbnail_id ( $post_ID ), 'medium');
echo $imageData[0]; // attribut src de l'image à la une
Note : Le tableau retourné contient 3 éléments, url, largeur, hauteur. Pour aller plus loin, rien ne vaut le Codex
42 Responses
Merci pour ce petit morceau de code que je viens de trouver directement en recherchant pour un client sur google (3 premiers liens sur le moteur de recherche) comment ajout « l’image à la une » d’une page x.
Je pensais tomber sur le manuel de wordpress en premier et non.
Modification apporté pour le client, qui travaille dans le secteur de la peinture & décoration, en 10 mins.
Vive le SEO.
Bonjour Michael,
Content que ça serve. Comme tu dis, c’est assez incroyable d’arriver avant le manuel et toutes les autres pages consacrées à WP…
A bientôt
bonjour, je rencontre un problème sur mon site en test. Lorsque j’insère une image dans une page, l’image se met automatiquement à la une, et du coup l’image à la une prend la place du header…
J’ai insérer le bout de code pour que l’image à) la une ne soit active que sur les articles, mais rien y fait…
Auriez-vous une piste?
Merci pour vos réponses.
Bonsoir Juliette,
Je vois pas trop d’où peut venir le problème… L’image qui se met automatiquement à la une, je pense qu’il y a problème dans le fichier php.
Pourrais-tu poster le code stp ?
A+
Un grand merci à toi ! C’est exactement ce que je cherchais et ça m’a bien servi pour l’un de mes sites.
Bonjour, dans quel fichier du template doit on integré ce morceau de code ?
Bonjour Cyril,
De quel morceau de code parles-tu ?
Le premier va dans functions.php comme indiqué. Les autres vont dans la page php qui contient the_loop, fonction centrale de Worpdress qui parcourt les articles dispos en fonction de la page affichée.
Dis-moi si ça te paraît clair 😉
Bonjour,
Merci pour ces infos.
Comment peut-on extraire le texte alternatif d’une image ?
Merci
Bonjour
Essaye
$(this).attr('alt');
si tu cliques sur l’image elle-mêmeBonjour,
Je souhaiterai pouvoir afficher une image à la une dans la page d’accueil de mon site (plus précisement dans le descriptif des derniers articles parus qui comporte un read more) mais pas dans l’article proprement dit, est ce techniquement possible ?
merci
Très intéressant. Par contre, comment on peut ajouter le lien vers l’article sur l’image ?
Merci
Il te suffit d’entourer l’image d’une balise avec le lien de ton article entre guillemets !
Super, merci beaucoup, voila un site qui ma aider beaucoup. !!!!
Un grand merci
Bonsoir,
J’ai un problème avec une « image à la une ».
Mon thème me permet de sélectionner un header différent pour chaque page du site via l’ « image à la une ».
Cette fonctionnalité fonctionne pour toutes les pages, sauf pour la page « blog », celle qui affiche les articles. Je ne comprends pas pourquoi… Lorsque je ne lui attribue pas l’affichage des articles, la page « blog » affiche bien l' »image à la une » sélectionnée en header.
Avez-vous une idée?
Merci.
Bonjour Jessica,
Savez-vous quelle page de votre thème affiche votre liste d’articles ? Habituellement c’est index.php ou home.php et je ne vois pas comment vous auriez pu attribuer une « image à la une » à ces pages qui n’apparaissent pas dans le back-office. Quel thème utilisez-vous ?
Dites-moi
Bonjour,
je débute complètement avec WordPress.
Je voudrais simplement créer un blog avec différents articles, chaque article ayant une image que je voudrais visible à la une.
J’ai utilisé GK Portfolio comme thème. Il me semblait qu’il faisait ce que je voulais automatiquement mais .. en fait naaaan ! ^^
J’ai regardé ce que vous proposiez ici et sur d’autres forums mais je ne comprend pas où placer les différentes lignes que vous donnez ..
Merci d’avance !! 😀
Vick
Bonjour,
Si votre thème ne propose pas automatiquement cette option, alors il faut utiliser mon tutotiel 😉 Les différents fichiers à modifier sont donnés. Ils se trouvent tous dans le dossier de votre thème :
A+
Bonjour !
Merci pour ta réponse ! Entre temps, j’ai réussi ! ^^
mais un autre problème est apparu … (ils n’arrivent jamais seuls .. )
L’image à la une s’affiche nickel pour tous les articles ce qui est parfait 🙂 mais le souci, c’est que je voudrais supprimer l’image à la une dans l’article lui même … En cherchant un peu, j’ai trouvé qu’il fallait que je supprime « the_post_thumbnail(); » à un endroit mais je n’ai pas vraiment trouvé où …
Bonjour,
Alors, il faut forcément chercher dans le dossier de ton thème 😉 Moi j’utilise TextWrangler (je suis sur Mac) pour rechercher la fonction dans tous les fichiers de mon thème. En général, c’est le fichier single.php dans ton dossier de thèmes. Essaye 😉
Bonne chance
Bonjour,
je cherche à centrer mon image à la une, est ce possible ? Elle apparait sur la gauche et ça m’embête.
Bonjour Isabelle
Je ne peux pas tester présentement mais je dirai qu’il faut centrer l’image dans son élément parent… A essayer avec un margin:0 auto; dans le parent. Ici on centre uniquement sur l’axe horizontal bien sûr.
Cordialement
Artcompix
Bonjour.
Je suis en train de reprendre un site qui m’a été confié (pour une association) et afin de le rendre plus dynamique, j’ai mis en place un slider sur la page d’accueil.
Dans ce slider apparaissent les 3 derniers articles d’une catégorie. Tout fonctionne correctement, je suis contente.
Afin que le slider soit attractif, il utilise l’ « image à la une » de chaque article. On ne peut pas utiliser les images insérées dans l’article. Jusque là, je veux bien.
Là où c’est embêtant, c’est que je ne veux pas que cette « image à la une » apparaisse au début de chacun de mes articles, ce n’est pas beau et cela vient en doublon avec les images insérées dans l’article.
Par conséquent, je souhaite « cacher » les images à la une dans mes articles mais qu’elles soient bien présentes de manière non visible afin que le slider les utilise.
J’ai beau regarder toutes les choses que vous avez expliquées, je ne m’en sors pas du tout, je n’arrive pas à masquer les images à la une.
Pouvez-vous m’aider ?
Cordialement.
Bonsoir
Le fait que l’image à la une s’affiche en début de vos articles tient au gabarit utilisé par votre thème. Donc, il faut trouver le nom du fichier php qui affiche vos articles et supprimer la fonction the_post_thumbnail();
Dites-moi si vous y arrivez
Cordialement
Artcompix
Bonjour.
Mon thème est un enfant de Themify Base.
Si je supprime toute la ligne concernant the_post_thumbnail les vignettes en début d’articles ne sont pas masquées.
Cordialement.
Bonsoir
Alors ce n’est pas le bon fichier que vous avez touché 😉 Êtes-vous sûre que c’est le bon fichier qui s’affiche ? Faites un echo(‘test’); qq part pour vérifier
Bonjour.
Pouvez-vous m’expliquer comment fonctionne ce test et où dois-je le faire SVP ?
Cordialement.
Il faut que le test soit à l’intérieur de balises php et à l’intérieur de la balise body pour être visible dans la page. Par exemple
Dans votre page après wp_header();
Dites-moi
Bonjour,
Savez-vous s’il est possible de supprimer l’Image à la Une de l’article sur les pages lorsque notre site est hébergé sur WordPress ?
Effectivement, nous devons créer un blog pour un projet scolaire, entièrement gratuitement (budget étudiant oblige), mais l’image qui se met en haut à gauche me dérange vraiment beaucoup..
Si vous avez des conseils, ou si c’est tout simplement impossible, n’hésitez pas à me répondre!
Merci d’avance 🙂
Bonjour Charlotte,
Je ne suis pas sûr mais ça m’étonnerait… Essayez d’aller voir dans les options du thème pour le personnaliser (Apparence > Personnaliser).
En tous cas, bon courage pour votre projet.
Bonjour,
Je souhaite ajouter une image a la une a mes article sur mon blog wordpress. Impossible de trouver le fichier functions.php.
Je n’ai pas crée le thème de mon blog moi même, c’était un tout fait de WordPress.
Merci pour votre aide !
Bonjour,
Je viens de créer mon second blog wordpress, mais impossible de trouver le fichier functions.php pour insérer une image a la une à mes articles.
J’ai pris un thème déjà existant, est-ce l’explication ?
Merci beaucoup pour votre aide !
Aurélie
Bonjour,
Réponse un peu tardive je l’avoue mais je n’ai pas reçu les notifiactions… Si tu ne trouves pas le fichier functions.php, alors il faut le créer et le mettre dans le dossier de ton thème.
Bonjour,
Je suis un peu perdu.
Avant la mise à jour par mon hebergeur, j’avais la possibilité d’intégrer une image à chaque création d’article (dans le pavé « image à la une »).
Aujourd’hui, je ne l’ai plus.
Je sais qu’il faut que j’aille dans le fichier functions.php mais où se trouve-t-il ?
Merci d’avance.
Bonjour,
Le fichier functions.php doit se trouver à la racine du dossier contenant votre thème. S’il n’y est pas, alors il faut le créer.
Bonjour,
Débutante avec WordPress j’aimerais savoir s’il est possible de conserver l’image à la une uniquement dans l’article et de définir une autre image pour la miniature qui s’affiche dans la page Home. Peut-être un pluging ?
Merci d’avance
Bonjour Sophie,
Oui, c’est possible mais il faut bidouiller dans ton thème (dans le code php).
Cordialement,
Artcompix
Bonjour.
On a un gros problème. Je bidouille parfois l’éditeur sans être un spécialiste, mais je sais récupérer mes erreurs.
J’ai simplement ajouté votre ligne
dans mon fichier functions.php, comme vous le proposez. Depuis plus moyen d’accéder à mon site, au wp-admin, rien. Tout est planté. Mon site était terminé, la dernière erreur venait de l’image à la une… Là, je désespère.
J’ai donc maintenant une erreur 500 lors de tentative d’accès au site. Ca ne sent vraiment pas bon. Si j’étais vous, je modifierai cet article pour que plus personne ne se retrouve dans cette situation. Et je vous en prie, aidez-moi 🙂
J’utilise le thème blackoot-lite.1.1.4, directement installé sur wordpress.
Je ne sais plus accéder à quoi que ce soit. Ca me rend dingue…
Bonjour
Ne vous affolez pas, le site peut être down pour beaucoup de raisons. Commencez par retirer le code que vous avez ajouter à functions.php et on fait le point ensuite.
Bonjour comment faire en sorte que l’image à la une accepte un lien youtube