Priorité/Gravité : Faible. Plateforme : Confirmé dans Firefox 127.0 sur Windows 10 et Chrome 125.0.6422.165 sur Android 14. Description : Voir ci-dessous. Étapes de reproduction : Téléchargez une image avec une résolution de 690 × 500 pixels ou moins et redimensionnez-la manuellement (par exemple, ) ou placez-la dans une [grid] (par exemple, [grid]  [/grid]).
Comportement attendu
Le fonctionnement du lightboxing dans Discourse est censé être le suivant : si l’image a été réduite pour s’adapter au message, elle est mise en évidence pour pouvoir être cliquée afin de voir la résolution complète.
Le problème
Il y a un bug dans la façon dont cela est actuellement implémenté : il ne compare que la résolution d’origine de l’image aux paramètres « largeur d’image maximale » et « hauteur d’image maximale » du site Web (par défaut 690 × 500 pixels), en ignorant le redimensionnement manuel et les grilles d’images. Par conséquent, les images qui ont été réduites peuvent ne pas être mises en évidence si elles sont inférieures à [largeur d'image max] × [hauteur d'image max].
Redimensionnement manuel[^1]
Voici un exemple de l’échec du lightboxing lorsque les images ont été réduites manuellement – survolez les images suivantes, et vous verrez qu’elles sont mises en évidence de manière incohérente ; cliquez sur une image mise en évidence et vous verrez que certaines d’entre elles n’apparaissent pas lorsque vous appuyez sur gauche ou droite :[1]
Le problème avec les grilles d’images est que les grilles redimensionnent pratiquement toujours – et recadrent même souvent – les images, ce qui pose problème lorsqu’elles ne peuvent pas être cliquées pour voir l’image complète.
Une solution proposée mise à jour peut être trouvée dans la discussion ci-dessous.
La solution initialement proposée…
La solution serait de s'assurer que :
Le lightboxing compare la taille de l’image sur la page à sa résolution d’origine, et que
Les images dans les grilles sont toujours mises en évidence.
D’après ce que je comprends, l’application des lightboxes se fait côté client, donc je ne pense pas que ce soit prohibitivement difficile, du moins !
[^1] : Cette partie du problème a déjà été mentionnée sur le forum, un fil de discussion dans lequel une conclusion plus ou moins identique quant à la solution a été tirée.
Initialement, cela a causé des problèmes de formatage importants en raison d’un problème que j’ai signalé séparément, mais au moment de la modification de ce message et de la rédaction de cette partie, il a déjà été résolu. ↩︎
Une réflexion que j’ai eue était la suivante : Y a-t-il une raison de ne pas mettre toutes les images en lightbox ? Du moins, les images qui pourraient confortablement s’adapter à la barre d’informations et à la petite icône « développer » sur mobile sans masquer une trop grande partie de l’image. La lightbox a une valeur de deux manières au-delà de simplement permettre de voir l’image en haute résolution :
Elle affiche le texte alternatif (crucialement, quelque chose de beaucoup plus susceptible d’être fourni par un contributeur que le texte du titre, car le texte alternatif est pré-rempli et la syntaxe du texte du titre est plus obscure), et
L’image n’est pas omise lors du passage en revue des images après avoir cliqué sur une lightbox.
Y a-t-il une raison de ne pas mettre en lightbox les images qui peuvent être vues en entier ?
Une option pourrait être de simplement (en plus de mettre en lightbox toutes les images dans les grilles) mettre en lightbox chaque image au-dessus d’une certaine taille sur la page – disons, au-dessus de 72 × 72 pixels environ (je pense en lignes – tout ce qui est au-dessus d’environ 3 lignes). Qu’en pensez-vous ?
Idéalement, j’aimerais que les paramètres de redimensionnement soient similaires à ces valeurs par défaut de 690x500px, mais que les paramètres de lightbox soient plus proches de 72x72px (comme toute image plus grande qu’un emoji de grande taille ou une image de la taille d’un « sticker »).
Il semble que l’intention principale de la lightbox soit de visualiser une version non mise à l’échelle de l’image, mais je l’utilise certainement davantage comme une galerie de style carrousel. C’est pourquoi il est un peu choquant qu’un élément de 502 pixels de haut soit traité différemment d’un élément de 499 pixels de haut, surtout lorsqu’ils se trouvent dans la même grille.
Je pense que c’est une parfaite description de ce que j’avais en tête – c’est le seul cas d’utilisation où vous ne voudriez pas d’une lightbox, n’est-ce pas : lorsque l’image fait partie du texte ou de la mise en forme du message.
Je pense que c’est une meilleure solution dans l’ensemble – de séparer les « images de la lightbox au-dessus de la taille […] » dans son propre paramètre avec une valeur par défaut beaucoup plus basse. Il serait logique qu’elle diffère de l’implémentation actuelle de deux autres manières :
Elle devrait juger par la taille sur la page, par opposition à la taille d’origine de l’image.
Elle devrait probablement dépasser les deux dimensions, par opposition à une seule – je n’arrive pas à imaginer un cas d’utilisation où vous voudriez qu’une image de, disons, 690×10 pixels (sur la page) soit mise en lightbox.
À titre de note sur les cas d’utilisation, j’inclus parfois de petites images à la manière d’emojis – mais elles sont haute résolution, de sorte qu’elles ne seront pas floues sur les écrans haute densité. Par exemple :
! Cette image ne devrait pas être mise en lightbox, car 1) c’est une émoticône, mais plus important encore, 2) la petite icône d’expansion dans le coin inférieur droit couvrirait la majeure partie sur mobile. À l’heure actuelle, elle n’est pas mise en lightbox car la taille de l’image d’origine haute résolution est inférieure à 690×500 pixels (372×468 pixels, pour être exact), mais elle ne devrait pas être mise en lightbox malgré avoir été réduite – le critère vraiment pertinent à juger est sa taille sur la page.
