Если в посте Discourse много изображений, теперь их можно автоматически расположить в аккуратную сетку. Всё, что нужно сделать, — обернуть их в теги [grid] ... [/grid], и изображения будут красиво упорядочены. Это базовая функция, доступная с момента этого коммита, и она включена во всех экземплярах Discourse.
Эта функция похожа на несколько тематических компонентов (Masonry Image Gallery, Tiles Image Gallery). Главное отличие заключается в том, что расположение изображений в сетке выравнивается как по верхнему, так и по нижнему краю элемента. Вот несколько дополнительных технических замечаний:
на мобильных устройствах сетка по умолчанию имеет 2 колонки, на настольных компьютерах — 3
если в сетке ровно 4 элемента, изображения будут расположены в 2 колонки
также можно использовать не только изображения (например, видео), но тогда выравнивание может быть не идеальным
элементы в сетке располагаются так, чтобы высота колонок была максимально близкой друг к другу, поэтому порядок изображений не всегда сохраняется
Включение или отключение сетки также можно выполнить, нажав на небольшой значок переключения рядом с первым изображением в группе изображений в предпросмотре редактора:
Верно, это не должно повлиять. Я полагаю, что в качестве миниатюры выбирается первое изображение, найденное в посте (исключая аватары, эмодзи и тому подобное). Кроме того, я не вижу сценария, в котором первое загруженное изображение не будет первым в сетке (переупорядочивание возможно только для последующих изображений в списке).
Хм, да, в композере это сейчас работает только с загрузками. (То есть вставка URL изображения и его обертка в теги [grid] в композере тоже не работает.)
К сожалению, нет, это не работает с опубликованными страницами. Аналогичные функции постов на основе JavaScript (лайтбоксы, опросы, оглавление) также не работают с опубликованными страницами.
Это должно сработать. Конечно, сделай резервную копию и внимательно проверь предыдущие посты с использованием Masonry на предмет нежелательных результатов…
posts = Post.where('raw LIKE ?', '%<div data-masonry-gallery>%')
posts.each do |p|
p.update!(raw: p.raw.gsub(/<div data-masonry-gallery>(.*?)<\/div>/m, '[grid]\1[/grid]'))
p.rebake!
end
При включённой настройке авто-генерации… В исходном тексте нет <div data-masonry-gallery>, поэтому скрипт, думаю, не сработает. Но в данном случае они не конфликтуют друг с другом.
Планируется ли сделать сетки автоматическими? Если это произойдёт, я смогу просто пересобрать сообщения и сохранить макет сетки. До тех пор, думаю, я могу скрыть кнопку сетки и безопасно использовать компонент темы.
Есть ли кто-то в CDCK, кто может повлиять на разработчиков Chrome? Поддержка CSS Masonry для Grid?
Masonry уже должна быть частью CSS. Это один из немногих макетов, который позволяет красиво учитывать разные соотношения сторон наборов изображений (или, в общем, любого содержимого элементов).
Очень расточительно и бессмысленно запускать это повсюду через JavaScript…
Я рад, что Safari поддерживает Masonry — у них лучшая история перехода функций от черновика к экспериментальной версии и далее к полной поддержке. Поддержка Masonry в Firefox уже более двух лет скрыта за флагом. Скорее всего, поддержка в Safari станет главным фактором, подталкивающим Chrome к обновлению.
Да, но не без тегов [grid]. Автоматическое преобразование изображений в сетку без тегов нарушило бы спецификацию CommonMark, и мы очень не хотим этого допускать. (В моей первой внутренней черновике этой функции я действительно начинал с автоматической сетки.)
Вместо этого следующим шагом, который я обдумываю, является возможность автоматически добавлять обёртки [grid] к загрузкам нескольких изображений, вероятно, 3 и более. Это было бы особенно полезно для загрузок с мобильных устройств, так как ручное добавление тегов на телефоне неудобно, и если вы загружаете 3+ изображения одновременно со своего телефона, скорее всего, это фотографии, которые хорошо подходят для макета сетки.
У нас пока нет планов по срокам добавления этой функции, но это определённо то, что мы хотели бы реализовать.
Тем не менее, должно быть возможно генерировать статический HTML из JavaScript и публиковать «обработанный» DOM, чтобы включить ряд полезных функций, таких как эта сетка и оглавление.
Только скомпилированный HTML недостаточен. Сетка, оглавление и аналогичные функции также требуют JavaScript, который взаимодействует с HTML для реализации этих возможностей. Этот JavaScript находится внутри приложения Ember, и его сложно извлечь для опубликованных страниц, не использующих Ember.
Вчера я немного поэкспериментировал с этим и мне посоветовал оставить свои отзывы и мысли здесь, в этой теме…
Мне нравится, что это «автоматически» — оно само устанавливает сетку.
Было бы здорово добавить возможность упорядочивать изображения, не копируя и не вставляя их заново в списке — возможно, просто добавляя цифры в начало имени каждого изображения?
Мне нравится, что в режиме предпросмотра можно легко отключить сетку, но чтобы вернуть её, нужно снова добавить код. Это область, где можно улучшить опыт: например, показывать значок сетки, когда добавлено более одного изображения, чтобы можно было включать/выключать её по мере необходимости.
И ещё одна возможная будущая функция — возможность выбрать конкретное изображение для «выделения» или акцента в сетке, чтобы оно отображалось крупнее остальных или как-то иначе выделялось.
В целом, однако, это отличная новая возможность добавлять несколько изображений, не перегружая пост
эту проблему:
Теперь поддержка CSS Masonry для Chrome и Edge!