WP 5.3 で Discourse への画像公開が機能しない

サポート WordPress
1

I’m guessing this is related to the changes to blocks in the 5.3 update. You can see the post here: In Conversation with Anna Morgan - In Layers: Conversations - Nature Photographers Network

FYI I also have this snippet for CDN images

add_filter( 'wp_discourse_excerpt', 'wpdc_custom_excerpt' );
function wpdc_custom_excerpt( $content ) {
    
    return apply_filters( 'as3cf_filter_post_local_to_s3', $content );
}
4

I am also getting this error in my dashboard which I’m fairly certain is from the Wordpress plugin.

I came across this post WP Discourse plug in being odd but I am on 1.9.7 and the publishing username is an active account.

5

I’ll be looking into this today. What I’m seeing on my site is that images published from WordPress are displayed correctly until Discourse attempts to download the remote image. When that is done, I’m ending up with markup like you are getting in the post:

![](upload://kw9YUV5qtquQf5xwatRof6S9RmK.jpeg)

I am not sure if this is related to changes in WordPress 5.3.

If you are getting the We detected an API request using a deprecated authentication method warning, that will not be causing the issue you are having with images. WP Discourse versions 1.9.6 and greater should not be causing that warning. All API requests from the plugin are now using header based authentication.

6

The problem seems to be that when the Discourse upload markdown is wrapped in HTML tags, the markdown isn’t getting parsed. For example, this is what I’m seeing for a WordPress post after the Discourse PullHotlinkedImages Job is run:

<small>Originally published at:			https://scossar.com/figure-tags-cause-issues/
		</small><br>
<figure class="wp-block-image">![](upload://3hPHOMnM5v5srjlz5QWGmVxY4AL.jpeg)</figure>

Editing the post to remove any html tags that are surrounding the markdown link solves the issue, but a proper solution will need to be found for this.

7

Sorry to bug, but are you working on this Simon or has someone been assigned to it?

8

The issue is that when posts with images are published to Discourse, the post’s HTML initially looks something like this:

<figure><img src="https://example.com/wp-content/uploads/your-image.png" /></figure>

If the download remote images to local site setting is enabled on Discourse, the image link will break when Discourse downloads the post from WordPress. The problem will happen any time an image tag with a remote URL is wrapped with HTML tags.

The easiest solutions for this issue are to either disable the download remote images to local site setting, or to not publish full post content from WordPress to Discourse.

In the future, the WP Discourse plugin may remove the option to publish full posts. There are multiple issues that can occurr when publishing full post content from WordPress to Discourse. Most of these issues should be able to be solved by publishing excerpts from WordPress to Discourse and then using the Show Full Post button to display the full post on Discourse. Does this sound like something that could work for your case?

Another possible solution would be to customize the template that is used to publish WordPress posts. Images could be extracted from the posts and then published along with a post excerpt. With a custom template, the image HTML could be structured in a way that doesn’t conflict with the Discourse markdown processor.

9

Thanks Simon, download remote images to local was the easy solution for now. I am discouraged to hear that publish full posts may go away. The way I currently use it is by publishing a post to wordpress, which then gets published to the Articles section on discourse, which is set to Watching First Post for everyone by default. This way everyone gets an email with the full content of the article, and the best part is they can just reply to the email to add a comment, if they have to take that extra step of visiting the site it’s likely most won’t read the article if there’s just a little snippet, especially if it doesn’t have images which is really important for our site. If publish full posts went away I may consider going away from wordpress and only publish the articles directly in discourse which is not ideal for SEO, etc. but I think the engagement is more important.

10

完全な公開機能も欠かせません。
ここで提案されている内容が 100% 理解できていません…
画像をどのように抽出するのでしょうか？正規表現を使うのでしょうか？
画像タグを適切な Markdown 構文に置換する正規表現を想像できます。それはあなたが意図していることで、それは機能するでしょうか？

11

いいえ。過去にそのような試みをしていたら、そうしようとしたかもしれません。この Stack Overflow の投稿がその問題をある程度説明しています：https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454。

プラグインが投稿コンテンツの基本的な HTML バージョンを組み立てるのがどの程度難しいか調べてみます。最後の手段として、DOMDocument のメソッドを使ってコンテンツを解析する方法もあります。Discourse から返されるコメントはこれらのメソッドで解析されており、それに関する問題報告は受けていません。

抜粋を公開し、Discourse の「完全な投稿を表示」ボタンをクリックしてユーザーが全文を表示できるようにするのが、おそらく最良の解決策だと思いますが、WP Discourse プラグインから「完全な投稿を公開」オプションを削除するのはためらわれます。

12

ご説明いただき、ありがとうございます。
投稿者に記事を投稿し、「更新」ボタンをクリックするよう依頼します。WP で記事を投稿してから更新すると、Discourse 上の画像が常に正しく表示されるからです。

投稿者に記事ごとに 1 秒余計に時間をかけてもらうとしても、公開オプション全体が消えてしまうよりはマシですからね :wink:

13

Discourse の「リモート画像をローカルにダウンロードする」というサイト設定が有効になっている場合、投稿が更新されてから数分以内に画像が再び消えてしまわないでしょうか？もしそうではないのであれば、なぜそれが問題を解決するのか調査します。

14

この設定を有効にしていますが、数日〜数週間経過した最新の投稿でも画像は正しく表示されています。画像の問題に遭遇した例として、1 ヶ月前の投稿 こちら をご覧ください。

また、Discourse 側の画像 URL を確認したところ、WordPress からのリンクのままとなっており、画像が Discourse にダウンロードされていないことがわかりました。これは、サイトとフォーラムが同じドメインを共有していることが原因なのでしょうか？

（サイト：https://monocycle.info、フォーラム：https://forum.monocycle/info）

15

Discourseスレッドを更新しても、画像の代わりに巨大な破損したサムネイルが表示されたままです。投稿を編集すると、以下が < > 内に表示されます。

img src="http://mysite.com/wp-content/uploads/2020/03/asha2.jpg" class="ss-hidden-pin-image" alt="Blog" data-pin-url="" data-pin-media="http://mysite.com/wp-content/uploads/2020/03/asha2.jpg" data-pin-description=""/

16

あなたの WordPress サイトは http ですか、それとも https ですか？

17

現在は http ですが、https についても検討しています。

18

ページが HTTPS の場合、ブラウザは安全でないソースからのコンテンツを読み込みません。

画像の読み込みに HTML 要素に依存している場合、メインサイトが HTTPS を使用するようになるまで機能しません。

19

WordPress プラグインリポジトリに WP Discourse バージョン 2.0.2 をプッシュしました。このアップデートにより、ブロックエディターを使用して投稿を Discourse に公開する際に発生していた画像の破損の問題が修正されます。

画像、画像ギャラリー、さらに YouTube や Vimeo の動画も、投稿から抽出され、Discourse が処理できる形式でフォーマットされるようになりました。アップデート後に問題が発生した場合はお知らせください。Discourse 上で正しくレンダリングされない WordPress ブロックがまだある場合は、ご報告ください。ブロックは現在、名前でパースできるようになったため、あらゆる問題の解決が可能になるはずです。

来週、プラグインでは対応が難しい非常に特殊なブロックをパースするためにフックできるフィルターを追加する予定です。

20

アップデート後にいくつかの問題が発生しています。

WP では「クラシックエディター」（TinyMCE）を使用しています。

古い記事には [video] ショートコード内に動画 URL が含まれており、最近の記事（3 年未満）では、動画 URL を [arve] ショートコード内に格納する ARVE 動画埋め込みプラグインを使用していました。
そこで、WP の投稿を Discourse にフィルタリングするために以下のようにしました：

    $excerpt = preg_replace('/\[arve .*url="(.*?)" .*\/\]/is',"\n$1\n", $excerpt);
    $excerpt = preg_replace('/\[video .*mp4="(.*)"\]\[\/video\]/is',"\n$1\n", $excerpt);

これは完璧に機能しており、動画 URL のみが Discourse に渡され、Discourse 上で埋め込まれて表示されていました。

しかし、WP-Discourse のアップデート以降、動画が Discourse 上に表示されなくなりました。
また、tinymce でショートコードなしに YouTube URL を単純に貼り付けてみることも試みました（WP には YouTube 動画を埋め込むためにショートコードが必要ないことを知りました…あるいは他のプラグインやテーマの影響かもしれませんね？:thinking: でも、それは重要ではないと思いますが）、preg_replace 関数を削除しても、動画は Discourse 上に表示されません。

WP 上の私のテキスト（WYSIWYG タブではなくプレーンテキスト）：

https://www.youtube.com/watch?v=e6MCkspqtxo

[arve url="https://www.youtube.com/watch?v=e6MCkspqtxo" /]

WP 上での表示：

image
image726×977 367 KB

Discourse 上の投稿：

image
image763×130 9.36 KB

Discourse 投稿の HTML コード：

<p>Test vidéooo:</p>
<div data-mode="normal" data-provider="youtube">
<div></div>
</div>
<div data-mode="normal" data-provider="youtube">
<div></div>
</div>

編集：また、WP で記事が非公開の場合、記事を編集しても Discourse に同期されないことに気づきました。プライベートでテストをしたい時には少し面倒です。

21

それは奇妙ですね。今回の変更は、クラシックエディタで公開された投稿には影響しないことを意図していました。この問題を再現してみます。エディタの「テキスト」タブで投稿を開いた際に表示されるマークアップを共有していただけませんか？

22

WP プラグイン ARVE を使用した場合

<p>Test vidéooo:</p>
<div class="arve-wrapper aligncenter" data-mode="normal" data-provider="youtube" id="arve-e6MCkspqtxo-3" style="max-width:800px;" itemscope itemtype="http://schema.org/VideoObject">
<div class="arve-embed-container" style="padding-bottom:56.250000%"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="arve-iframe fitvidsignore" frameborder="0" name sandbox="allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox" scrolling="no" src="https://www.youtube-nocookie.com/embed/e6MCkspqtxo?iv_load_policy=3&#038;modestbranding=1&#038;rel=0&#038;autohide=1&#038;playsinline=1&#038;autoplay=0" width="480" height="270"></iframe></div>
</div>
<div class="arve-wrapper aligncenter" data-mode="normal" data-provider="youtube" id="arve-e6MCkspqtxo-4" style="max-width:800px;" itemscope itemtype="http://schema.org/VideoObject"><div class="arve-embed-container" style="padding-bottom:56.250000%"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="arve-iframe fitvidsignore" frameborder="0" name sandbox="allow-scripts allow-same-origin allow-presentation allow-popups allow-popups-to-escape-sandbox" scrolling="no" src="https://www.youtube-nocookie.com/embed/e6MCkspqtxo?iv_load_policy=3&#038;modestbranding=1&#038;rel=0&#038;autohide=1&#038;playsinline=1&#038;autoplay=0" width="480" height="270"></iframe></div></div>

プラグインなしで、WP に単に以下のように記述した場合：

https://www.youtube.com/watch?v=e6MCkspqtxo

Discourse エディタは次の結果を表示します：

<p>Test vidéooo:</p>
<div class="fitvids-video"><iframe title="Volkor X - Enclave" width="800" height="450" src="https://www.youtube.com/embed/e6MCkspqtxo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

どうやら WP は、ネイティブではない別のライブラリ（おそらくテーマ由来のもの）を使用しているようです :thinking:
問題はむしろ私の側にあるのでしょうが、アップデート前は正常に動作していました… :sweat_smile: