WordPress propose par défaut 3 tailles d’images, configurables depuis l’interface d’administration. En tant que développeur de thèmes, on va pouvoir en définir de nouvelles qui seront optimisées en fonction du design de celui-ci.
Sommaire du cours
Les images mises en avant
Les images mises en avant permettent d’ajouter un visuel à votre publication. Sur Capitaine WP chaque cours ou article commence par une image mise en avant, en haut, que j’ai piochée sur Unsplash.
Activer les images mises en avant via functions.php
Dans le cours sur la préparation des bases du thème, on avait déjà vu comment activer la fonctionnalité grâce à la fonction add_theme_support(). Il suffit de coller ce code dans le fichier functions.php :
Cela a pour but de rajouter la metabox Image mise en avant dans l’interface de l’éditeur :
Afficher l’image mise en avant dans votre template
Et pour afficher cette image dans votre thème, il suffit d’appeler la fonction the_post_thumbnail() dans archive.php ou single.php par exemple, à l’intérieur de la boucle WordPress :
Pas besoin de créer la balise <img> car la fonction la crée pour nous. Contrairement à ce que l’on pourrait croire, elle ne renvoie pas juste l’URL de l’image.
Voici le résultat dans mon HTML :
Eh bien, c’est plutôt chargé, mais c’est parce que WordPress va automatiquement écrire les srcset et sizes, afin de proposer plusieurs formats au navigateur, pour qu’il sélectionne la taille la plus adaptée à l’écran. On en reparle juste après.
Configurer les tailles d’images
Dans WordPress, lorsque vous importez une image dans la bibliothèque de médias, elles sont automatiquement traitées et créées en tailles intermédiaires que vous pourrez utiliser pour les images mises en avant, mais aussi dans vos articles ou vos templates.
Vous pouvez personnaliser ces tailles dans l’administration : Réglages > Médias.
On constate que l’on peut modifier 3 tailles, et 3 tailles seulement :
- Le format miniature est carré par défaut, et sert à l’affichage des miniatures dans la bibliothèque de média. Je vous conseille donc de ne pas toucher à ce réglage ;
- La taille moyenne est configurée sur 300px maximum ;
- La taille grande est configurée sur 1024px maximum.
Je vous conseille de régler la taille moyenne en 1200px, et la grande taille en 1920px.
Du coup, si vous voulez redimensionner les images déjà présentes dans votre bibliothèque de média, il faudra utiliser une extension comme Regenerate Thumbnails :
Recrée les miniatures pour une ou plusieurs de vos images téléversées. Utile si vous changez de tailles d’images ou de thème.
Elle est très simple d’utilisation et permet de redimensionner en masse les images. Il propose en plus de supprimer les anciennes tailles devenues caduques.
Pour rappel, les images sont accessibles depuis la bibliothèque de médias (menu Médias dans WordPress) mais elles sont physiquement stockées dans le dossier wp-content/uploads/<année>/<mois>/ :
On voit pour chaque image son équivalent en 1024px, 300px et 150px. WordPress a ajouté un suffixe à la fin des noms de fichiers ce qui donne : <nom>-<largeur>x<hauteur>.jpg.
D’ailleurs, ça ne prend pas trop de place de créer tous ces formats intermédiaires ? Bien entendu, ça prend plus de place que si on n’avait gardé qu’une image. De plus, certaines images ne serviront jamais dans certains formats.
Mais aujourd’hui, avec des hébergements dont la capacité est quasiment illimitée, vous n’avez plus à vous soucier de cela !
C’est quoi le srcset des images ?
Comme on a pu le voir, la balise <img> fournit les attributs srcset et sizes en plus du classique src.
C’est en fait une norme HTML5 pour améliorer l’affichage des images dans l’ère du web responsive et des périphériques aux multiples résolutions d’écran.
Son but est de permettre d’indiquer plusieurs tailles d’images au navigateur afin qu’il choisisse la plus adaptée en fonction de la taille de l’écran : Inutile de charger une image de 2000px de large sur un mobile qui n’a que 768px. Cela fait moins d’octets à charger, pour un affichage plus rapide, surtout sur des connexions mobiles lentes.
WordPress tire parti de cette technique lorsqu’il affiche une image dans une publication ou une image mise en avant. Il va récupérer toutes les tailles définies sur le site afin de les proposer au navigateur. Celui-ci optera pour la plus adaptée :
Le fonctionnement de cette technologique est assez simple :
- Dans l’attribut
scrset, WordPress liste toutes les tailles d’images, et indique leur largeur (300w, 1024w…) ; - Dans l’attribut
sizes, WordPress indique la plus grande taille de l’image.
Les tailles cachées pour le responsive
Et du coup cette taille à 768px, elle vient d’où ? C’est WordPress qui la crée automatiquement depuis la version 4.4 afin d’être sûr d’avoir un format adapté aux smartphones et tablettes.
Depuis, on a même d’autres tailles créées automatiquement :
- Medium Large : 768px ;
- 2x Medium Large : 1536px ;
- 2x Large : 2048px ;
- Scaled: 2560px.
Quelle compatibilité avec les navigateurs ?
Au niveau de la compatibilité, on monte à 90% de compatibilité auprès des navigateurs d’après CanIUse, ce qui est pas mal, mais Internet Explorer et Edge jusqu’à la version 15 ne prendront pas cet attribut en compte.
Au pire, si le navigateur ne comprend pas les srcset, il aura toujours l’attribut classique src. L’image n’aura pas une taille optimisée mais au moins, elle s’affichera.
Déclarer de nouvelles tailles d’images
Bon, et si les 3 tailles d’images proposées par défaut ne suffisent pas ? Et bien vous allez pouvoir en créer d’autres grâce au functions.php !
La fonction set_post_thumbnail_size() permet de définir la taille des images mises en avant. Cette taille sera donc utilisée par défaut par the_post_thumbnail().
Le premier paramètre est la taille en largeur que doit avoir l’image, le second la hauteur maximale (passez ce paramètre à 0 pour ne pas limiter) et le dernier paramètre, s’il est passé à true permet de découper l’image pour se conformer à ces dimensions exactes.
Pour votre propre utilisation dans le thème, ou via les articles, vous pouvez ajouter autant de tailles que souhaitez grâce à add_image_size(). Le premier paramètre est le nom à donner à votre taille d’image. (Évitez large, medium, medium-large, et thumbnails car ils sont déjà utilisés par WordPress).
Essayez de téléverser une image sur votre site, et jetez un oeil à votre dossier uploads :
Mon image est désormais déclinée en 8 formats : l’originale, les 3 de WordPress par défaut, la version responsive en 768, le format pour les images mises en avant et mes deux tailles sur mesure.
Utiliser les tailles dans vos templates
Pour appeler une taille d’image spécifique, c’est tout simple. Il suffit d’indiquer le nom de l’image que vous souhaitez afficher en paramètre :
Et le tour est joué !
Pour donner un peu de contexte, on va voir plus tard que l’on peut créer des Custom Post Types, ou types de publications personnalisées, lorsque les articles ou les pages ne suffisent plus.
On créera par exemple un Portfolio. Et on voudra que les images mises en avant dans ce portfolio soient carrées, alors que pour les articles du blog, elles auront le format défini par set_post_thumbnail_size().
Vous pourrez aussi utiliser ces tailles d’images lorsque l’on fera des champs image avec ACF (Advanced Custom Fields). Mais ça, c’est pour plus tard !
Utiliser les tailles dans vos articles ?
Lorsque vous utilisez le bloc image dans l’éditeur visuel, vous pouvez afficher la taille d’image à afficher par défaut :
Ça alors ! Mes tailles d’images n’apparaissent pas ! C’est voulu par WordPress. Mais en fait, on n’a pas à s’en soucier. Comme on l’a vu précédemment, le srcset va permettre de sélectionner l’image la plus adaptée, donc le rédacteur n’a pas besoin de se soucier de ce réglage !
À la limite, vous pouvez régler sur Grande pour ne jamais proposer le format original (qui peut être très lourd selon la photo importée).
Pour conclure, les tailles d’images personnalisées ne servent qu’au développeur dans le template.
Mine de rien, il y avait beaucoup à dire sur les images ! Et encore, on n’a pas parlé de l’optimisation des images. On abordera cet aspect très important un peu plus tard dans la formation, dans une partie dédiée aux performances d’un site. On verra que l’optimisation des images permet de faire économiser jusqu’à 80% du poids d’une page web.
Le prochain cours abordera les menus et le moteur de recherche du CMS.
Cyrielle
Le 3 décembre 2022
Cette partie du cours ne fonctionne pas de mon côté et je ne suis pas sûre de la raison.
Lorsque je veux téléverser une image dans le wordpress, on m’affiche une erreur : « Une erreur est survenue lors du téléversement. Veuillez réessayer plus tard. »
Je n’arrive pas à savoir si c’est un problème d’accès à la base de données (les images que j’ai téléversées apparaissent bien dans le fichier uploads, mais pas dans la bibliothèque de médias) ; ou si j’ai simplement mis le code à la mauvaise place dans les fichiers archive.php et single.php.
Serait-il possible d’avoir plus de précision d’à quoi devrait ressembler les fichiers archive et single à ce stade du cours ?
Merci beaucoup !
Maxime BJ
Le 3 décembre 2022
Dans un premier temps, essaie de te déconnecter du site et te reconnecter. Si tu es en local, ferme le serveur local et relance le.
Si ça ne corrige pas le souci. Retire tous les codes PHP que tu aurais ajouté dans ton thème.
Et désactive les extensions.
Ça ressemble à un problème de droits. Mais en général les hébergeurs classiques ne posent pas de souci à ce niveau-là pourtant !
Don mati
Le 16 décembre 2022
Super, grace à la doc WordPress j’ai pu compléter ton code et avec the_post_thumbnail( ‘thumbnail’ ); avoir des images qui s’affichent dans des tailles raisonnables. Avec le nouveau Gutenberg c’est un peu compliqué de gérer la fameuse « image mise en avant » dans les articles, àa devient un bloc, tu vas devoir faire des mises à jour de ton super cours.
Maxime BJ
Le 16 décembre 2022
Il faudra en effet que j’ajoute une partie dédié au Full Site Editing !
Jean-Gabriel
Le 22 novembre 2023
Merci pour cet article très clair.
Je rencontre un soucis différent mais peut-être lié.
Dans mon theme Twenty Twenty Three, lorsque je sélectionne une image mise en avant pour un article, celle-ci s’affiche parfaitement dans la liste de mes articles, avec le texte lire la suite etc… En revanche elle est trop grande dans mon article.
J’ai donc modifié la taille de la zone d’image dans le thème de la page article, j’ai également enlevé le voile noir transparent par défaut sur l’image, mais mes pages d’articles restent inchangées. Avez-vous une idée pour résoudre ce problème?
Merci de votre aide
Maxime BJ
Le 22 novembre 2023
Sur ce site, le but est que tu créés ton propre thème sur mesure, pas utiliser le thème de démo fourni par WordPress (qui n’est pas très adapté d’ailleurs comme base de travail pour faire ton thème). En créant ton thème sur mesure, tu t’évites les surcharges et tu te simplifies la tâche !