При клике на изображение оно откроется в стандартном просмотрщике лайтбокса.
Добавить галерею можно, нажав на значок сетки, а затем добавив изображения. Также можно сначала выбрать загруженные изображения, а затем нажать на значок.
→ Что вы имеете в виду под настраиваемым порядком?
Изображения могут располагаться горизонтально (слева направо) или вертикально. Горизонтальный порядок идеально подходит для изображений из журналов, комиксов и подобных материалов. Кроме того, при нажатии кнопки «Далее» в режиме лайтбокса будет показываться правильное изображение.
Ниже приведены изображения, иллюстрирующие разницу. Справа — горизонтальный порядок.
По умолчанию порядок — горизонтальный, но его можно изменить в настройках. Также можно изменить порядок конкретной галереи, добавив vertical/horizontal (работает также v/h) к атрибуту в редакторе, например: <div data-masonry-gallery="vertical">.
Я давно использую Tiles и очень мне нравится. Так что да, можно сказать, что этот компонент сильно вдохновлён им . Однако есть много различий, поэтому я решил поделиться им. Ниже приведён список некоторых отличий.
Отсутствие зависимостей.
Нет jQuery.
Горизонтальный порядок.
Маленькие изображения не ломают макет.
Правильный предпросмотр при редактировании.
Возможность выбора нескольких строк с переносами строк при добавлении галереи.
Использование функции API decorateCookedElement вместо decorateCooked.
Предложения и улучшения приветствуются!
Маленькие изображения будут отображаться в галерее, но лайтбокс для них не создаётся. Это стандартное поведение Discourse. Однако можно изменить, что считается маленьким изображением, изменив настройки max image width и max image height. По умолчанию значения составляют 690 пикселей и 500 пикселей соответственно.
Этот компонент использует версию API 0.8.42. Если вы не обновляли систему с мая 2020 года, вам необходимо выполнить обновление, чтобы использовать его.
Отличный компонент! Я уже давно искал замену галерее изображений в плитках!
Что вы думаете о добавлении опции автоматической галереи, чтобы применять её ко всем изображениям? По сути, всякий раз, когда есть три или более изображений подряд без каких-либо других элементов между ними, автоматически включается вид галереи в стиле «мазонка». (Плагин Tiles Image Gallery уже пробовал что-то подобное в своей ветке auto-tiles)
Да, я видел эту ветку. Это действительно интересная функция. Не знаю, сработает ли реализация из Tiles для этого компонента или потребуется другой код. Но обязательно изучу это!
Если на вашем сайте установлен плагин Tiles и вы хотите переключиться на Masonry, вам нужно изменить атрибут div-элементов галерей на data-masonry-gallery во всех старых постах с галереями. Это необходимо, если вы хотите, чтобы старые посты с галереями отображались корректно, но не хотите иметь оба компонента установленными одновременно.
Я решил поделиться этим способом, так как сам выполнил переключение на своём сайте. Возможно, это кому-то поможет.
Самый очевидный способ — редактировать посты вручную. Это работает, если у вас не слишком много постов, которые нужно изменить, хотя поиск каждого поста всё равно может быть утомительным. Но не волнуйтесь, на помощь придёт Data Explorer! Запустите следующий SQL-запрос, и вы получите именно то, что нужно.
SELECT user_id, topic_id, post_number
FROM posts p
WHERE raw ~~ '%data-theme-tiles%'
Если постов слишком много для ручного редактирования, вы можете использовать rake для замены всех вхождений строки. Для этого вам нужно подключиться к серверу по SSH и выполнить:
cd /var/discourse
./launcher enter app
rake posts:remap["data-theme-tiles","data-masonry-gallery"]
Подробнее об этом решении можно прочитать в этом посте. Обратите внимание на предупреждение из того поста относительно команды rake posts:remap:
Скорее всего, существуют и другие способы сделать это. Например, при желании вы можете изменить код компонентов так, чтобы он искал оба атрибута.
Эта функция почти готова. Я немного доработал код из Tiles, теперь нужно провести ещё несколько тестов (с разными сценариями/изменениями на сайте). Постараюсь найти время и сделать это в ближайшее время, но всё должно быть готово в течение недели. Если бы у меня было больше времени .
Теперь я могу полностью заменить проблемный TC «Tiles Image Gallery».
@Heddson
Просто интересно, планируете ли вы создать аналогичный TC, чтобы заменить и «Slick Image Gallery» тоже?
У «Slick Image Gallery» есть те же проблемы, что и у «Tiles Image Gallery»: например, маленькие изображения ломают макет, а превью не может правильно замедлить галерею и т. д.
На данный момент у меня нет таких планов. Возможно, позже, если будет время. Если это небольшая правка, я, возможно, смогу отправить запрос на слияние (pull request).
Я только что обновил компонент, добавив функцию автоматической галереи. После обновления вы сможете включить её в настройках.
Можно указать категории, а также задать минимальное количество изображений, необходимых для автоматического создания галереи (без каких-либо других элементов или пустых строк между ними).
Хотел просто сказать, что это работает идеально сразу из коробки. У меня были проблемы с двумя другими упомянутыми компонентами, поэтому это просто великолепно.
Я также добавил атрибут div grid (или g) для стиля сетки (несмотря на название компонента ), который устанавливает фиксированную высоту для каждой строки (равную высоте самого высокого изображения в строке). Это может быть удобно, если у вас есть изображения примерно одинаковой высоты.
Мы в настоящее время тестируем стабильную версию 2.8. Функция «Автоматически включаемые категории» не срабатывает, когда определена конкретная категория. Мы пробовали добавлять slug категории и ID категории. Когда «Автоматически включаемые категории» оставлены пустыми, всё работает.
Хм, это странно. У меня на версии 2.9.0.beta1 всё работает, а она практически идентична стабильной 2.8. Должно быть добавлено именно название категории. Но я попробую разобраться, не смогу ли я что-то найти.
Эта функция теперь встроена в ядро Discourse, см. объявление о сетках изображений в Discourse.
→ Что вы имеете в виду под настраиваемым порядком?
→ Этот компонент очень похож на Tiles image gallery Джо. Это клон или что?
. Однако есть много различий, поэтому я решил поделиться им. Ниже приведён список некоторых отличий.Маленькие изображения будут отображаться в галерее, но лайтбокс для них не создаётся. Это стандартное поведение Discourse. Однако можно изменить, что считается маленьким изображением, изменив настройки
.
), который устанавливает фиксированную высоту для каждой строки (равную высоте самого высокого изображения в строке). Это может быть удобно, если у вас есть изображения примерно одинаковой высоты.