Настройка для вставки изображений всегда отдельными абзацами

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

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

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

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

Можно ли реализовать два варианта настроек или хотя бы один из них?

  1. Всегда вставлять изображение в новый отдельный абзац.

  2. Всегда добавлять перенос строки (или два переноса, чтобы создать абзац) после только что вставленного кода изображения.

Имеет ли это смысл?
Или есть ли лучшая идея, как решить эту проблему?

11 лайков

Я видел эту путаницу на многих сайтах Discourse, @eviltrout.

7 лайков

Интересно, должно ли это вообще быть настройкой? Как часто вы хотите вставлять изображение без нового абзаца? Возможно, поведение следует изменить так, чтобы это всегда делалось автоматически.

8 лайков

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

7 лайков

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

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

1 лайк

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

10 лайков

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

3 лайка

И какое-то время мы даже пробел не добавляли!! :scream:

7 лайков

Я заметил, что мои пользователи часто загружают несколько изображений сразу, но затем портят пост, пытаясь добавить подпись под изображением или случайно удалив начальный символ !. Было бы очень полезно добавлять две пустые строки после каждой загрузки. Есть ли какие-то новости по этому вопросу?

4 лайка

Да, стоит вернуться к этому. Возможно, это несложная задача, которую можно включить в релиз… @andrei?

6 лайков

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

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

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

Это уже объединено:

9 лайков

Это отличное улучшение!

Быстрая (не проверенная) мысль: не вызовет ли это проблем для компонентов темы, которые пытаются отображать изображения в сетке? Например, Tiles Image Gallery или Masonry Image Gallery?

6 лайков

Что касается галереи изображений Masonry, то это не проблема. Она запрограммирована на обработку переносов строк и абзацев.

Отличное слияние!

4 лайка

Мне это интересно. С точки зрения UX, пробел между загруженными изображениями кажется мне более логичным.

Без пробела при загрузке:



С добавленным пробелом:

4 лайка

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

3 лайка

К сожалению, это вызывает проблемы с Tiles Image Gallery. Я проверил: оно поддерживает только изображения, разделённые пробелами, а не переносами строк.

Возможно, я займусь этим на следующей неделе.

3 лайка

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

1 лайк

С одной новой строкой всё отлично. :+1: Легко настроить с помощью CSS.

.cooked img {
    margin-bottom: 3px;
}
5 лайков

И не забывайте: если вы хотите настроить предварительный просмотр, нужно сделать что-то вроде этого. :slight_smile:

.d-editor-preview img {
    margin-bottom: 3px;
}
3 лайка

Вот исправление для Tiles Image Gallery

4 лайка