토픽 목록 썸네일

[Discourse]

	요약	Topic List Thumbnails를 사용하면 주제 목록 보기에서 주제 썸네일을 표시할 수 있습니다.
	미리보기	Discourse Theme Creator에서 미리보기 (블로그 스타일) Discourse Theme Creator에서 미리보기 (그리드) Discourse Theme Creator에서 미리보기 (목록) Discourse Theme Creator에서 미리보기 (메이슨리) Discourse Theme Creator에서 미리보기 (미니멀 그리드)
	저장소 링크	https://github.com/discourse/discourse-topic-thumbnails
	Discourse 테마를 처음 사용하시나요?	Discourse 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

이 official 테마 컴포넌트는 Discourse 팀이 유지 관리하므로, Support, Contribute > Bug, Contribute > UX, Contribute > Feature 요청은 Meta의 해당 카테고리에서 적절한 테마 컴포넌트 태그를 달아 제출할 수 있습니다. 아래 링크를 클릭하여 시작해 보세요.

 지원  버그  UX  기능

기능

목록을 위한 최적화된 이미지가 생성되며, 고해상도 디스플레이를 위해 다양한 해상도가 제공됩니다. 스크롤할 때 이미지가 지연 로드됩니다(네이티브 브라우저 지원이 가능한 경우).

기본적으로 Discourse는 주제의 첫 번째 게시물(OP)의 첫 번째 이미지를 사용합니다. OP에서 다른 이미지를 선택하려면 마크다운에 |thumbnail을 추가하세요. 예를 들어

![alttext|100x100](upload://aaa)
![alttext|100x100|thumbnail](upload://bbb) << 이 이미지가 썸네일로 사용됩니다

테마 설정을 통해 카테고리 또는 태그별로 설정할 수 있는 5가지 모드가 있습니다.

예를 들어:

그리드 모드:

메이슨리 모드:

그리고 목록 모드:

팁과 트릭

게시글의 Oneboxes에서 썸네일이 생성되도록 하려면 다음 사이트 설정을 켜야 합니다: download_remote_images_to_local. 또한 관련 게시글을 다시 베이킹(rebake)해야 합니다.

설정

이름	설명
default_thumbnail_mode	기본적으로 사용할 썸네일 표시 모드
docs_thumbnail_mode	docs 플러그인이 활성화된 경우, docs 주제에 사용할 썸네일 표시 모드
blog_style_categories	블로그 스타일 보기가 사용될 카테고리입니다. 이 스타일은 테마 또는 테마 컴포넌트를 통해 활성화된 경우 주제 발췌문을 사용합니다
minimal_grid_categories	미니멀 그리드 보기가 사용될 카테고리입니다
grid_categories	그리드 보기가 사용될 카테고리입니다
masonry_categories	메이슨리 보기가 사용될 카테고리입니다
list_categories	목록 보기가 사용될 카테고리입니다
blog_style_tags
minimal_grid_tags	미니멀 그리드 보기가 사용될 태그입니다
grid_tags	그리드 보기가 사용될 태그입니다
masonry_tags	메이슨리 보기가 사용될 태그입니다
list_tags	목록 보기가 사용될 태그입니다
suggested_topics_mode	추천 주제에 사용할 썸네일 표시 모드입니다. 비어 있으면 ‘주제 목록 외부 활성화’ 설정을 따릅니다.
enable_outside_topic_lists	주제 목록이 아닌 페이지(예: 사용자 활동, 개인 메시지, 추천 주제)에서 썸네일 활성화
placeholder_icon	썸네일 이미지가 없는 주제에 표시할 아이콘
mobile_thumbnails	모바일 기기에서 썸네일 활성화
list_thumbnail_size	‘목록’ 보기에서 썸네일의 기본 크기

우리가 호스팅을 하고 계신가요? 테마 컴포넌트는 Pro, Business, Enterprise 플랜에서 사용 가능합니다.

[merefield (Robert)]

이 아이디어는 어디서 얻은 건지 궁금하네요

핵심(core)이 이미지 전달과 표시에 더 많은 관심을 기울이고 있다는 점이 정말 훌륭합니다. 진행 방향이 마음에 듭니다!

(이 기능이 토픽 목록 미리보기(Topic List Previews)를 완전히 대체하지 못하더라도, 더 이상 유지보수할 필요가 없는 맞춤형 API 작업을 많이 줄일 수 있는 잠재력이 생겼으니 정말 좋은 소식입니다!)

P.S. 방금 테스트해 봤는데, 투표(Polls)가 썸네일을 생성해서 차트가 노출될 수 있으면 좋겠습니다 …

[Krischan]

@david

OP에서 다른 이미지를 선택하려면 마크다운에 |thumbnail을 추가하세요.

훌륭한 기능입니다. 여기에서 언급된 것처럼 Discourse 2.7에 기본적으로 포함되어 있나요? 아니면 구문이 다른가요?

@neil

마크다운을 통해 게시글/토픽 섬네일 우선순위 지정 허용

[david (David Taylor)]

네, Discourse 2.7 안정판에서 사용할 수 있습니다. 문법은 동일합니다

[davidkingham]

제 사이트에서 한 멤버에게만 나타나는 아주 기이한 문제가 있습니다. 일부 섬네일이 랜덤하게 보이는 것처럼 표시되지 않습니다. 이미지가 없는 것처럼 기본 아이콘이 표시되는데, 저나 다른 사용자들은 섬네일이 정상적으로 보입니다. 해당 사용자에게 콘솔을 확인해 보라고 했는데 관련된 내용은 없고, 로그에도 아무것도 없습니다. 캐시 삭제, 다른 브라우저와 기기 사용, 다른 ISP 사용 등을 시도해 보라고 했고, 이 컴포넌트만 활성화된 테마도 사용해 보라고 했습니다. 어떤 시도를 해도 여전히 문제가 발생합니다. 심지어 해당 사용자를 임의적으로 흉내 내어(impersonate) 확인해 봤는데, 제 환경에서는 문제가 발생하지 않았습니다. 이 문제를 해결하기 위한 다른 트러블슈팅 아이디어가 있을까요? 감사합니다!

[codinghorror (Jeff Atwood)]

와이파이를 비활성화한 상태로 모바일에서 시도해 보라고 해서, 가정용 네트워크가 아닌 셀룰러 네트워크를 통해 접속하게 하세요. 이렇게 하면 네트워크 내에서 발생하는 간섭 요인을 모두 배제할 수 있습니다.

다만, 이미 "다른 ISP"를 시도해 보셨다면 해당 방법은 아닐 수도 있습니다.

[bartv (Bart)]

@david

OP의 다른 이미지를 선택하려면 마크다운에 |thumbnail을 추가하세요.

이 기능이 더 이상 작동하지 않습니다. 되돌려진 건가요?

또한, 이 기능은 사용자가 쉽게 발견하기 어렵습니다. 미리보기의 '크기 선택’에 썸네일 선택 옵션을 추가할 수 있을까요?

[davidkingham]

제프, 감사합니다. 해당 사용자는 핫스팟으로 휴대폰에 연결해 보고, 다른 ISP를 사용하는 친구 집에서도 테스트해 보았습니다. CDN 문제일 수도 있겠다 싶어 CDN 캐시를 비워 봤지만 도움이 되지 않았습니다. 또한, 해당 사용자가 거주하는 애틀랜타에서 VPN을 사용하여 해당 사용자의 환경을 흉내 내어 테스트해 보았지만 이 역시 효과가 없었습니다. 다음으로 무엇을 시도해야 할지 잘 모르겠습니다.

[david (David Taylor)]

@bartv

@david

OP의 다른 이미지를 선택하려면 마크다운에 |thumbnail을 추가하세요.

더 이상 이 기능이 작동하지 않습니다. 혹시 되돌려졌나요?

저에게는 여전히 정상적으로 작동합니다. 어떤 것을 시도했고 어떤 결과가 나타나는지 더 자세한 정보를 공유해 주시겠습니까? 제 테스트 OP에는 다음과 같은 내용이 있습니다:

![image|690x460](upload://1lGVHoB5KKnftUZoEYVgANxKdWL.jpeg)
![image|612x500|thumbnail](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

그리고 두 번째 이미지가 썸네일로 올바르게 선택됩니다.

@bartv

미리보기의 ‘크기 선택’에 썸네일 선택 옵션을 추가할 수 있을까요?

그것이 좋겠다는 데 동의하지만, 대부분의 사이트에는 필요하지 않을 것이라고 생각합니다. 훌륭한 별도의 테마 구성 요소가 될 것 같습니다.

[bartv (Bart)]

하, 부끄럽네, 물론 이제 잘 작동하긴 해..

[Terrapop]

@david

![image|612x500|thumbnail](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

@david 님, 안녕하세요.

다음과 같은 요구 사항이 있는데, 어떻게 구현할 수 있는지 알려주시면 좋겠습니다.

때로는 소셜 미디어를 통해 공유하고 싶은 토픽이 있으며, 이를 위해 썸네일 및 og:image 태그로 사용될 이미지를 준비합니다. 하지만 이 이미지가 토픽 내부에는 표시되지 않기를 원합니다.

이를 어떻게 구현할 수 있을까요? 예를 들어, 크기에 "hide"를 추가하면 이미지 컨테이너에 "display: none;"이 적용되는 클래스가 추가되는 방식처럼요.

![image|612x500|hide](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)

[david (David Taylor)]

아마도 Generic bbcode wrapper for theme components 을 사용하여 다음과 같은 작업을 수행할 수 있습니다.

[wrap=hidden]
  ![image|612x500|hide](upload://cILOby5v31IEtJtbOEEDgXQPZ7Z.jpeg)
[/wrap]

그리고 다음과 같은 CSS를 추가하면 됩니다.

div[data-wrap="hidden"]{
  display: none;
}

[Terrapop]

아, 이거는 몰랐네요. 좋네요, 감사합니다!

[davidkingham]

alert-info 배너가 썸네일과 겹쳐 있습니다. 의도된 동작인지 버그인지 확인해 주세요.

[david (David Taylor)]

이는 어느 정도 의도된 동작입니다. 보통 이 바는 토픽 목록의 열 제목 위에 위치합니다. 대안으로, 바가 표시될 때 모든 토픽을 “아래로 밀어내도록” 할 수 있지만, 그러면 전체 UI가 아래로 뛸 수 있어 꽤 거슬릴 수 있습니다.

스크린샷에서 바의 오른쪽에 약 1px의 간격이 있는 이유는 정확히 알 수 없습니다. 이는 컴포넌트의 문제일 수도 있고, 사용자 정의 테마 CSS와 관련이 있을 수도 있습니다.

[bartv (Bart)]

썸네일 카드에 좋아요 수를 표시하고, 갤러리 뷰에서 바로 이미지를 좋아요할 수 있도록 클릭 가능하게 만들 수 있을까요?

[th21]

모바일 모드에서 모바일 기기에서 썸네일 활성화 옵션을 체크해도 카테고리 목록이 작동하지 않습니다?

[yhmtsai]

안녕하세요, 꽤 멋진 것 같아요.
외부 링크 이미지(예: imgur)를 썸네일로 사용할 수 있나요?

[ChanTallyagora]

안녕하세요. 블로그 카테고리를 카테고리 목록으로 설정했는데, 모든 카테고리에 표시되고 있습니다. 설정 과정에서 뭔가 잘못한 게 있을까요?