画像を常に別段落として挿入する設定

当コミュニティでは、ユーザーの多くは画像を新しい行に挿入したいと考えています。

しかし、Markdown の画像コードを理解できず、常に混乱しています。彼らはコンピューターのスキルが非常に低いユーザーです。

その結果、画像を挿入した後に同じ行にテキストを入力したり、テキストを入力した直後に画像を挿入したりしてしまいます。

これは見栄えが悪く、上級者にとってやや混乱を招くことを承知で、大半のケースを自動的に解決する方法を探しています。

2 つの設定、あるいは少なくとも 1 つの設定を導入することは可能でしょうか?

  1. 画像を常に新しい独立した段落として挿入する。

  2. 直前に挿入された画像コードの後に、常に改行(または段落を構成するための 2 つの改行)を挿入する。

これは理にかなっていますか?
それとも、この問題に対処するためのより良いアイデアはありますか?

「いいね!」 11

eviltrout さん、多くの Discourse サイトでこの混乱を目にしています。

「いいね!」 7

これを設定にするべきかどうか疑問に思います。画像を新しい段落なしで貼り付けたいことは、どのくらいありますか?もしかすると、常にこの動作を行うように振る舞いを変更すべきかもしれません。

「いいね!」 8

はい、それに賛成です。@sam が同意してくれれば、デフォルトをそのように変更しましょう。

「いいね!」 7

画像を右揃えや左揃えにしたり、複数の画像を挿入してサイズを50%に調整して、きれいなフォトギャラリーのように見せたいことがあります。そのような場合、すべての画像を個別の段落に配置したくはありません。

これを行う人や気にする人が何人いるかはわかりませんが、現在の仕組みに混乱する人の数と比較すると、まだ多くの人にとってMarkdownは混乱を招くものです。

「いいね!」 1

まれなユースケースであり、これを最適化するべきではありません。一般的なユースケースに焦点を当てるべきです。

「いいね!」 10

追記ですが、複数の画像を一度にアップロードすると(少なくとも iOS では)、画像間にスペースのみが挿入されるため、改行を追加するために毎回戻って設定する必要があります。

「いいね!」 3

そして、しばらくの間、スペースさえ追加しませんでした!!:scream:

「いいね!」 7

ユーザーは、画像の下にキャプションを追加しようとした際や、誤って冒頭の ! を削除してしまった際に、投稿が崩れてしまうことがよくあります。画像アップロード後に改行を2回入れる機能を追加すると非常に役立ちます。この件について進展はありますか?

「いいね!」 4

はい、これを再開すべきですね。リリースに含められそうな簡単な案件かもしれません。@andrei さん、いかがでしょうか?

「いいね!」 6

これは設定ではなく、デフォルトの動作として実装されています。デバイスから画像をアップロードする際:

  • カーソルが空白以外の行にある場合、画像の前に改行を追加します
  • 画像の後は常に改行を追加します
  • 複数の画像をアップロードする場合は、画像間に改行を追加します

重要な点は、常に改行を 1 つ 追加し、2 つは追加しないことです。

現在はマージ済みです:

「いいね!」 9

これは素晴らしい改善ですね!

素早い(未検証の)考えですが、これは画像をグリッド表示しようとするテーマのコンポーネントに問題を引き起こすでしょうか?例えば、Tiles Image GalleryMasonry Image Gallery などがそうです。

「いいね!」 6

Masonry Image Galleryについては、これは問題ありません。改行や段落を処理するようにコードされています。

素晴らしいマージですね!

「いいね!」 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