Développement #40417: Toutes les images flexibles par défault - Intégrations graphiques Publik - Redmine Entr’ouvert

Développement #40417

Toutes les images flexibles par défault

Added by Thomas Jund almost 5 years ago. Updated almost 2 years ago.

Status:

Fermé

Priority:

Normal

Assignee:

Thomas Jund

Target version:

Start date:

04 March 2020

Due date:

% Done:

Estimated time:

Patch proposed:

Planning:

Description

Rendre les images flexibles par défaut ?

Rappel,

une image flexible est une image qui s'adapte : se réduit ou s’agrandit de manière homothétique pour s'adapter à la largeur de la boite parent, sans dépasser sa taille réelle.

img  {
  max-width: 100%;
  height: auto;

Ce mode est activé par défaut pour les affichages mobiles voir #31875

Le fait qu'il ne soit pas appliqué sur destop entraînent parfois un débordement de l'image au delà de son conteneur ou un refus pour flexbox de réduire la boite parent. Typiquement sur des images au sein des cellules texte

Le fait qu'il soit appliqué sur mobile ne suffit pas pour que l'image se réduise de manière homothétique. En effet, ckeditor ajoute une prop CSS `height` et `width` à la balise image. L'image va se réduire horizontalement uniquement. Il faut donc penser à supprimer ces attributs via ckeditor pour que l'image devienne flexible.

Files

amiens-images-telepaiement.png (145 KB) amiens-images-telepaiement.png

Thomas Jund, 20 January 2021 05:00 PM

Related issues

Associated revisions

Revision f078a191 (diff)
Added by Thomas Jund almost 2 years ago

css: declare all images flexible by default (#40417)

History

Updated by Frédéric Péters almost 5 years ago

Related to Développement #16669: Ne pas laisser ckeditor forcer par défaut les dimensions de l'image added

Updated by Thomas Jund almost 5 years ago

Related to Développement #31875: par défaut limiter les images à 100% de largeur added

Updated by Thomas Jund almost 4 years ago

File amiens-images-telepaiement.png amiens-images-telepaiement.png added
Assignee set to Thomas Jund

Je déterre ce ticket.
L'update du system de layout des colonnes sera affecté aussi si les images insérées via CKeditor sont plus larges (avec styles width et height que la largeur d'une colonne.
C'est déjà le cas mais avec float : les images débordent (voir capture). Avec flexbox c'est la largeur de la colonne qui va être impacté.

S'il est compliqué de modifier le comportement de ckEditor. On peut forcer en css une hauteur auto :

.textcell img {
  height: auto !important;
}

Ce qui veut dire que seul `width` restera paramétrable depuis ckeditor. Modifier `height` ne fera plus rien.

Avis bienvenu.

Updated by Frédéric Péters almost 4 years ago

Revert du changement sur les colonnes si le risque est d'avoir des sites de prod en vrac ?

Updated by Thomas Jund almost 4 years ago

Le layout des colonnes n'est pas encore en flexbox. C'est un dev en cours, pas pour tout de suite.
ce serait bien de lever ce problème avant.

Updated by Frédéric Péters almost 4 years ago

Ok, je n'avais pas compris ça. Concernant ckeditor j'ai levé la question il y a longtemps : #16669. (mais je serais de ce côté à abandonner et à passer du temps sur notre propre réalisation).

Ce qui veut dire que seul `width` restera paramétrable depuis ckeditor. Modifier `height` ne fera plus rien.

De ton dump tu peux voir tous les <img> et vérifier que nulle part il y aurait juste height positionné ? (sur l'idée que si width et height sont positionnés, ils le sont de manière à garder le bon ratio quand même).

Updated by Thomas Jund almost 4 years ago

C'était sport pour moi, mais voilà

829 cellules "text" utilisent des images
1507 images
5 images ont une prop `height` et pas `width`

<img alt=\"\" src=\"/media/uploads/2020/04/09/grc_metropole_mono2_laq2ci5.svg\" style=\"height: 90px;\" />
<img alt=\"\" src=\"/media/uploads/2019/07/08/metz-metropole.png\" style=\"float: left; height: 80px;\" />
<img alt=\"\" src=\"/media/uploads/2019/07/08/metz.png\" style=\"float: left; height: 80px; margin-left: 40px; margin-right: 40px;\" />
<img alt=\"\" src=\"/media/uploads/2019/07/08/europe.png\" style=\"float: right; height: 100px;\" />
<img alt=\"\" src=\"/media/uploads/2020/10/24/logohautesalpesrouge.png\" style=\"height: 60px; float: right;\" />

C'est essentiellement en couplant avec une propriété `float`

Updated by Thomas Jund about 3 years ago

Related to Bug #58730: [Contenu d'une fiche] - img ne s'adapte pas à la taille du contenant added

Updated by Thomas Jund about 2 years ago

Status changed from Nouveau to En cours

Je déterre ce ticket qui garde toute sa pertinence.
Je propose de basculer les images en flexible par défaut (sur tous les viewport) et on continue à corriger les cas ckEditor à la main en intervenant sur les attributs `height & width` au besoin.

#10