WP 5.3에서 Discourse로 이미지가 게시되지 않음

5.3 업데이트에서 블록에 대한 변경 사항과 관련이 있을 것 같습니다. 해당 게시글은 여기서 확인하실 수 있습니다: In Conversation with Anna Morgan - Discussions - Nature Photographers Network

참고로 CDN 이미지를 위한 다음 스니펫도 보유하고 있습니다.

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

저도 대시보드에서 이 오류가 발생하고 있는데, 꽤 확신하지만 이 오류는 WordPress 플러그인에서 비롯된 것 같습니다.

이 게시글 WP Discourse plug in being odd - #10 by adamprocter 을 확인해 보았지만, 제 버전은 1.9.7이며 게시 사용자 이름은 활성 계정입니다.

오늘 이 문제를 조사해 보겠습니다. 제 사이트에서 확인한 바로는, WordPress에서 게시된 이미지는 Discourse가 원격 이미지를 다운로드하려고 할 때까지 정상적으로 표시됩니다. 다운로드가 완료된 후에는 해당 게시물에서 확인하신 것과 같은 마크업이 나타납니다:

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

이것이 WordPress 5.3의 변경 사항과 관련이 있는지 확실하지 않습니다.

We detected an API request using a deprecated authentication method 경고가 표시되고 있다면, 이는 이미지 관련 문제의 원인이 아닙니다. WP Discourse 1.9.6 이상 버전에서는 해당 경고가 발생하지 않아야 합니다. 플러그인에서 발생하는 모든 API 요청은 이제 헤더 기반 인증을 사용하고 있습니다.

문제는 Discourse 업로드 마크다운이 HTML 태그로 감싸져 있을 때 마크다운이 파싱되지 않는 것 같습니다. 예를 들어, Discourse의 PullHotlinkedImages Job이 실행된 후 WordPress 게시물에서 보이는 내용은 다음과 같습니다:

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

게시물을 편집하여 마크다운 링크를 둘러싸고 있는 HTML 태그를 제거하면 문제가 해결되지만, 이 문제에 대한 적절한 해결책을 찾아야 합니다.

죄송하지만, 시몬 씨가 이 업무를 진행 중이신가요, 아니면 다른 분이 담당으로 배정되었나요?

문제는 이미지가 포함된 게시글을 Discourse에 게시할 때, 게시글의 HTML이 처음에는 다음과 같은 형태를 띤다는 것입니다:

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

Discourse에서 원격 이미지 로컬 다운로드 사이트 설정이 활성화되어 있으면, Discourse가 WordPress에서 게시글을 가져올 때 이미지 링크가 깨집니다. 원격 URL을 가진 이미지 태그가 HTML 태그로 감싸여 있을 때 언제든 이 문제가 발생할 수 있습니다.

이 문제를 해결하는 가장 쉬운 방법은 원격 이미지 로컬 다운로드 사이트 설정을 비활성화하거나, WordPress에서 Discourse로 게시글 전체 내용을 게시하지 않는 것입니다.

앞으로 WP Discourse 플러그인에서는 게시글 전체를 게시하는 옵션을 제거할 수 있습니다. WordPress에서 Discourse로 게시글 전체 내용을 게시할 때 발생할 수 있는 문제가 여러 가지 있습니다. 이 문제들의 대부분은 WordPress에서 Discourse로 발췌문을 게시한 후, Discourse에서 게시글 전체를 표시하기 위해 ‘게시글 전체 보기’ 버튼을 사용하는 방식으로 해결할 수 있을 것입니다. 이 방법이 귀하의 경우에도 작동할 수 있을까요?

또 다른 가능한 해결책은 WordPress 게시글을 게시할 때 사용되는 템플릿을 사용자 지정하는 것입니다. 게시글에서 이미지를 추출한 후, 게시글 발췌문과 함께 게시할 수 있습니다. 사용자 지정 템플릿을 사용하면 이미지 HTML을 Discourse 마크다운 프로세서와 충돌하지 않는 방식으로 구조화할 수 있습니다.

Simon님, 감사합니다. download remote images to local이 당장은 쉬운 해결책이었어요. 전체 게시물을 게시하는 기능이 사라질 수 있다는 소식을 듣고 실망했어요. 현재 저는 워드프레스에 게시물을 게시하면 그것이 디스코스의 Articles 섹션에 게시되도록 사용하고 있습니다. 이 섹션은 기본적으로 모든 사용자에게 '첫 게시물 관찰’이 설정되어 있어요. 이렇게 하면 모든 사용자에게 기사의 전체 내용이 포함된 이메일을 받을 수 있고, 가장 좋은 점은 이메일에 답장만 하면 댓글을 달 수 있다는 거예요. 사이트를 방문해야 하는 추가 단계를 거쳐야 한다면, 특히 이미지가 없는 경우(저희 사이트에는 이미지가 정말 중요해요) 단순히 짧은 스니펫만 제공된다면 대부분의 사용자가 기사를 읽지 않을 가능성이 높아요. 전체 게시물 게시 기능이 사라지면 워드프레스를 중단하고 디스코스에 기사를 직접 게시하는 방안을 고려할 수도 있어요. SEO 등의 측면에서는 이상적이지 않지만, 참여도가 더 중요하다고 생각하거든요.

저도 전체 게시물을 누락하는 것을 원하지 않습니다.
여기서 제안하시는 것이 정확히 무엇인지 100% 확신하지는 못하겠습니다…
이미지를 어떻게 추출할 계획인가요? 정규식(Regex)을 사용할 건가요?
이미지 태그를 적절한 마크다운 문법으로 대체하는 정규식을 상상해 볼 수 있습니다. 이것이 의도하신 내용이며, 이렇게 하면 작동할까요?

아니요. 과거에 그런 시도를 해보지 않았다면 그렇게 했을지도 모릅니다. 이 Stack Overflow 게시물이 해당 문제를 어느 정도 설명해 줍니다: https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454.

플러그인이 게시글 내용의 기본 HTML 버전을 조립하는 것이 얼마나 어려운지 조사해 보겠습니다. 최후의 수단으로 DOMDocument 메서드를 사용하여 내용을 파싱하는 방법을 사용할 수 있습니다. Discourse가 반환하는 댓글들은 이러한 메서드로 파싱되며, 이로 인한 문제점에 대한 보고는 아직 받지 못했습니다.

발췌문을 게시한 후 사용자가 Discourse의 “전체 게시글 보기” 버튼을 클릭하여 전체 게시글을 보는 것이 이 문제에 대한 가장 좋은 해결책이라고 생각하지만, WP Discourse 플러그인에서 “전체 게시글 게시” 옵션을 제거하는 것은 꺼려집니다.

설명해 주셔서 감사합니다.
저는 작가들에게 기사를 그냥 게시한 뒤 “업데이트” 버튼을 클릭하도록 할 계획입니다. WP에서 기사를 게시한 후 업데이트하면 Discourse의 이미지가 항상 정상적으로 표시되는 것 같으니까요.

“게시” 옵션이 완전히 사라지는 것보다는, 각 기사마다 1초 더 걸리는 것이 훨씬 낫습니다. :wink:

Discourse의 download remote images to local(원격 이미지를 로컬로 다운로드) 사이트 설정이 활성화되어 있다면, 게시물이 업데이트된 몇 분 이내에 이미지가 다시 사라지지 않나요? 그렇지 않다면, 왜 이 방법이 문제를 해결하는지 조사해 보겠습니다.

해당 설정은 활성화되어 있으며, 수일 및 수주가 지난 후에도 최신 게시물에서 이미지가 여전히 올바르게 표시됩니다. 이미지 문제를 경험했던 1개월 전 게시물을 예로 들겠습니다.

또한, Discourse 측에서 이미지 URL을 확인해 보니 링크가 WP의 것이므로 이미지가 Discourse로 다운로드되지 않는 것입니다. 사이트와 포럼이 동일한 도메인을 공유하기 때문일까요?
(사이트: https://monocycle.info, 포럼: https://forum.monocycle/info)

디스코스(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=""/

WordPress 사이트가 http인지 https인지 확인해 주세요.

현재는 http 프로토콜을 사용하고 있지만, https 전환을 검토하고 있습니다.

브라우저는 페이지가 HTTPS로 제공되는 경우, 보안이 없는 소스(인시큐어 소스)에서 콘텐츠를 로드하지 않습니다.

HTML 요소를 사용하여 이미지를 로드하는 경우, 메인 사이트가 HTTPS를 사용할 때까지 이 방법은 작동하지 않습니다.

방금 WP Discourse 버전 2.0.2를 WordPress 플러그인 저장소에 배포했습니다. 이번 업데이트는 블록 에디터를 사용하여 Discourse에 게시물을 게시할 때 발생하던 깨진 이미지 문제를 수정할 것입니다.

이미지, 이미지 갤러리, 그리고 YouTube 및 Vimeo 비디오는 이제 모두 게시물에서 추출되어 Discourse가 처리할 수 있는 형식으로 포맷됩니다. 업데이트와 관련하여 문제가 발생하면 알려주세요. 여전히 Discourse에서 올바르게 렌더링되지 않는 WordPress 블록이 있다면 알려주세요. 이제 블록을 이름으로 파싱할 수 있으므로 문제를 해결할 수 있을 것입니다.

다음 주에는 플러그인으로 처리하기 너무 특수한 블록들을 파싱할 수 있는 필터를 추가할 예정입니다.

업데이트 후 몇 가지 문제가 발생했습니다.

WP에서 저는 “classic editor”(tinymce)를 사용 중입니다.

기존 게시물에는 [video] 쇼트코드 안에 비디오 URL이 있었고, 최근 게시물(3년 미만)에는 ARVE 비디오 임베더 플러그인을 사용하여 비디오 URL을 [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에서 보이는 모습:

Discourse의 게시물:

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에 동기화되지 않는다는 것을 알게 되었습니다. 비공개로 테스트를 하고 싶을 때 꽤 번거롭습니다.

이상하네요. 변경 사항에 대한 제 기대는 클래식 편집기로 게시된 게시물에는 영향을 주지 않는 것이었습니다. 문제를 재현해 보겠습니다. 편집기의 텍스트 탭에서 게시물을 열었을 때 보이는 마크업을 공유해 주시겠습니까?

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: