Представляем сетки изображений в постах

Может, инструмент для компоновки, где вы выбираете изображения, а он сам вставляет тег до и после?

4 лайка

Можно сделать что-то вроде:

.d-image-grid:hover {
  img {
    -webkit-filter: brightness(60%);
    transition: 0.5s; 
  }
}

.d-image-grid:not([data-disabled]) .d-image-grid-column img, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper, .d-image-grid:not([data-disabled]) .d-image-grid-column>.lightbox-wrapper>.lightbox {
  &:hover {
    img {
     -webkit-filter: brightness(100%);
     transition: 0.5s; 
    }
    transition: 0.5s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
}
3 лайка
[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

Хм, было бы здорово, если бы это работало. Я рекомендую пользователям ссылаться на свои внешние изображения, размещённые elsewhere, и отключил загрузку горячих ссылок для экономии места.

Следующий альтернативный вариант может сработать, но большинство пользователей не знают, как правильно оформить его в Markdown (они привыкли просто вставлять URL изображения на отдельной строке):

[grid]
![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg)
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)
![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg)
[/grid]

Вот ещё более сложный способ сделать внешние изображения кликабельными для просмотра в полном размере:

[grid]
[![](upload://jpg9rB3SiEPxoiEDzUQEfpqdyjC.jpeg "")](https://github.com/KDE/plasma-workspace-wallpapers/blob/master/IceCold/contents/images/5120x2880.png?raw=true)
[![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg "")](https://getwallpapers.com/wallpaper/full/b/5/f/563687.jpg)
[![](upload://nx1DA9CM5uUxhkR81asxo6Zzm5x.jpeg "")](https://www.pixelstalk.net/wp-content/uploads/2016/06/Download-hd-nature-wallpaper.jpg)
[/grid]



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

3 лайка

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

7 лайков

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

10 лайков

Это определенно похоже на ошибку!

1 лайк

:yum: Прекрасно. К сожалению, это недоступно ни по электронной почте, ни на опубликованных страницах. :cry:

2 лайка

Да, я подал отдельный отчёт об ошибке:

2 лайка

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

4 лайка

Это работает элегантно! Я только что сделал демонстрацию

Если это имеет какое-то значение, я проголосую за наличие функций компонента темы кнопок выравнивания изображений/.grid.

Если бы существовала функция для изображений, которую я хотел бы видеть, это была бы возможность добавлять подпись. В нашем сообществе я выступаю за указание авторства изображений, что не является лучшим использованием описания изображения.

8 лайков

Как насчёт того, чтобы добавить это хотя бы как опцию по выбору в основных настройках, включив явное предупреждение? Так администраторы форума смогут сами принять решение, если захотят, и будут знать, что нарушают спецификацию CommonMark.

С уважением,
Jr

1 лайк

Я понимаю ваше желание (у меня оно тоже есть — мне бы очень хотелось, чтобы несколько загруженных фотографий автоматически размещались в сетке без каких-либо действий со стороны пользователя), но с точки зрения поддержки такой вариант с явным включением функции неприемлем. Мы обслуживаем тысячи экземпляров Discourse, и если один и тот же разметочный код ведёт себя по-разному в одних экземплярах и иначе в других, это вызывает множество проблем. К сожалению, это невозможно поддерживать.

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

8 лайков

Я запускаю этот код

posts = Post.where(‘raw LIKE ?’, ‘%

%’)
posts.each do |p|
p.update!(raw: p.raw.gsub(/
(.*?)</div>/m, ‘[grid]\1[/grid]’))
p.rebake!
end

но получаю ошибку

Я удалил символ (') и ввёл его снова, но это не помогло.
Можете найти ошибку?
Спасибо!

3 лайка

Привет, Sora, сначала нужно запустить консоль Rails: rails c

3 лайка

Можем ли мы настроить автоматическую сортировку всех загружаемых изображений в аккуратную сетку по умолчанию?

5 лайков

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

Например, я создал сетку из 11 загруженных изображений. Восемь из них имели размер 640x480, что меньше значений по умолчанию для лайтбокса (690x500), а остальные три — 1200x372, 750x521 и 750x509. Последние три отображались в лайтбоксе (class=lightbox-wrapper). Первые восемь имели класс image-wrapper, поэтому они отображались примерно в размере 300x250, и у них не было возможности увеличить их до исходного большего размера.

(*) Такое поведение можно изменить, уменьшив настройки максимальной ширины/высоты изображений, но это повлияет на все остальные изображения на форуме.

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

3 лайка

Есть ли планы по дублированию изображений в сетках в электронных письмах?

3 лайка

На данный момент — нет. Если быть честным, работа с CSS в письмах по-прежнему вызывает массу проблем. Клиенты электронной почты сильно различаются друг от друга, и добиться последовательного отображения элементов крайне сложно.

5 лайков

Понял, спасибо за подтверждение :slight_smile:

3 лайка

Некрасиво, но может сработать: отправлять только одно составное изображение для сетки.

Для улучшения пользовательского опыта его можно связать с соответствующей сеткой на работающем сайте.

1 лайк