画像におけるパディングの不整合

ちょっとした不満ですが、投稿プレビューに表示される内容と、実際に投稿された内容の間にわずかな違いがあり、アップロードされた画像かホットリンクされた画像かによって異なります。


ホットリンクされた画像、このテキストの後に空行はありません:


テキストが続きます。その前に空行はありません。

アップロードされた画像、このテキストの後に空行はありません:


テキストが続きます。その前に空行はありません。

「いいね!」 1

ホットリンクされた画像の前のテキスト、テキストの後に空行なし:


後のテキスト、その前に空行なし。

アップロードされた画像の前のテキスト、テキストの後に空行なし:


後のテキスト、その前に空行なし。

ホットリンクされた画像には、次の CSS が適用されています。

.d-editor-preview img {
    padding-bottom: 1.4em;
}

一方、アップロードされた画像には次の CSS が適用されています。

.d-editor-preview .image-wrapper img {
    padding-bottom: 0;
}

リモート画像が Discourse にダウンロードされた場合も同様に発生します。この場合、寸法が設定されていないため、プレビューに image-wrapper が作成されません。

リモート画像がダウンロードされました。
![](upload://8af8gZpoBRQh1Lf7j8YsQHFWnFw.jpeg)

アップロードされた画像:
![563687|690x388](upload://oOqqJbiN2BL6Ju752OD87dlJqbI.jpeg)

「いいね!」 2

興味深いですね。ありがとうございます。

ホットリンクされた画像がダウンロードされる場合、最初に公開された投稿では画像と上のテキストの間にパディングがありませんが、数分後にキュー内のプロセスがリモート画像をダウンロードするためにトリガーされると、パディングが増加することにも気づきました。これは、投稿履歴の修正として、パディングギャップの視覚的な変更で見ることができます。

「いいね!」 2

投稿を再構築し、画像ビューアですべてのHTMLを追加するため、マージンまたはパディングが異なるのだと思います。

「いいね!」 1

なるほど、ありがとうございます。それらの不整合がいくつか修正されると良いですね。驚くべきことに、ユーザーはそれに気づき、特に他のフォーラムエンジンでWYSIWYGエディターに慣れていると、それらにイライラします。リモート画像がダウンロードされた後に投稿のレンダリングが自己変更するのはさらに奇妙ですが、技術的な理由があることは完全に理解しています。

「いいね!」 1

はい、いくつかの矛盾があります。
例えば、同様のものです。

「いいね!」 1

この奇妙な挙動のいくつかは、@Johani変更 をマージすると解消されると考えています。

「いいね!」 2