내 테마 미리보기 이미지

제품 지원
1

안녕하세요,

우선, 제 질문은 아주 사소한 것에 대한 것이지만, 그래도 여쭤보고 싶었습니다. :wink::

자체 테마의 미리보기 이미지를 어디서 어떻게 설정할 수 있을까요? 적절한 미리보기 이미지가 없으면 관리자 영역이 좀 허전해 보입니다:

No preview image for own themes
No preview image for own themes959×617 77.1 KB

저는 매번 내면의 애드리언 몽크(Adrian Monk)가 드러나는 편입니다. 그리고 모든 분들의 내면에도 애드리언 몽크가 있다고 생각하며, 제 것과 비슷한 분들이 꽤 계실 겁니다. :face_with_tongue: 그래서 다른 분들에게도 적어도 조금은 중요할 수 있겠다는 생각이 들었습니다.

이전에 메타(Meta)에서 이미 답변이 올라왔다면 용서해 주세요. 하지만 검색을 통해 적절한 내용을 찾지 못했습니다.

2

이 가이드는 기억하는데, 이것이 찾고 계신 내용인지 모르겠어요:

3

감사합니다만, 별로 도움이 되지는 않네요. 아니면 제가 이해를 못 하고 있는 걸 수도 있고요. 항상 그럴 가능성이 있죠. :wink:

화면 캡처에 있는 테마는 제 자체 호스팅 Discourse 인스턴스의 표준 테마에서 직접 만들었습니다. 그래서 어디에도 다운로드하거나 업로드한 적이 없어요. 또한 Docker 컨테이너 밖의 공유 파일 경로에서도 테마 디렉토리를 찾을 수 없어요.

그래서 아직 좀 헤매고 있는 상태입니다… :man_shrugging:

4

스크린샷은 GitHub에서 직접 테마를 개발하는 경우에만 적용되는 것 같습니다. 그래서 Documentation > Developer Guides 채널에 있는 것입니다.

5

그래서 결국 질문은 그대로 남습니다. 방법이 있을까요?

다시 말하지만, 이건 가장 중요하지 않은 질문이자 기능이죠. :wink:

6

관리자 인터페이스를 통해 테마를 순수하게 생성했다면, 불가능합니다.

스크린샷을 포함하려면 테마를 반영한 로컬 파일/디렉터리 구조가 필요합니다.
테마를 내보낸 뒤 압축을 풀고, 위에 언급된 가이드대로 스크린샷을 추가한 후 다시 압축하고 가져오는 방법이 있습니다. 하지만 다시 말해, 스크린샷은 주로 다른 사람에게 내 테마가 어떤 모습인지 보여주기 위해 사용되므로, 어디에도 업로드하지 않았다면 누구를 위한 것일까요?

7

알겠습니다. 감사합니다. 그렇다면 그렇게 되는 것이군요. :slight_smile:

예를 들어 다른 관리자분들이요. 하지만 말씀드린 대로 사실은 크게 중요하지 않습니다. 그냥 테마에서 무언가를 편집할 때마다 매번 그 점이 눈에 들어올 뿐입니다.

8

조금 해킹적인 방법이긴 하지만, CSS를 사용하여 기본 SVG 패턴을 사용자 정의 이미지로 교체할 수 있습니다.
예시 결과

image
image905×664 63.6 KB

테마의 업로드 섹션에 스크린샷을 추가합니다.

image
image602×305 5.79 KB

그리고 "코드 편집"의 CSS 탭에 다음을 추가합니다.

소문자로 변경하고 공백은 하이픈으로 대체합니다.

SCSS 변수 이름

.theme-card.=THEME_NAME= .theme-card__image-wrapper svg {
 display: none;
}

.theme-card.=THEME_NAME= .theme-card__image-wrapper {
 background-image: url($=UPLOAD_NAME=);
 background-size: cover;
 background-position: center;
}

이 내용이 내면의 승려에게 조금이라도 더 평화를 가져다주기를 바랍니다.

9

정말 많이 감사합니다. 설명하신 대로 바로 작동했습니다. 그리고 당신의 게시물 덕분에 복사-붙여넣기만으로 해결할 수 있었어요. 멋집니다! :+1:

내 안의 수도승은 더 이상 없는 것 같습니다. 적어도 이 문제의 경우엔요. :stuck_out_tongue:

12

위에서 공유한 코드가 최근에 깨졌습니다. 클래스 이름이 변경되어 CSS 셀렉터가 더 이상 일치하지 않게 되었습니다(아마도 #40001에서 변경된 것 같습니다). 현재 제 포럼에서 사용하는 업데이트된 버전은 다음과 같습니다:

소문자로 변경하고 공백을 하이픈으로 대체

SCSS 변수 이름

.theme-card.=THEME_NAME= .theme-card-preview__image-wrapper svg {
 display: none;
}

.theme-card.=THEME_NAME= .theme-card-preview__image-wrapper {
 background-image: url($=UPLOAD_NAME=);
 background-size: cover;
 background-position: center;
}