Projet

Général

Profil

Development #40417

Toutes les images flexibles par défault

Ajouté par Thomas Jund il y a environ 4 ans. Mis à jour il y a plus d'un an.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Version cible:
-
Début:
04 mars 2020
Echéance:
% réalisé:

0%

Temps estimé:
Patch proposed:
Non
Planning:
Non

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.


Fichiers

amiens-images-telepaiement.png (145 ko) amiens-images-telepaiement.png Thomas Jund, 20 janvier 2021 17:00

Demandes liées

Lié à Combo - Development #16669: Ne pas laisser ckeditor forcer par défaut les dimensions de l'imageInformation nécessaire02 juin 201729 mars 2018

Actions
Lié à Intégrations graphiques Publik - Development #31875: par défaut limiter les images à 100% de largeurFermé01 avril 2019

Actions
Lié à Intégrations graphiques Publik - Bug #58730: [Contenu d'une fiche] - img ne s'adapte pas à la taille du contenantFermé19 novembre 2021

Actions

Révisions associées

Révision f078a191 (diff)
Ajouté par Thomas Jund il y a plus d'un an

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

Historique

#1

Mis à jour par Frédéric Péters il y a environ 4 ans

  • Lié à Development #16669: Ne pas laisser ckeditor forcer par défaut les dimensions de l'image ajouté
#2

Mis à jour par Thomas Jund il y a environ 4 ans

#3

Mis à jour par Thomas Jund il y a environ 3 ans

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.

#4

Mis à jour par Frédéric Péters il y a environ 3 ans

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

#5

Mis à jour par Thomas Jund il y a environ 3 ans

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.

#6

Mis à jour par Frédéric Péters il y a environ 3 ans

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).

#7

Mis à jour par Thomas Jund il y a environ 3 ans

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`

#8

Mis à jour par Thomas Jund il y a plus de 2 ans

  • Lié à Bug #58730: [Contenu d'une fiche] - img ne s'adapte pas à la taille du contenant ajouté
#9

Mis à jour par Thomas Jund il y a plus d'un an

  • Statut changé de Nouveau à 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

Mis à jour par Robot Gitea il y a plus d'un an

  • Statut changé de En cours à Solution proposée

Thomas Jund (tjund) a ouvert une pull request sur Gitea concernant cette demande :

#11

Mis à jour par Robot Gitea il y a plus d'un an

  • Statut changé de Solution proposée à Solution validée

Corentin Sechet (csechet) a approuvé une pull request sur Gitea concernant cette demande :

N/A

#12

Mis à jour par Robot Gitea il y a plus d'un an

  • Statut changé de Solution validée à Résolu (à déployer)

Thomas Jund (tjund) a mergé une pull request sur Gitea concernant cette demande :

#13

Mis à jour par Transition automatique il y a plus d'un an

  • Statut changé de Résolu (à déployer) à Solution déployée
#14

Mis à jour par Transition automatique il y a environ un an

Automatic expiration

Formats disponibles : Atom PDF