Prioridad/Severidad: Baja. Plataforma: Confirmado en Firefox 127.0 en Windows 10 y Chrome 125.0.6422.165 en Android 14. Descripción: Ver abajo. Pasos para reproducir: Sube una imagen con una resolución de 690×500 píxeles o inferior y redimensiónala manualmente (por ejemplo, ) o colócala en una [grid] (por ejemplo, [grid]  [/grid]).
Comportamiento esperado
El funcionamiento del lightboxing en Discourse está pensado para que, si la imagen se ha reducido para caber en la publicación, se pueda hacer clic en ella para ver la resolución completa.
El problema
Hay un error en cómo se implementa actualmente: solo compara la resolución original de la imagen con la configuración de “ancho máximo de imagen” y “alto máximo de imagen” del sitio web (por defecto 690×500 píxeles), ignorando el redimensionamiento manual y las rejillas de imágenes. Esto tiene la consecuencia de que las imágenes que se han reducido pueden no tener lightboxing si están por debajo de [ancho máximo de imagen]×[alto máximo de imagen].
Aquí tienes un ejemplo de que el lightboxing no se aplica cuando las imágenes se han reducido manualmente: pasa el ratón por encima de las siguientes imágenes y verás que tienen lightboxing de forma inconsistente; haz clic en una con lightboxing y verás que algunas no aparecen al pulsar izquierda o derecha:[2]
El problema en las rejillas de imágenes es que las rejillas prácticamente siempre redimensionan, y a menudo incluso recortan, las imágenes, lo que crea un problema cuando luego no se puede hacer clic en ellas para ver la imagen completa.
La solución propuesta originalmente…
La solución sería asegurar que:
El lightboxing compare el tamaño de la imagen en la página con su resolución original, y que
Las imágenes en las rejillas siempre tengan lightboxing.
Según entiendo, la aplicación de los lightboxes se realiza del lado del cliente, ¡así que creo que no debería ser prohibitivamente difícil, al menos!
Esta parte del problema ya se mencionó en el foro antes, un hilo en el que se llegó más o menos a la misma conclusión sobre cuál sería la solución. ↩︎
Originalmente, esto causó problemas de formato significativos debido a un problema que reporté por separado, pero en el momento de editar esta publicación y escribir esto, ya se ha solucionado. ↩︎
Una idea que tuve fue esta: ¿Hay alguna razón para no usar lightboxes en todas las imágenes? Al menos en las imágenes que caben cómodamente en la barra de información y el pequeño icono de “expandir” en dispositivos móviles sin cubrir demasiado la imagen. El lightbox tiene valor de dos maneras, además de simplemente permitir ver la imagen en alta resolución:
Muestra el texto alternativo (crucialmente, algo que es mucho más probable que sea proporcionado por un publicador que el texto del título, ya que el texto alternativo se autocompleta y la sintaxis para el texto del título es más oscura), y
La imagen no se omite al pasar por las imágenes después de hacer clic en un lightbox.
¿Hay alguna razón para no usar lightboxes en las imágenes que se pueden ver en su totalidad?
Una opción podría ser simplemente (además de usar lightboxes en todas las imágenes en cuadrículas) usar lightboxes en cada imagen por encima de un cierto tamaño en la página, digamos, por encima de 72x72 píxeles o algo así (estoy pensando en líneas, algo por encima de ~3 líneas de tamaño). ¿Qué opinas?
Idealmente, me gustaría que la configuración de redimensionamiento fuera similar a estos valores predeterminados de 690x500px, pero la configuración de lightbox más cercana a 72x72px (como cualquier imagen más grande que un emoji grande o una imagen de tamaño “sticker”).
Parece que la intención principal del lightbox es ver una versión sin escalar de la imagen, pero definitivamente lo uso más como una galería estilo carrusel. Es por eso que es un poco chocante cuando algo de 502px de alto se trata de manera diferente a algo de 499px de alto, especialmente cuando están en la misma cuadrícula.
Creo que esa es una encapsulación perfecta de lo que estaba pensando: ese es el único caso de uso en el que no querrías una lightbox, ¿verdad? Cuando la imagen es más “parte del texto” o “parte del formato de la publicación”.
Creo que esa es una mejor solución en general: separar las “imágenes de la lightbox por encima del tamaño […]” en su propia configuración con un valor predeterminado mucho más bajo. Tendría sentido que difiera de la implementación actual de dos maneras adicionales:
Debería juzgar por el tamaño en la página, en lugar del tamaño original de la imagen.
Probablemente debería necesitar exceder ambas dimensiones, en lugar de solo una. No puedo imaginar un caso de uso en el que quieras que una imagen de, digamos, 690x10 píxeles (en la página) tenga una lightbox.
Como nota sobre los casos de uso, a veces incluyo imágenes pequeñas a modo de emoji, pero son de alta resolución, por lo que no se verán borrosas en pantallas de alta densidad de píxeles. Por ejemplo:
! Esta imagen no debería tener una lightbox, ya que 1) es un emoticono, pero lo que es más importante, 2) el pequeño icono de expansión en la esquina inferior derecha cubriría la mayor parte en el móvil. En la actualidad, no tiene una lightbox porque el tamaño de la imagen original de alta resolución está por debajo de los 690x500 píxeles (372x468 píxeles, para ser exactos), pero no debería tener una lightbox a pesar de haber sido redimensionada; el criterio verdaderamente importante a juzgar es cuál es su tamaño en la página.
