Retrouver le sujet coupé sans modifier toutes les images
Le visage d’un portrait disparaît dans une carte d’article, le produit n’entre plus dans la bannière ou une image mise en avant paraît correcte sur ordinateur mais coupée sur téléphone. Le résultat recherché est de garder la partie utile visible dans les emplacements concernés, avec une composition lisible à plusieurs largeurs.
Le défaut peut venir du fichier lui-même, d’une variante recadrée ou de la manière dont le thème remplit son cadre. Ces trois causes ne se corrigent pas au même endroit. Avant de changer les dimensions de toute la bibliothèque, choisissez un article témoin et comparez ce que le fichier contient avec ce que la page laisse voir.
Une même image mise en avant peut servir dans l’article, les archives, les résultats de recherche et d’autres présentations. Une bonne correction tient compte de ces usages. Changer le fichier affecte potentiellement plusieurs emplacements, tandis qu’un réglage de modèle peut toucher de nombreux articles.
Ce parcours porte sur un sujet mal cadré. Si l’image renvoie une erreur 404, rétablissez d’abord le fichier ou son adresse. Si la variante nécessaire au thème n’existe pas, examinez sa génération. Un réglage de position ne recrée pas une partie déjà supprimée d’un fichier, et une régénération ne change pas forcément un cadre d’affichage trop étroit.
Comparer la source, le fichier servi et le cadre visible
Ouvrez l’article dans l’administration et consultez son image mise en avant. Dans la médiathèque, ouvrez le fichier principal pour voir si le sujet y figure encore entièrement. Gardez une copie de l’original et notez le nom du média choisi. Ne prenez pas une vignette de l’interface pour preuve du cadrage de la source.
Sur la page publique, ouvrez les outils du navigateur et relevez la requête du fichier affiché. Une variante peut avoir un nom et des dimensions différents. Ouvrez cette adresse séparément. Si le sujet est déjà absent dans ce fichier, décaler son affichage ne le fera pas réapparaître : il faut une autre variante ou une source adaptée.
Si le fichier contient le sujet mais que la page le coupe, inspectez l’élément image dans Éléments, puis ses styles calculés. Cherchez notamment la hauteur, le rapport de proportions, object-fit et object-position. Un cadre rempli par le mode cover peut cacher des bords pour conserver les proportions de l’image.
Comparez aussi l’article et sa carte dans la liste du blog. Les deux peuvent demander des fichiers ou des cadres différents. Notez précisément où la coupure apparaît : dans un modèle unique, une boucle de publications ou un composant spécifique. Cette lecture doit produire une cause probable et un périmètre, sans encore remplacer le média ni enregistrer de CSS.
Choisir le bon périmètre avant d’enregistrer
Avec un thème à blocs et les droits de conception, les réglages d’affichage se trouvent souvent dans Apparence → Éditeur, au niveau du modèle qui contient l’image mise en avant. Avec un thème classique, cherchez d’abord la fonction prévue dans ses options ou dans Apparence → Personnaliser lorsqu’elle existe. Les contrôles disponibles dépendent du thème et des droits du compte.
Pour une image affectant tous les articles d’un modèle, une correction du modèle peut convenir. Pour une seule photo dont le sujet est décentré, un changement global de position risque de dégrader les autres. Préférez alors une source mieux composée ou une correction limitée à la publication concernée.
Avant une modification de modèle, conservez ses réglages actuels et une copie récupérable. Notez le modèle effectivement attribué et quelques articles témoins. Avant de remplacer l’image d’un article, conservez la référence précédente. Ces préparatifs permettent un retour ciblé au lieu d’une réinitialisation générale du thème.
Sur WordPress.com ou une autre offre gérée, les fonctions de conception et de CSS dépendent des accès disponibles. En multisite, le responsable réseau peut restreindre ces fonctions. N’installez pas une extension pour contourner un contrôle absent : identifiez d’abord qui gère le modèle et si votre intervention doit concerner un article, un groupe de cartes ou tout le site.
Approche 1 : ajuster le cadre dans le modèle concerné
Avec un thème à blocs, ouvrez Apparence → Éditeur → Modèles, puis le modèle réellement utilisé par la page concernée. Utilisez la vue en liste pour sélectionner le bloc Image mise en avant. Dans une liste d’articles, il peut se trouver à l’intérieur d’une Boucle de requête et de son Modèle de publication : vérifiez ce contexte avant modification.
Dans les réglages du bloc, relevez le rapport de proportions, la largeur, la hauteur et l’échelle lorsqu’ils sont proposés. Essayez d’abord un rapport plus proche de votre source ou sa proportion originale si cette option convient à la présentation. Si une hauteur fixe force une bande très étroite, examinez son utilité plutôt que de déplacer indéfiniment le sujet.
Le mode Couvrir remplit le cadre et peut cacher des bords. Le mode Contenir montre l’image entière mais peut laisser des espaces lorsque les proportions diffèrent. Choisissez selon le besoin éditorial : une fiche produit complète et une galerie de portraits n’exigent pas nécessairement des cartes remplies à tout prix.
Prévisualisez plusieurs articles puis enregistrez uniquement les éléments voulus. Une modification de ce bloc dans un modèle partagé affecte les publications qui l’utilisent. Pour annuler, remettez les valeurs relevées dans ce même bloc ou sa version conservée. Ne réinitialisez pas tout le modèle pour effacer un seul essai de hauteur ou d’échelle.
Ne pas confondre choix de l’image et réglages de son affichage
Le panneau Article ou Page permet de choisir le média mis en avant. Il ne définit pas automatiquement le cadrage de toutes ses représentations. Le bloc dynamique Image mise en avant affiche ce média selon le contexte de publication et les réglages du modèle. Une carte d’archive et le haut de l’article peuvent ainsi montrer la même source dans des cadres différents.
Le bloc Image inséré dans le contenu possède ses propres contrôles. Les versions récentes peuvent proposer un point focal avec un rapport de proportions, particulièrement utile avec l’échelle Couvrir. Cela ne signifie pas que le même champ existe dans le panneau d’image mise en avant ou dans tous les composants de thème.
Si votre écran ne présente pas de point focal, identifiez le bloc sélectionné et les fonctions prévues par le thème. Ne cherchez pas un bouton universel et ne transformez pas une image dynamique en image fixe simplement pour obtenir un contrôle. Dans une boucle d’articles, une image fixe pourrait se répéter sur plusieurs cartes au lieu d’afficher celle de chaque publication.
Gardez aussi les liens et les informations utiles lors de la correction. Un changement de composition ne doit pas retirer la destination du clic, un texte alternatif pertinent ou une légende nécessaire. Vérifiez ces éléments dans le contexte public, et non uniquement dans l’aperçu du média isolé.
Approche 2 : affecter une composition adaptée à un article
Cette approche convient lorsque le sujet de la photo s’accorde mal avec les cadres prévus, ou lorsque le fichier disponible est déjà coupé. Préparez une nouvelle composition à partir de l’original conservé, avec assez de marge autour du sujet. Si plusieurs formats sont utilisés, choisissez une zone importante qui reste lisible dans les principaux cadrages.
Créez un fichier distinct et reconnaissable. Ne remplacez pas silencieusement le fichier partagé dans la médiathèque : une même ressource peut servir à plusieurs articles, pages ou documents. Une composition dédiée à un portrait d’article ne doit pas modifier sans contrôle une photographie utilisée ailleurs.
Dans Articles → votre article, ouvrez les réglages de publication, puis Image mise en avant. Utilisez le choix de remplacement ou la sélection du média pour affecter le nouveau fichier, puis enregistrez l’article. L’intitulé précis dépend de l’interface, mais vérifiez que vous changez le média de l’article, pas seulement un bloc Image situé dans son corps.
Contrôlez ensuite la carte du blog, l’article et les autres emplacements qui représentent cette publication. Pour annuler, sélectionnez à nouveau le média précédent, puis enregistrez. Gardez l’ancienne source jusqu’à la fin des vérifications. Retirer une image de l’article ne justifie pas de supprimer son fichier de la médiathèque, puisqu’un autre usage peut encore en dépendre.
Approche 3 : déplacer le cadrage d’affichage avec un CSS limité
Ce parcours convient seulement si le fichier servi contient encore le sujet et si l’inspection confirme une image remplissant son cadre avec object-fit: cover. Il demande l’accès au CSS additionnel et l’identification de l’élément. Il ne convient pas à une image de fond ni à une variante qui a déjà perdu la partie recherchée.
Sur le bloc Image mise en avant concerné, ouvrez Avancé → Classe(s) CSS additionnelle(s) et ajoutez cadrage-sujet, sans point. Dans l’exemple, la classe est portée par le bloc du modèle, mais la règle se limite à l’affichage individuel de l’article 123. Remplacez ce nombre par l’identifiant vérifié et confirmez la présence de postid-123 sur l’élément body avec l’inspecteur.
Ajoutez la règle complète dans le CSS additionnel du site : Apparence → Éditeur → Styles → menu à trois points → CSS additionnel, ou l’emplacement prévu par votre thème classique. Ne la collez pas dans un champ qui attend seulement des propriétés d’un type de bloc. Elle conserve l’échelle existante et décale la zone visible vers le haut.
Les valeurs 50% 20% sont un point de départ illustratif, pas une détection automatique du visage. Essayez les positions dans le navigateur avant de les enregistrer. Si une règle prioritaire empêche l’effet, recherchez son origine plutôt que d’ajouter immédiatement !important. Pour annuler, retirez cette seule règle et la classe si elle n’est plus utile.
body.postid-123 .cadrage-sujet img {
object-position: 50% 20%;
}Vérifier la portée sur les cartes et sur téléphone
La règle précédente se limite à l’article ouvert seul. Elle ne règle pas automatiquement sa carte dans une archive, car la page de liste porte un autre contexte. Si le défaut se situe dans une boucle de publications, examinez le bloc de cette boucle et décidez si le même réglage convient à toutes ses images avant de lui donner une portée commune.
Une position idéale pour un portrait peut couper un objet placé plus bas dans une autre photographie. Ne généralisez donc pas un réglage appris sur un seul média à tous les articles. Pour une série aux compositions très différentes, une proportion moins contraignante ou des sources préparées de façon cohérente peuvent être plus faciles à maintenir qu’une multitude de corrections CSS.
Comparez plusieurs largeurs de page, notamment le passage d’une carte horizontale à une carte plus étroite. Observez le sujet, mais aussi l’éventuel texte superposé, le lien et les marges. Une tête redevenue visible ne suffit pas si le titre la recouvre sur téléphone.
Évitez de définir des seuils mobiles copiés au hasard. Identifiez d’abord le moment où le cadre change réellement dans votre thème. Si un réglage distinct par largeur est nécessaire, faites le préciser pour ce composant et conservez les deux états de référence. Une seule position ne peut pas toujours satisfaire deux compositions très différentes.
Si la coupure est déjà présente dans le fichier généré
Lorsque l’ouverture du fichier servi montre déjà le recadrage, le CSS ne peut pas en retrouver les bords. Comparez ce fichier avec la source conservée et relevez le nom de taille utilisé. Un thème peut définir une variante avec recadrage central ou une position déterminée lors de sa génération.
Vérifiez si une variante non recadrée ou mieux adaptée est déjà disponible dans le composant qui affiche l’image. Un changement de sélection peut suffire, à condition de garder une définition et des proportions convenables. Ne modifiez pas les trois tailles générales de Réglages → Médias pour corriger une seule taille personnalisée d’un thème.
Si la définition de la taille doit changer, faites identifier son origine et son périmètre par la personne qui maintient le thème. La correction doit survivre aux mises à jour et rester cohérente avec le modèle. Modifier directement un fichier du thème parent sans suivi exposerait à perdre l’ajustement à la prochaine mise à jour.
Après une modification confirmée de définition, régénérez d’abord la taille d’un seul média selon le parcours consacré aux variantes manquantes. Préservez les fichiers et métadonnées ainsi que les anciennes tailles encore utilisées. Cette opération est une écriture distincte du réglage de modèle : changer de thème ou retirer une règle CSS ne l’annule pas automatiquement.
Choisir une composition compatible avec les usages importants
Un cadre très large et un cadre carré ne peuvent pas toujours montrer les mêmes détails d’une photographie très serrée. Identifiez ce qui doit rester visible : le visage, l’objet entier, une inscription ou une zone qui porte l’information principale. Ce choix éditorial permet de décider si l’on doit montrer tout le fichier ou accepter une coupe de ses parties secondaires.
Lorsqu’une inscription indispensable est placée au bord d’une image, une simple position de cadrage reste fragile. Préférez une composition laissant une marge suffisante ou présentez aussi cette information sous forme de texte dans la page. Le visiteur ne doit pas dépendre d’un bord qui disparaît dès que la carte change de proportion.
Si vous choisissez Contenir pour conserver l’intégralité du visuel, vérifiez la couleur et l’espace autour du fichier dans le composant. Les bandes laissées libres peuvent être acceptables pour certains contenus, mais elles doivent rester cohérentes avec les autres cartes. Ne déformez pas l’image en forçant simultanément deux dimensions incompatibles pour les faire disparaître.
Une extension n’est pas nécessaire pour les réglages de modèle, le choix du média et le CSS ciblé décrits ici. Si votre thème possède déjà une fonction de cadrage par publication, vérifiez son effet sur les différents emplacements avant de l’utiliser. L’ajout d’un second système de gestion d’images n’est pas justifié tant que le besoin est couvert par ces réglages.
Valider le résultat et garder un retour arrière précis
Rouvrez l’article témoin, la liste du blog et une archive pertinente après enregistrement. Contrôlez plusieurs largeurs et une session déconnectée pour les contenus publics. Vérifiez que le fichier se charge, que le sujet important reste visible et que le lien de l’image conserve sa destination. Un aperçu correct dans l’éditeur ne remplace pas ces contrôles publics.
Examinez au moins un autre article utilisant le même modèle. Vous pourrez ainsi voir si une modification de cadre a amélioré le témoin tout en dégradant une autre composition. Si le navigateur ou un cache de page montre encore l’ancien rendu, vérifiez les réglages enregistrés et la ressource avant une purge ciblée avec le système déjà en place.
Notez enfin ce qui a changé : média affecté à l’article, valeurs du bloc, modèle partagé ou règle CSS. Les chemins de retour diffèrent. Réaffecter l’ancien média annule le remplacement de source ; remettre les valeurs du bloc annule le cadre ; retirer la règle annule le décalage CSS. Aucun de ces gestes n’annule une régénération de fichiers effectuée séparément.
Conservez les originaux et les références précédentes jusqu’à validation des usages importants. Pour les prochaines publications, prévoyez une marge autour du sujet et vérifiez l’image dans les principaux cadres avant de l’adopter. Vous réduirez ainsi les ajustements individuels sans imposer une composition unique à toutes les photographies.
Ouvrir le fichier que le navigateur a réellement chargé
Sur la copie WordPress, l’image mise en avant est une source de 960 × 480 pixels. Un repère orange représente le sujet près du bord gauche. Dans le cadre carré du modèle, avec object-fit: cover et une position centrée, ce repère disparaît de l’affichage. Le fichier ouvert seul contient encore le repère. Un alignement à gauche le rend de nouveau visible dans le même cadre. À 390 pixels de largeur de fenêtre, Chrome passe de zéro à 5 022 pixels orange dans le cadre. À 1 024 pixels de largeur, il passe de zéro à 6 930. Le navigateur charge le même fichier avant et après ce changement de position.
Sur votre copie, ouvrez les outils de développement et sélectionnez l’image à la une réellement affichée. Dans Réseau, filtrez les images et relevez l’adresse du fichier chargé à la largeur qui pose problème. Si le site fournit plusieurs sources selon l’écran, refaites le relevé à la seconde largeur. Ouvrez le fichier repéré dans un autre onglet et cherchez la partie coupée. Comparez aussi avec l’image conservée dans la médiathèque. Vous pouvez ainsi retrouver le stade où le bord a disparu.
Vérifier si la correction doit porter sur le cadre ou sur la variante
Le banc a ensuite demandé à WordPress sa variante carrée de 320 × 320 pixels, recadrée au centre lors de la génération. Le repère orange était absent du fichier généré. Déplacer object-position à gauche n’a rendu aucun pixel du repère visible. La comparaison porte sur le même article et le même cadre. Le fichier chargé est le seul changement entre les deux séries.
Si le fichier contient encore le sujet, essayez temporairement une autre position dans Styles, dans l’inspecteur du navigateur. Gardez le même fichier et vérifiez le cadrage à la largeur qui échouait. Après un résultat satisfaisant, reportez la règle dans la source CSS du seul modèle ou bloc concerné. Si le fichier servi a déjà perdu le bord, choisissez une variante qui le conserve dans le composant. Vérifiez ensuite que ce fichier a la bonne définition pour le cadre. Une modification de taille personnalisée suivie d’une régénération peut être utile quand aucune variante adaptée n’existe.
Refaire la comparaison sur la page et sa carte
Sur la copie, contrôlez l’article ouvert puis, si elle existe, la carte qui renvoie vers lui. Pour chaque contexte, notez la largeur testée, le fichier chargé et la partie du sujet visible. Une correction sur le modèle d’article peut laisser le rendu de la carte inchangé, car celle-ci peut demander une autre variante ou appliquer un autre cadre. Si une correction ciblée améliore l’article et dégrade la carte, restaurez la règle précédente ou limitez sa portée au contexte confirmé.
Dans le banc, le retour à la position centrée reproduit l’affichage initial aux deux largeurs. La source et la variante carrée gardent leurs empreintes pendant les essais d’affichage. Sur votre copie, rechargez la page pour annuler un essai effectué seulement dans l’inspecteur. Si vous avez enregistré le changement, rétablissez la position ou la variante choisie avant l’essai, puis vérifiez à nouveau les deux contextes.
