# 토픽 섬네일에 원박스 이미지 사용

**URL:** https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713
**Category:** Development
**Created:** [9월 29, 2020, 8:41오전 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713 "2020-09-29T08:41:16Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [9월 29, 2020, 8:41오전 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/1 "2020-09-29T08:41:16Z")

</div>

이미지가 충분히 큰데도 API가 섬네일을 생성하지 못하는 이유는 무엇인가요?

예를 들어, 이 링크를 첫 게시물에 붙여넣으면…

> **[Legal experts are freaking out about Bill Barr’s actions to help Trump win -...](https://www.salon.com/2020/09/26/legal-experts-are-freaking-out-about-bill-barrs-actions-to-help-trump-win_partner/)**
>
> "The attorney general is a threat to American citizens having free and fair access to the vote"

이 원박(onebox)은 690 x 465 크기의 충분히 큰 이미지를 다운로드합니다:

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/8/6894f34a10d134eb5590b67e4d1fa06e161d917f.png)

그럼에도 불구하고 해당 주제에 대한 섬네일이 생성되지 않습니다.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [9월 29, 2020, 9:30오전 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/2 "2020-09-29T09:30:40Z")

</div>

이미지의 크기에 따라 결정되는 것이 아닙니다. 일반적으로 원박스(onebox)에서 가져온 이미지를 사용하지 않는 이유는, 많은 경우 섬네일에 유용하지 않기 때문입니다. 예를 들어, Meta에서 많이 볼 수 있는 GitHub 저장소 링크가 있습니다:

> **[GitHub - davidtaylorhq/discourse-media-recorder-theme: Allow users to capture screen recordings directly...](https://github.com/davidtaylorhq/discourse-media-recorder-theme)**
>
> Allow users to capture screen recordings directly in the composer (Experimental, poor browser support)

누구도 내 얼굴이 확대되어 주제 섬네일로 사용되는 것을 원하지 않을 겁니다 😉

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [9월 29, 2020, 9:35오전 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/3 "2020-09-29T09:35:58Z")

</div>

음, 이건 메타(Meta)에 매우 특화된 문제인데, 저희 커뮤니티에는 GitHub 링크가 전혀 없습니다. 뉴스와 원박스(Onebox) 이미지가 핵심입니다. 그런데 메타의 이 “얼굴” 문제로 인해 섬네일 사용이 매우 제한되고 있습니다. 이 부분을 수정해서 원박스에서 이미지를 가져올 수 있는 방법이 있을까요? 아마도 많은 커뮤니티에서는 GitHub의 “얼굴” 문제를 크게 신경 쓰지 않을 것 같습니다.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [9월 29, 2020, 9:42오전 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/4 "2020-09-29T09:42:06Z")

</div>

여기서 개선점에 대해 충분히 열린 자세입니다. @merefield도 이 로직에 관심이 있다고 알고 있습니다. 이 변경은 플러그인이 아닌 코어에서 필요하므로, 이 내용을 별도의 주제로 분리하겠습니다.

기존 로직은 다음과 같습니다:

> <https://github.com/discourse/discourse/blob/main/lib/cooked_post_processor.rb#L201-L214>

특정 유형의 원박스(예: GitHub)에 `.no-thumbnail` 클래스를 추가하고, Discourse가 다른 원박스 이미지는 유지하면서 해당 원박스만 무시하도록 하는 방법을 고려해볼 수 있습니다.

이 주제에 pr-welcome 태그를 붙이겠지만, 상당한 작업을 시작하기 전에 이 주제에서 계획을 먼저 제시해 주세요.

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [9월 29, 2020, 9:46오전 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/5 "2020-09-29T09:46:34Z")

</div>

그렇게 되면 정말 좋겠습니다. 현재 우리 토픽의 90%는 썸네일이 적용될 수 있음에도 불구하고 썸네일이 없습니다. 그리고 aforementioned처럼, 이 GitHub 이슈는 개발자 커뮤니티에 매우 특화된 경계 사례일 뿐이며, 나머지 대다수는 이 문제로 인해 썸네일을 붙일 수 있는 토픽에도 썸네일을 받지 못하고 있습니다.

---

<div class="post-metadata">

### Author: ![exogravitas](https://avatars.discourse-cdn.com/v4/letter/e/779978/32.png) [@exogravitas](https://meta.discourse.org/u/exogravitas)
#### Post date: [10월 8, 2020, 5:45오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/6 "2020-10-08T17:45:20Z")

</div>

동의합니다!!! 뉴스 애그리게이터나 기타 재배포가 많은 페이지의 경우, 관련 썸네일이 없으면 문제가 됩니다.

이 기능을 조만간 통합하지 않는다면, 자체 호스팅 배포판에서 이 기능을 구현할 수 있는 방법이 있을까요?

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [10월 9, 2020, 11:03오전 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/7 "2020-10-09T11:03:02Z")

</div>

네, 현재 GitHub의 'faces’가 Meta와 같은 개발자 커뮤니티에서 렌더링될 수 있기 때문에 해당 기능이 테이블에 올라 있지 않습니다. 하지만 대부분의 커뮤니티는 'faces’에 관심이 없고, 특히 원포스터(OP)에 대해 충분히 큰 원박스(Onebox) 이미지가 제공되는 경우를 제외하고는 가능한 한 많은 섬네일을 원합니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [10월 9, 2020, 11:55오전 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/8 "2020-10-09T11:55:59Z")

</div>

그 OP의 예제는 Topic List Previews에서 정상적으로 렌더링됩니다. 플러그인에서 더 넓은 기준을 사용하기 때문입니다:

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/2/f27259676601911078ea165686ec3e48c7436b58.jpeg)

```plaintext
  def extract_images_for_post
    # src 속성이 있는 모든 이미지
    @doc.css("img[src]") -
    # 이모지 제외
    @doc.css("img.emoji") -
    # 인용문 내부의 이미지 제외
    @doc.css(".quote img") -
    # 원박스 사이트 아이콘 제외
    @doc.css("img.site-icon") -
    # 원박스 아바타 제외
    @doc.css("img.onebox-avatar") #Discourse Core보다 더 넓은 기준
  end

```

출처: [https://github.com/paviliondev/discourse-topic-previews/blob/f4332f9742a37827fd6364b2365c45524f1e7faf/lib/cooked\_post\_processor\_edits.rb#L4](https://github.com/paviliondev/discourse-topic-previews/blob/f4332f9742a37827fd6364b2365c45524f1e7faf/lib/cooked_post_processor_edits.rb#L4)

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [10월 9, 2020, 12:00오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/9 "2020-10-09T12:00:58Z")

</div>

네, @merefield님 감사합니다. 하지만 저희는 TLP TC가 아니라 @david님의 테마 컴포넌트를 사용하고 있습니다. 다만 이 문제에 대해 @team에서 움직임이 있거나 옵션을 제공하지 않는다면, 코어 패치를 위해 @merefield님의 eval을 사용할 가능성이 높습니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [10월 9, 2020, 12:01오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/10 "2020-10-09T12:01:51Z")

</div>

위 렌더링은 TLP TC에서 가져온 것이지만, 네, 저는 Ruby를 수정하기 위해 백엔드 플러그인(테마 ‘side car’)을 사용합니다. [https://github.com/merefield/discourse-topic-previews/tree/theme\_sidecar](https://github.com/merefield/discourse-topic-previews/tree/theme_sidecar) 호스팅 환경에서는 이 옵션이 불가능할 수 있다는 점은 잘 알고 있습니다.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [10월 9, 2020, 12:04오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/11 "2020-10-09T12:04:00Z")

</div>

> [@Terrapop](#):
>
> 현재 논의 대상이 아닙니다

> [@Terrapop](#):
>
> @team이 어떤 움직임이나 옵션을 제공하지 않습니다

이건 완전히 논의 대상입니다. 그래서 #pr-welcome 태그가 붙어 있는 거죠 😃

구현을 위한 시작점으로 [이 게시물](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/4?u=david)을 확인해 보세요.

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [10월 9, 2020, 12:05오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/12 "2020-10-09T12:05:53Z")

</div>

@merefield 혹시 PR을 작성해 주실 수 있을까요? 저는 Ruby에 완전히 초보입니다. 아니면 PR을 진행하는 과정은 어떻게 되나요?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [10월 9, 2020, 12:06오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/13 "2020-10-09T12:06:49Z")

</div>

@david 플러그인에서 이 오버라이드를 제거할 수 있다면 정말 기쁠 것 같습니다. 핵심 솔루션을 합의하는 것이 최선이라고 생각합니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [10월 9, 2020, 12:08오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/14 "2020-10-09T12:08:35Z")

</div>

@Terrapop 여기는 [Contributing to Discourse development](https://meta.discourse.org/t/discourse-development-contribution-guidelines/3823/106) 입니다.

지금 당장 더 즉각적인 도움을 드리고 싶지만, 현재 고객 업무로 인해 바빠서요.

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [10월 9, 2020, 12:11오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/15 "2020-10-09T12:11:23Z")

</div>

알겠습니다. 현재 저는 단순한 플러그인 개발과 코어 패치를 위해 간단한 Docker 개발 환경을 갖추고 있습니다. 누군가가 이 문제를 살펴볼 때까지 기다리다가, 그 사이에 아마도 여러분의 eval을 통해 패치를 적용할 것 같습니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [10월 9, 2020, 12:13오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/16 "2020-10-09T12:13:21Z")

</div>

여기서 제대로 된 작업은 사소한 일이 아닙니다. 테스트 케이스를 수정해야 하고, 두 컴포넌트(discourse와 discourse one-box)를 오가며 작업해야 하니까요. 하지만 확실히 해볼 가치가 있습니다!

참고로, Ember에 이어 Ruby도 두려워할 필요가 없어요 😉

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [10월 9, 2020, 12:15오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/17 "2020-10-09T12:15:08Z")

</div>

네, 하지만 안타깝게도 이건 제 현재 역량과 범위를 벗어나는 것 같아요.

---

<div class="post-metadata">

### Author: ![TallTrees](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/talltrees/32/208620_2.png) [@TallTrees](https://meta.discourse.org/u/TallTrees)
#### Post date: [12월 3, 2020, 1:26오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/18 "2020-12-03T13:26:55Z")

</div>

일시적인 해결책으로, 저는 종종 이미지를 수동으로 복사하여 위스퍼(Whisper)에 붙여넣은 후, 거기서 썸네일을 선택합니다.

자동화가 더 나을 것 같습니다. 썸네일을 가져오지 말아야 하는 도메인을 지정할 수 있는 설정 항목을 추가하면 좋겠습니다(예: GitHub 사례를 처리하기 위해).

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [12월 6, 2020, 1:02오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/19 "2020-12-06T13:02:47Z")

</div>

동의합니다. 우리는 @merefield의 스니펫을 사용해 코어를 미니 플러그인으로 오버라이드했습니다. 하지만 코어 팀이开箱即用的한(Out of the box) 해결책을 마련하는 것은 쉬운 일이어야 합니다. 일부 사람들이 자신의 GitHub 프로필이 노출되는 것을 두려워한다는 이유만으로 이런 기능이 없는 것은 그저 게으름입니다.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 11, 2021, 5:52오후 UTC](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713/20 "2021-02-11T17:52:08Z")

</div>

[FEATURE: Allow onebox images to be used as topic thumbnails (#12050) · discourse/discourse@b770c30 · GitHub](https://github.com/discourse/discourse/commit/b770c30391d0294a498d73e6a5272fb437291833) 커밋을 병합했습니다. 이 변경 사항으로 인해 원박스(onebox) 이미지가 주제 썸네일로 선택될 수 있습니다. GitHub 원박스에 대해서는 특정 예외가 적용되며, 필요에 따라 더 많은 예외를 추가할 수 있습니다.

(cc @Terrapop @merefield)

[다음 페이지](https://meta.discourse.org/t/using-onebox-images-for-topic-thumbnails/165713.md?page=2)
