Thumbnail generation & markdown rendering issue 관련
Discourse가 이미지를 다운로드하여 HTML을 마크다운 구문으로 대체할 때 — 우리의 컨텍스트에서는 다음과 같은 결과가 나타납니다:
[...]<a href="<link_here>" target="_blank"></a>[...]
Discourse는 이미지를 렌더링할 수 없습니다.
이 문제를 해결하려면 위에 최소한 빈 줄 하나가 필요합니다:
[...]<a href="<link_here>" target="_blank">
</a>[...]
HTML로 둘러싸인 마크다운 이미지를 렌더링할 수 있도록 허용해 주실 수 있을까요?
메타에서 이걸 한번 시도해 보겠습니다. 링크 안에 이 이미지를 핫링크로 삽입했습니다:
<a href="https://discourse.org"><img src="..."/></a>
이미지가 가져와졌을 때 어떤 일이 일어나는지 한번 확인해 보겠습니다…
@Arkshine 그 방법이 잘 작동하는 것 같습니다. <a href="https://discourse.org"></a>이 성공적으로 렌더링되고 있습니다.
링크를 둘러싸고 있는 HTML 구조를 조금 더 공유해 주실 수 있나요?
<div data-wp><a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank"></a><div><div data-buy><a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">구매</a><span data-clipboard-text="GLA679" data-coupon>GLA679</span><i></i></div><div data-price>₪679 <span data-old-price>₪1378</span></div></div></div><hr /><p><small> 게시된 곳: <a href="https://zuzu.deals/%d7%91%d7%9c%d7%a2%d7%93%d7%99-%d7%95%d7%91%d7%9e%d7%97%d7%99%d7%a8-%d7%97%d7%98%d7%99%d7%a4%d7%94-%d7%9e%d7%95%d7%a9%d7%91-%d7%92%d7%99%d7%99%d7%9e%d7%99%d7%a0%d7%92-%d7%90%d7%93%d7%95%d7%9d-spark/"></a></small></p><br><p></p>
<p style="text-align: center;">게이머이든, 아니면 하루 종일 앉아 일해서 등이 더 좋은 의자를 갈망하는 직장인이든, 여기 또 하나의 파격적인 가격의 단독 특가 판매가 있습니다!<br />
편안한 게이밍 의자, 게이밍 헤드셋, 그리고 무료 빠른 배송, 공식 수입사 보증 포함 - 단 679₪!!!</p>
<p style="text-align: center;">카운터에서 단독 쿠폰을 사용하세요 – <strong>GLA679</strong></p>
<div> </div>
<div>
<h3 style="text-align: center;">프로 게이밍 의자 SPARKFOX GC60P</h3>
</div>
<div>최대 사용자 편의성을 위한 컴퓨터 게임 전용 특별 디자인 게이밍 의자</div>
<div>
<ul>
<li>높은 등받이가 있는 의자</li>
<li>긴 게임 세션 동안 최대 편안함</li>
<li>목과 허리 하단 지지용 쿠션 세트</li>
<li>재질 종류: 발포 우레탄</li>
<li>프레임 종류: 금속</li>
<li>재질: 탄소 섬유 혼방 가죽</li>
<li>팔걸이: 상하 조절 가능</li>
<li>메커니즘 종류: 버터플라이</li>
<li>리프터 종류: Class4 유압식</li>
<li>등받이 각도 범위: 90°-180°</li>
<li>베이스 종류: 나일론</li>
<li>바퀴 재질: 나일론</li>
<li>하중 지지력: 최대 150kg</li>
<li>보증: 1년</li>
</ul>
<div><strong>치수</strong></div>
<div>
<ul>
<li>너비: 67cm</li>
<li>깊이: 67cm</li>
<li>조절 가능 높이: 124-132cm</li>
</ul>
<h3></h3>
<p></p>
<h3 style="text-align: center;">게이밍 헤드셋 SPARKFOX K1</h3>
<div>최대 청취 및 통화 편의성과 배경 소음 제거를 위한 특별 디자인 게이밍 헤드셋</div>
<div>
<ul>
<li>시장에 있는 대부분의 콘솔과 호환 가능</li>
<li>휴대전화 및 노트북에서 음향 및 통화 관리</li>
<li>음량 조절기가 헤드셋 케이블에 위치하여 편리한 접근성</li>
<li>50mm 대형 드라이버에서 나오는 뛰어난 사운드</li>
<li>음량 및 음소거 컨트롤</li>
<li>최대 편안함을 위한 대형 패딩 이어컵</li>
<li>머리에 완벽하게 맞춰지는 조절 가능한 헤드밴드</li>
<li>3.5mm 잭에 직접 연결</li>
</ul>
</div>
<div>3.5mm를 2개의 3.5mm 출력으로 나누는 스플리터로 데스크톱 PC에 헤드셋을 연결하는 전용 어댑터 포함</div>
</div>
</div>
<p> </p>
<div data-custom-html=""></div>
<div data-wp>
<a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank"></a>
<div>
<div data-buy>
<a href="https://www.mooki.co.il/gaming/hbilvt-giiming-mwtlmvt/mvwb-giiming-khvl-sparkfox-wvlhn-giiming-mqcvei-lumi-whvr-2" target="_blank">구매</a
><span data-clipboard-text="GLA679" data-coupon>GLA679</span><i></i>
</div>
<div data-price>₪679 <span data-old-price>₪1378</span></div>
</div>
</div>
<hr />
<p>
<small
> 게시된 곳: <a href="https://zuzu.deals/%d7%91%d7%9c%d7%a2%d7%93%d7%99-%d7%95%d7%91%d7%9e%d7%97%d7%99%d7%a8-%d7%97%d7%98%d7%99%d7%a4%d7%94-%d7%9e%d7%95%d7%a9%d7%91-%d7%92%d7%99%d7%99%d7%9e%d7%99%d7%a0%d7%92-%d7%90%d7%93%d7%95%d7%9d-spark/"></a
></small>
</p>
<br />
<p></p>
<p style="text-align: center;">
게이머이든, 아니면 하루 종일 앉아 일해서 등이 더 좋은 의자를 갈망하는 직장인이든, 여기 또 하나의 파격적인 가격의 단독 특가 판매가 있습니다!<br />
편안한 게이밍 의자, 게이밍 헤드셋, 그리고 무료 빠른 배송, 공식 수입사 보증 포함 - 단 679₪!!!
</p>
<p style="text-align: center;">카운터에서 단독 쿠폰을 사용하세요 – <strong>GLA679</strong></p>
<div></div>
<div>
<h3 style="text-align: center;">프로 게이밍 의자 SPARKFOX GC60P</h3>
</div>
<div>최대 사용자 편의성을 위한 컴퓨터 게임 전용 특별 디자인 게이밍 의자</div>
<div>
<ul>
<li>높은 등받이가 있는 의자</li>
<li>긴 게임 세션 동안 최대 편안함</li>
<li>목과 허리 하단 지지용 쿠션 세트</li>
<li>재질 종류: 발포 우레탄</li>
<li>프레임 종류: 금속</li>
<li>재질: 탄소 섬유 혼방 가죽</li>
<li>팔걸이: 상하 조절 가능</li>
<li>메커니즘 종류: 버터플라이</li>
<li>리프터 종류: Class4 유압식</li>
<li>등받이 각도 범위: 90°-180°</li>
<li>베이스 종류: 나일론</li>
<li>바퀴 재질: 나일론</li>
<li>하중 지지력: 최대 150kg</li>
<li>보증: 1년</li>
</ul>
<div><strong>치수</strong></div>
<div>
<ul>
<li>너비: 67cm</li>
<li>깊이: 67cm</li>
<li>조절 가능 높이: 124-132cm</li>
</ul>
<h3></h3>
<p></p>
<h3 style="text-align: center;">게이밍 헤드셋 SPARKFOX K1</h3>
<div>최대 청취 및 통화 편의성과 배경 소음 제거를 위한 특별 디자인 게이밍 헤드셋</div>
<div>
<ul>
<li>시장에 있는 대부분의 콘솔과 호환 가능</li>
<li>휴대전화 및 노트북에서 음향 및 통화 관리</li>
<li>음량 조절기가 헤드셋 케이블에 위치하여 편리한 접근성</li>
<li>50mm 대형 드라이버에서 나오는 뛰어난 사운드</li>
<li>음량 및 음소거 컨트롤</li>
<li>최대 편안함을 위한 대형 패딩 이어컵</li>
<li>머리에 완벽하게 맞춰지는 조절 가능한 헤드밴드</li>
<li>3.5mm 잭에 직접 연결</li>
</ul>
</div>
<div>3.5mm를 2개의 3.5mm 출력으로 나누는 스플리터로 데스크톱 PC에 헤드셋을 연결하는 전용 어댑터 포함</div>
</div>
</div>
<p> </p>
<div data-custom-html=""></div>
이 문제는 다음 링크에서 언급된 것과 동일한 문제입니다: Images not publishing to Discourse in WP 5.3 - #6 by simon
아하! @simon 워드프레스 플러그인을 업그레이드하면 기존 게시물도 수정되나요? 아니면 새 게시물에만 적용되나요?
이 수정은 WordPress 블록 편집기로 게시된 게시물에만 적용됩니다. WordPress에서 “디스코ourse 주제 업데이트” 버튼을 클릭하면 이전 게시물도 수정됩니다. 누군가가 이전 게시물을 순회하는 스크립트를 작성하지 않는 한, 각 게시물에 대해 수동으로 수행해야 합니다.
다음 HTML을 시도해 보겠습니다:
<p><img src="..."/></p>
Discourse에서도 이 문제가 수정되어야 한다고 생각합니다. WordPress 통합이 아닌 경우에도 게시글이 작성될 수 있으니까요. 요약하면 다음과 같습니다:
<p><img src="..."/></p>를 게시했습니다. 이는 완전히 유효한 HTML입니다.
pull_hotlinked_images가 이미지를 가져와 마크업을 <p></p>로 교체했습니다.
이렇게 되면 렌더링이 되지 않습니다.
따라서 두 가지 가능한 수정 방법이 있습니다. 다음 중 하나입니다:
<p>
</p>
또는
<p></p>가 렌더링되도록 합니다. 참고로 commonmark 데모에서도 이 경우 렌더링이 되지 않습니다.@sam <p>와 같은 줄에 있는 마크다운 이미지가 렌더링되지 않는 데 의도된 이유가 있는지 아시나요?
이것은 CommonMark 사양의 일부입니다.
**test**
<p>**test**></p>
여기서는 사양에서 벗어나는 것을 절대 원하지 않습니다. 이러한 경우를 위해 2개의 줄바꿈을 주입하여 풀 핫링크 이미지를 수정하도록 허용할 것 같습니다. 다만, 이는 꽤 드문 경우이며, 일종의 자업자득이라고 생각합니다.
그다지 드문 일은 아니라고 생각합니다. 특히 Discourse가 WP-Discourse나 API를 사용하는 기타 도구와 연동되는 경우라면 더더욱 그렇습니다.
빈 줄을 하나 추가하는 것을 검토해 주시겠습니까? 이는 깨어지는 변경 사항이 될 것 같지 않고, 구현하기도 비교적 쉬울 것입니다. 
@Arkshine 내부적으로 이 문제에 대해 많이 논의해 왔습니다. 우리에게 가장 중요한 것은 콘텐츠의 무결성을 유지하는 것이므로, 줄바꿈을 추가하는 해결책은 아마도 채택되지 않을 것입니다.
하지만 무언가는 반드시 진행할 예정입니다. pull_hotlinked_images 작업이 이미지를 삭제하는 것은 허용할 수 없습니다. 머지않아 해결책을 마련할 수 있기를 바랍니다 
이 문제를 해결하기 위한 우회 방법은 Discourse가 원격 이미지를 다운로드하지 않도록 하는 것입니다. 이는 disabled image download domains 사이트 설정에 이미지 도메인을 추가하여 수행할 수 있습니다. download remote images to local 사이트 설정을 비활성화하여 Discourse가 모든 원격 이미지를 다운로드하지 않도록 하는 것도 가능합니다. 자세한 내용은 Fix broken images for posts created by the WP Discourse and RSS plugins 를 참조하세요.
우리의 경우, 공식 주제 썸네일 컴포넌트를 사용하고 있는데 이 컴포넌트는 로컬 이미지를 요구하기 때문에 그렇게 할 수 없습니다. 우리는 WP-Discourse로 주제가 생성되기 전에 콘텐츠 내의 모든 <img> 태그 앞에 줄바꿈을 추가하는 방식으로 이 문제를 해결했습니다. 모든 사람에게 적용 가능한 해결책은 아니지만, 우리에게서는 잘 작동합니다. Discourse가 이러한 합법적인 사용법을 지원하지 않는다는 점이 다소 안타깝습니다.
하지만 플러그인/컴포넌트에 종속되지 않거나, 주제가 생성되기 전에 콘텐츠를 수정할 수 없는 경우라면, 이는 분명 합리적인 우회 방법입니다.
해당 문제를 수정할 예정입니다. 불행히도 이는 마크다운 렌더링 시스템의 깊은 부분에 있는 문제로, 수정이 복잡합니다. 하지만 해결하겠습니다. 오랜 시간이 걸려 죄송합니다!
여기서 참고사항을 하나 더 덧붙이자면, Discourse RSS 플러그인을 통해 생성된 이미지 포함 게시물에도 해당 문제가 발생한다는 점입니다.
이 주제에 여러 번 게시물을 올린 점 죄송합니다. 하지만 이 문제는 Zendesk 플러그인을 통해 생성된 게시물에서 sync comments from zendesk 설정이 활성화된 경우에도 이미지에 영향을 미칩니다. 이 경우의 어려움은 이미지 출처를 미리 알 수 없다는 점이며, 따라서 disabled image download domains 설정에 이미지 src를 추가하는 우회 방법은 작동하지 않습니다.
HTML 태그로 감싸진 이미지 태그에 대해 원격 이미지를 로컬로 다운로드하는 것을 방지할 수 있는 방법이 있을까요?
그것은 완전히 불가능합니다. 그렇게 하면 제3자가 추적용 gif를 삽입하여 포럼에서의 사용량을 추적할 수 있게 되므로, 원격 이미지 다운로드 기능은 일종의 보안 기능입니다.
대신 @tgxworld가 몇 년 전에 만든 이미지 리매퍼와 유사하게 동작하는, HTML을 역방향으로 분석하여 변경의 안정성을 보장하는 ‘더 지능적인’ 시스템이 필요하다고 생각합니다. 불행히도 매우 복잡한 변경 사항입니다.
이 문제가 다시 발생했습니다
그냥 생각나는 대로 말씀드리는 건데, 여기 있는 까다로운 문제(즉, HTML을 마크다운으로 변환하는 과정)를 우회할 수 있을지 궁금합니다. 다시 한번 정리해 보겠습니다(이 문제를 헤아리는 데 도움이 되기 위해).
Discourse는 게시물 콘텐츠 생성을 위해 HTML 가져오기를 지원합니다(예: WP Discourse에서 가져온 HTML).
특정 컨텍스트에서는 사용자가 원래 HTML의 무결성이 정확히 유지되기를 기대합니다.
여기서 '무결성’은 적어도 두 가지 측면이 있습니다:
HTML을 마크다운으로 변환하는 과정은 첫 번째 유형의 무결성에 문제를 일으킬 수 있지만, 현재 두 번째 유형의 무결성을 확보하는 데 필요합니다.
따라서 특정 가져온 게시물의 경우, 가져온 HTML을 직접 ‘cooked’(렌더링된) 게시물 콘텐츠로 저장하고, pull_hotlinked_images 잡이 마크다운으로 변환하지 않고도 이러한 콘텐츠 내의 이미지를 다운로드하도록 지원하는 것이 이 문제를 해결하는 하나의 방법이 될 수 있습니다.
더 간단히 말하면, 아마도 코드가 img 태그를 마크다운으로 변환하지 않고도 핫링크된 이미지를 다운로드하도록 지원할 수 있을 것입니다. 이러한 게시물의 경우 raw(원본)가 아닌 cooked(렌더링된) 콘텐츠에 다운로드된 이미지 URL을 보간(interpolate)하면 됩니다.
어려운 점은 그 플래그를 사용하면 게시물을 어떻게 편집하느냐는 것입니다. 편집기가 원시 HTML 모드로 전환되고, 전체 툴바가 깨지는 등의 문제가 발생하기 때문입니다.