[RÉSOLU] image d'accroche d'un article

korage

salutations amicales,
je viens de me rendre compte que lorsqu'on met une image d'accroche à un article, cette image n'est pas responsive et sa dimension ne s'adapte pas à l'écran... il y a une solution pour la rendre responsive ?
merci pour vos explications éclairées,
cordialement, GG

bazooka07

Bonjour

Difficile de te répondre sans connaître le thème que tu utilises ou voir ton site en ligne.

Dans la balise <img> supprimer les attributs width et height éventuellement.
Après cela se joue avec des règles CSS qui vont bien.
Il y a éventuellement l'attribut srcset pour optimiser la taille des fichiers immages selon la résolution des écrans ( smartphone entrée de gamme vs mac pro)

voir la documentation sur la balise <img> :
https://developer.mozilla.org/fr/docs/Web/HTML/Element/img

korage

grand MERCI bazooka07 pour la réponse,
je suis sur le thème par défaut et la version 5.8.9.

je mets l'image d'accroche ( Patronat-RN-1-reduit.jpg dans l'article ) à partir de [ Image d'accroche (facultatif) : + ] en fin de page de création d'article

malheureusement je ne sais pas dans quel fichier je dois la retrouver pour savoir si l'image est fixée avec un width et height. Si je recherche dans l'article concerné ( dossier [ article ] ) je ne trouve rien :

 

]]>
<![CDATA[]]>
<![CDATA[]]>
<![CDATA[]]>
<![CDATA[]]>
<![CDATA[data/medias/aa_images-d-accroche/Patronat-RN-1-reduit.jpg]]>
<![CDATA[]]>
<![CDATA[]]>
<![CDATA[202411091156]]>
<![CDATA[202411121123]]>

je pense que je dois éventuellement mettre quelque chose dans la ligne :
<![CDATA[data/medias/aa_images-d-accroche/Patronat-RN-1-reduit.jpg]]>
j'ai retirer retiré , ça enlève l'image d'accroche de l'article, avec cet essai aussi srcset="medium.jpg 400w, large.jpg 200w

malheureusement, là s'arrête mes faibles compétences de copier/coller

où dois-je intervenir ? dans quel dossier et quel fichier modifier ?
merci, cordialement, GG

gcyrillus-nomade

Bonjour,

Je viens de retester le theme par défaut et une image d'accroche dans une v5.8.9 , les images sont en quelques sortes responsive et ne font jamais plus de 100% de l'argeur de leur conteneurs mais elles ne sont jamais agrandies .

Une image d'accroche en petit format s'affiche en petit format dans un lien vers sa version grand format si tu as coché "créer" une miniature au moment de l'upload. Ces images réduites ne sont pas destinée à être affiché en grand (pixellisation avec un rendu moche) .

L'affichage de l'image d'accroche ne gère que l'image et sa version réduite si présente en affichant l'une ou l'autre.

Comment defini tu image responsive ? et qu'attend tu de différent du fonctionnement du thème par défaut ?

Si tu souhaite utiliser l'attribut srcset, il te faut inserer l'image dans le corps de l'article avec ses attributs et ne pas mettre d'image en accroche à l'article.
Pour completer la réponse de bazooka, cela va t'aider à créer ta balise img et son attribut srcset https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images A toi d'uploader les différentes images dont tu aura besoin.

Au moment de l'upload, tu peut créer une miniature avec la dimension voulu, cela te donnera déjà deux images, il reste alors à en télécharger une troisieme de résolution intermédiaire et en créant ou non une eventuelle 4eme à nouveau réduite.

korage

merci pour ta grande réponse [gcyrillus-nomade] et grand MERCI,

l'image d'accroche est à 100% de ses dimensions fixes lorsqu'on consulte la page internet - OK - mais si on consulte la même page avec un écran de taille moindre, disons 50%, l'image d'accroche ne se réduit pas de 50% car reste à sa dimension fixe. Pour moi, une image responsive est une image qui s'adapte automatiquement en %centage relativement à la taille de l'écran avec lequel on consulte la page sur internet.
merci pour vos très sympathiques réponses, cordialement, GG

gcyrillus-nomade

En effet , l'image d'accroche garde ses dimensions et est éventuellement réduites à 100% max de la largeur de son conteneur si elle est trop grande.

Pour ton besoin:

... tu souhaite utiliser l'attribut srcset, il te faut inserer l'image dans le corps de l'article avec ses attributs et ne pas mettre d'image en accroche à l'article.
... balise img et son attribut srcset https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images A toi d'uploader les différentes images dont tu aura besoin.
Au moment de l'upload, tu peut créer une miniature avec la dimension voulu, cela te donnera déjà deux images, il reste alors à en télécharger une troisième de résolution intermédiaire et, en créant ou non, une éventuelle 4eme à nouveau réduite.

PluXml ne gère pas les attributs srcet dans l'image d'accroche.

korage

M E R C I