連続したマークダウンフォーマットとHTMLの混在により画像が読み込まれません

サポート
1

Fedora プロジェクトのディスカッションサイト（当社のコミュニティブログから）に投稿されたスニペットは以下の通りです：

<p>ご意見をお聞かせください。検索エンジンフィールドが追加された今、これをホームページとして使用しますか？さらに改善するにはどのようにすればよいとお考えですか？</p> ![](upload://na9g3dGvhEU753JEnGrz8xER4XS.png)<p class="has-text-align-center">または</p> ![](upload://def2zSzNAJtyuOorvTI2eV7rGW1.png)<p>さらに詳しくご覧になりたい場合は、<a href="https://discussion.fedoraproject.org/t/how-do-you-feel-about-the-new-design-of-start-fedoraproject-org-page/28689">Figma のドラフト</a>をご覧ください。</p>

ご覧の通り、これらの Markdown の画像行は実際には改行の後に始まっていません。このため、画像が表示されません。メッセージを編集して、各 ![] の前にキャリッジリターンを追加すると、画像が正しく表示されます。

この問題を解決するために設定を変更することはできますか？それともこれは単にプラグインのバグでしょうか？

2

@mattdm さん、こんにちは。

もし公開されている場合は、元の WordPress 投稿と、抜粋付きの Discourse 投稿へのリンクをご共有いただけますでしょうか？

WordPress Discourse プラグインは、WordPress 投稿に含まれる HTML をそのまま Discourse に渡すだけであり、Discourse 側で Discourse 投稿への埋め込み用に処理されます。したがって、Discourse 内の WordPress 投稿のスニペットで HTML がどのように表示されるかは、以下の 2 つの要素に依存します。

  1. WordPress 内の HTML の元の構造（例）
  2. Discourse の Markdown パースが、Discourse 投稿内の表示のために HTML をどのように解析するか（例）

つまり、これは WordPress Discourse や Discourse 自体の範疇を超えた WordPress の HTML 構造に関する問題か、あるいは HTML パースがどのように動作すべきかという意見の違いが大半を占める問題です（ただし、この点で明確な改善が可能な場合もあります）。

とはいえ、解析の細部を探ることは時に有益ですので、WordPress 投稿の HTML 構造についてさらに詳細な情報があれば共有してください。改めて調査いたします :slight_smile:

3

この Discourse の投稿で似た問題が発生しました。これは RSS ポーリングプラグイン（WordPress プラグインではありません）によって作成されたものです。

最初の行にある ™ は実際には HTML の <img> タグでしたが、RSS プラグインはこれを正しく引き継ぎました。しかし、Discourse が「画像のローカルコピーをダウンロード」する処理を行った際、投稿が壊れてしまいました。

image
image1095×300 70.7 KB

image
image1096×248 73.1 KB

「いいね！」 1
4

@mattdm さんの問題も同じようですね：

image
image899×583 117 KB

「いいね！」 2
5

@simonk 有用な調査をありがとうございます。お二人とも、サイトの設定「無効な画像ダウンロードドメイン」に WP のドメインを入力することで、この問題に対処できます。

より深くこの問題に取り組む、つまり自動化された方法で対応しようとする場合、@mattdm のケースと yours のケースの違いが、その複雑さを示しています。@mattdm は、HTML の <p> と <img> 要素に対するブラウザの処理が、マークダウン上の改行として引き継がれることを期待していますが、あなたの場合はほぼ（完全にではありませんが）その逆を期待しています。つまり、元の HTML 内の既存の <img> と同じ寸法で、画像がインライン表示され続けることを期待しているのです。

この問題の側面について詳しくは、既存の投稿をご覧ください。例えば：

「いいね！」 2
6

@simonk さん、ありがとうございます。その通りです。

@angus さん、これによる影響は何でしょうか？画像が一切表示されなくなるのか、それとも WordPress サイトの元の画像へクロスリンクされるのでしょうか？

7

しかし、マークダウンをレンダリングする代わりに Discourse が生のマークダウンを表示させてしまうような挙動は、決して正しいはずがないと、私たちは全員が同意できるはずです。特に、そのマークダウンがプラグインによって作成されたものである場合、なおさらです。何か見落としているのでしょうか？

8

画像は元の画像へのホットリンクになります。

すみません、混乱しています。行改行に関するご懸念だと思っていましたが、公開されたバージョン（つまり、編集ではなく単に閲覧している状態）に生の Markdown が含まれていることがご懸念ということでしょうか？

プラグインは生の HTML を送信するだけです。Markdown は投稿が Discourse で処理される際に生成されます。

disabled image download domains を試してみて、どのように動作するかご確認ください。

9

改行がないため、Discourse がページを表示する際（編集者ではなく一般ユーザーに対して）、![](upload://def2zSzNAJtyuOorvTI2eV7rGW1.png) という部分が画像として表示される代わりに、そのままのテキストとして表示されてしまいます。実際に画像が表示されるためには、自動投稿された後に人間が介入し、投稿を編集して各画像インスタンスの前に改行を追加する必要があります。

10

それは可能ですが、画像をダウンロードする方が 好ましい です。他のサイトがダウンしている場合やブログが変更された場合などに、これは便利な機能です。また、ホスティング容量に近づいているわけではないので、容量については心配していません。

11

なるほど、明確にしていただきありがとうございます。正直に申し上げますと、私が上記のトピックで議論した理由により、この状況が近いうちに変わることはまずありません。例えば、

私たちにとって最も重要なのはコンテンツの完全性を保つことです。そのため、改行による解決策は採用されないでしょう。

という点です。

問題は、ご指摘の現象を自動修正しようとすると、他の問題を引き起こす可能性があることです。現時点での解決策は、サイト設定の「画像ダウンロードを無効化するドメイン」に、お使いの WordPress ドメインを追加することです。

追記 これについて小さな提案をしましたが、現時点では推測の域を出ません。繰り返しになりますが、現在の解決策は、WP ドメインの画像ダウンロードを無効にすることです。

12

根本的なことがよくわかりません。現在の動作によってコンテンツの整合性が保たれているのでしょうか？明らかにそうではありません。

HTML をマークダウンに置き換えるのであれば、正しくレンダリングされるマークダウンに置き換えることが、唯一正しい答えだと思われます。

WordPress 側で何か特別なことをしているわけではありません。通常のブロックエディタを使用し、画像も通常の WordPress の方法で追加しているだけです。

「画像のダウンロードを無効化」設定を試してみますが、何の問題もなく動作することを本当に強く望んでいます。

13

おっしゃる意図はよくわかります。それが理想であるとは私も否定しません。しかし、マークダウン駆動のディスカッションエンジンを完璧な HTML レンダリングエンジンとしても機能させるのは簡単なことではありません。個別のケースは表面的には単純に見えても（例えば「単に改行を追加する」など）、実際にはそうではありません。

Discourse 上でブログ記事の完全な HTML をレンダリングできる機能は確かに便利ですが、結局のところ、これはマークダウン形式のディスカッションに焦点を当てたシステムにおける機能の一つに過ぎません。

私がリンクしたディスカッション、特に David の最近の投稿 をご覧いただければ、ここで検討できるいくつかの可能性があることがおわかりいただけると思います。その中の一つが実を結び、この特定のケースに対処できるかもしれません。もしより簡単な解決策があれば、もちろん Discourse に対してそれを修正する PR を提出します。

画像のダウンロードを無効化することに関連する問題があれば、お知らせください。それについても対応できるよう一緒に取り組みます。技術的な側面で実現可能な道筋が見つかりましたら、改めてご連絡いたします。

「いいね！」 2
14

ありがとうございます！助かりました！

設定を更新しましたので、どのように機能するか報告いたします。