Галерея изображений Masonry

Я согласен с тем, что вы говорите. Я не разработчик Discourse, поэтому не знаю, что возможно, а что нет.

2 лайка

Ошибка в GitLab теперь исправлена. Спасибо, что сообщили об этом @Jagster! :star:

2 лайка

Просто из любопытства, как работает этот кусок кода:

    &::before,
    &::after {
      content: "";
      flex-basis: 100%;
      width: 0;
      order: 2;
    }

Я вижу, что это что-то сдвигает, но до конца не понимаю, как именно :thinking: 2 псевдоэлемента, без какой-либо ширины, оба размещаются на второй позиции…?

Привет, @chapoi!

Эти два псевдоэлемента нужны, чтобы предотвратить слияние колонок. У них нет ширины, так как они не предназначены для отображения, но на изображении ниже они показаны синими линиями.

Без них колонки могли бы начать сливаться, если высота колонок сильно различается.

Элементы 3, 6 и 9 на изображении выше настроены на третью колонку (с свойством order, установленным в 3). Но если мы удалим псевдоэлементы, третья колонка начнётся сразу под второй колонкой (даже с order 3). См. изображение ниже. «Третья колонка» выделена зелёным.

Это происходит потому, что flexbox проверяет, есть ли место в предыдущей колонке (по сравнению с самой высокой колонкой). Если места достаточно для размещения первого элемента, он вставит его туда.

Однако псевдоэлементы действуют как колонки, поэтому flexbox проверяет псевдоэлемент (вместо реальной колонки) на наличие свободного места. А так как у псевдоэлементов высота 100%, flexbox не найдёт свободного места, и третья колонка начнётся там, где мы хотим.

Надеюсь, всё понятно. :sweat_smile:

2 лайка

Очень хитрое решение!

К сожалению, я сам этого не придумал. :grin:

Один из пользователей форума, который я веду, отметил, что при повороте экрана мобильного устройства (планшета, телефона) изображения не подстраиваются корректно под новое разрешение. Это происходит, когда у изображений другое соотношение сторон (слишком высокое), чем у экрана. В результате сверху и снизу изображения остаются пустые области. Возможно ли это оптимизировать? Я не знаю, возможно ли это вообще или легко реализуемо.

Спасибо за обратную связь! Да, при повороте устройства обновление не происходит. На тот момент я не нашёл решения этой проблемы, но я займусь этим снова.

1 лайк

К сожалению, я пока не нашёл достаточно хорошего способа обработки перевернутого устройства.

Ещё один момент: если вы не видели анонс, сетки изображений теперь добавлены в ядро. Они работают не совсем так, как этот компонент темы, но выглядят очень здорово, и здорово, что они теперь в ядре. Ознакомьтесь с этой темой:

6 лайков

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

Это баг или просто такая особенность, из-за которой это не будет работать с ссылками?

1 лайк

Привет, @Octoberon! Оно не было разработано для работы со ссылками/onebox, так что, скорее всего, проблема в этом. Оно предназначено для открытия лайтбокса при клике на изображение. Хотя у меня уже был похожий запрос некоторое время назад… :thinking:

Кстати, как ты добавил ссылку на изображение?

2 лайка

Да, я тоже задумывался, что это может быть так. Чтобы создать ссылки, я просто выделил текст для изображения и использовал обычную кнопку гиперссылки в редакторе, чтобы вставить ссылку на другой пост на том же форуме.

1 лайк

В теме «Сетка изображений» кто-то упомянул скрытие кнопки редактора. Возможно, это уже решается через CSS или что-то подобное, но я подумал, что это может быть интересно и другим. Возможно, кнопка не нужна, если включено автоматическое создание. :slight_smile: В любом случае, опция скрытия кнопки теперь добавлена.

1 лайк

У кого-то ещё возникают проблемы с функцией авто? Мы протестировали её в версиях 3.1 и 3.2 (стабильные), и в обоих случаях она не работает: галереи в стиле «masonry» не создаются, хотя категории настроены правильно.

1 лайк

Привет, @jrgong! Странно, у меня всё работает. Можешь прислать ссылку на пост, который не работает?

1 лайк

Не удалось увидеть тот пост, так как нужно войти в систему. Извините.

Кажется, я когда-то входил в эту тестовую среду (правильно?), но сейчас не могу найти данные для входа.

1 лайк

Привет

Извините, эта ссылка работает: 350ml Challenge Just4Fun 🚀 Auf geht's 🚀 [Finale] - #91 von Hoppsi - Contests - Forum | Cannabisanbauen.net

2 лайка

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

Я заметил, что между изображениями есть пустая строка. Включили ли вы настройку автоматически разрешать пустую строку?

1 лайк

Да, оба параметра были включены всё это время

1 лайк

Не удалось воспроизвести эту проблему. Единственное, что приходит в голову, — возможно, установлен другой компонент темы (или плагин), который конфликтует с Masonry Image Gallery.

1 лайк