Лайтбокс изображений не учитывает ручное изменение размера или теги [grid]

Внести вклад Ошибка
1

Приоритет/Серьезность: Низкий.
Платформа: Подтверждено в Firefox 127.0 на Windows 10 и Chrome 125.0.6422.165 на Android 14.
Описание: См. ниже.
Шаги для воспроизведения: Загрузите изображение с разрешением 690×500 пикселей или меньше, а затем либо измените его размер вручную (например, ![|336x456,x150](upload://uoNNF6SaHfaM6bRapNRZoeKQqjU.png)), либо поместите его в [grid] (например, [grid] ![|336x456](upload://uoNNF6SaHfaM6bRapNRZoeKQqjU.png) [/grid]).

Ожидаемое поведение

Согласно задумке, функция лайтбокса в Discourse должна работать следующим образом: если изображение уменьшено для размещения в посте, оно должно открываться в лайтбоксе, чтобы его можно было кликнуть и просмотреть в полном разрешении.

Проблема

В текущей реализации есть ошибка: система сравнивает исходное разрешение изображения только с настройками «максимальной ширины» и «максимальной высоты» сайта (по умолчанию 690×500 пикселей), игнорируя ручное изменение размера и сетки изображений. Это приводит к тому, что уменьшенные изображения могут не открываться в лайтбоксе, если их размеры меньше [макс. ширина]×[макс. высота].

Ручное изменение размера[1]

Ниже приведен пример сбоя работы лайтбокса при ручном уменьшении изображений — наведите курсор на следующие изображения, и вы увидите, что лайтбокс применяется некорректно; кликните на изображение, открывающееся в лайтбоксе, и вы заметите, что некоторые из них не отображаются при нажатии стрелок влево или вправо:[2]

557×1169 463 KB
678×811 395 KB
336×456 39.1 KB
771×900 324 KB
145×222 38 KB

Сетки изображений

Проблема в сетках изображений заключается в том, что они практически всегда изменяют размер изображений, а часто даже обрезают их, что становится проблемой, когда затем невозможно кликнуть по ним для просмотра полного изображения.

640×480 68.2 KB

640×480 85.5 KB

640×464 51.9 KB

640×182 11.1 KB

Решение

nОбновленное предлагаемое решение можно найти в обсуждении ниже.

Изначально предложенное решение… Решение заключается в обеспечении следующего:
  1. Лайтбокс должен сравнивать размер изображения на странице с его исходным разрешением, и
  2. Изображения в сетках всегда должны открываться в лайтбоксе.

Насколько я понимаю, работа лайтбоксов выполняется на стороне клиента, поэтому, по моему мнению, это не должно быть чрезмерно сложно, по крайней мере!

  1. Эта часть проблемы уже упоминалась на форуме в теме, где был сделан вывод о решении, во многом аналогичном предложенному здесь. ↩︎

  2. Изначально это вызывало значительные проблемы с форматированием из-за отдельно сообщенной мною проблемы, но на момент редактирования этого поста и написания этой части она уже была исправлена. ↩︎

6 лайков
No Lightbox for some resized images
2

У меня возникла такая мысль: есть ли причина не открывать все изображения в лайтбоксе? По крайней мере, те, которые могут удобно поместиться в информационную панель с небольшой иконкой «развернуть» на мобильных устройствах, не закрывая собой слишком большую часть изображения. Лайтбокс ценен не только тем, что позволяет увидеть изображение в полном разрешении, но и ещё по двум причинам:

  • Он отображает альт-текст (что крайне важно, так как альт-текст, скорее всего, будет предоставлен автором поста, в отличие от текста заголовка, поскольку альт-текст заполняется заранее, а синтаксис для текста заголовка более сложный), и
  • Изображение не пропускается при переключении между картинками после открытия лайтбокса.

Есть ли причина не открывать в лайтбокс изображения, которые можно рассмотреть целиком?

Один из вариантов — просто (помимо открытия всех изображений в сетках) открывать в лайтбокс каждое изображение, превышающее определённый размер на странице — скажем, больше 72×72 пикселей (я думаю в строках: всё, что выше примерно трёх строк по размеру). Что вы думаете об этом?

1 лайк
8

Я согласен и поднимал этот вопрос в прошлом, как вы указали в своём первом сообщении: Some images don't lightbox? - #3 by piffy

Суть проблемы, на мой взгляд, в том, что настройки «изменение размера» и «лайтбокс» связаны между собой.

Screenshot_20240619_044925_Chrome
Screenshot_20240619_044925_Chrome1080×820 117 KB

В идеале я бы хотел, чтобы настройки изменения размера были близки к значениям по умолчанию 690x500 пикселей, а настройки лайтбокса — к 72x72 пикселям (как для изображений размером больше крупного эмодзи или «стикера»).

Кажется, что основное назначение лайтбокса — просмотр изображения в оригинальном масштабе, но я чаще использую его как галерею в стиле карусели. Поэтому немного раздражает, когда изображение высотой 502 пикселя обрабатывается иначе, чем изображение высотой 499 пикселей, особенно если они находятся в одной сетке.

1 лайк
9

Кажется, это идеально передаёт мою мысль — это единственный случай, когда лайтбокс не нужен, верно: когда изображение либо «часть текста», либо «часть форматирования поста».

Мне кажется, это лучшее решение в целом — вынести «изображения для лайтбокса, превышающие размер […]» в отдельную настройку с гораздо меньшим значением по умолчанию. Логично, что она будет отличаться от текущей реализации ещё двумя способами:

  • Она должна оценивать размер на странице, а не исходный размер изображения.
  • Она, вероятно, должна требовать превышения обоих размеров, а не только одного — я не могу придумать случай, когда вам понадобился бы лайтбокс для изображения, скажем, 690×10 пикселей (на странице).

Касательно сценариев использования: иногда я вставляю маленькие изображения в стиле эмодзи, но в высоком разрешении, чтобы они не были размытыми на экранах с высокой плотностью пикселей. Например:

372×468 917 Bytes
! Это изображение не должно открываться в лайтбоксе, потому что 1) это эмодзи, но, что важнее, 2) маленькая иконка разворачивания в правом нижнем углу закроет большую его часть на мобильных устройствах. В данный момент оно не открывается в лайтбоксе, потому что исходное изображение в высоком разрешении меньше 690×500 пикселей (а именно 372×468 пикселей), но оно не должно открываться в лайтбоксе, даже если было уменьшено — истинным критерием для оценки должен быть его размер на странице.

1 лайк
10

Изображения с разрешением 100 x 100 пикселей или более теперь отображаются в лайтбоксе.

4 лайка