디스코urs 스티커

Don · 10월 3, 2023, 11:19오전


	요약	스티커 추가
	미리보기	Theme Creator
	저장소	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	도움이 되셨나요?	> ./support --coffee
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스코urs 테마를 처음 사용하시나요?	디스코urs 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

Discourse Stickers v1.0

안녕하세요

이 테마 컴포넌트를 사용하면 게시글과 채팅 메시지에 스티커를 추가할 수 있습니다…

동작 방식

컴포저에 버튼을 배치하여 스티커 모달을 엽니다.

스티커 모달

스티커를 클릭하면 컴포저에 추가됩니다.
이미지 마크다운 코드는 [wrap=sticker] img [/wrap] 안에 들어가므로, 스티커 이미지는 다른 이미지와 별도로 대상 지정이 가능합니다.

스티커는 항상 새 줄로 이동하며 제목과 크기를 포함합니다. 현재 크기는 180x180px로 고정되어 있습니다. 각 스티커에는 그림자가 있어 이미지가 더 스티커처럼 보입니다…
컴포저와 게시글에서 호버 시 메타 정보는 CSS로 숨겨집니다.

설정 방법

먼저 스티커로 사용할 이미지를 업로드해야 합니다. 주제 게시글에 해당 이미지를 간단히 업로드하세요.
이 이미지들을 사용하여 이미지 URL과 마크다운 URL이 필요합니다.

예시:
게시글에 이미지를 업로드했습니다. 이미지 URL의 optimized 버전을 사용했습니다. 이는 여기 에서 찾을 수 있지만, 이미지의 어떤 URL을 사용해도 됩니다.

괄호 안의 마크다운 업로드 URL
Screenshot 2023-10-03 at 13.07.41

설정

스티커 이미지
스티커 이미지 설정에서 스티커를 설정할 수 있습니다…

제목: 이는 이미지 제목과 alt입니다. 마크다운 코드 제목에도 들어가게 됩니다.

이모지: 스티커 모달에서 각 스티커의 오른쪽 위 모서리에 표시됩니다.

previewUrl: 스티커 모달에 표시되는 이미지입니다.

markdownUrl: 이전에 업로드된 이미지의 마크다운 URL입니다.

Discourse Stickers v2.0

안녕하세요

이 테마 컴포넌트를 사용하면 게시글, 답글, 채팅 메시지에 스티커를 추가할 수 있습니다.

버전 2.0에서는 네이티브 이미지 업로드, 스티커 그룹, 카테고리 기반 가시성, 채팅 전용 컨트롤을 갖춘 재설계된 스티커 관리자를 소개합니다.

작동 방식

이 컴포넌트는 컴포저에 스티커 버튼을 추가합니다. 클릭하면 스티커 선택기가 열립니다.

스티커를 선택하면 컴포저에 직접 삽입됩니다.

일반 게시글과 답글의 경우, 스티커는 다음으로 감싸집니다:

[wrap=sticker]![Sticker title|180x180](image)[/wrap]

이를 통해 스티커 이미지를 일반 이미지와 별도로 스타일링할 수 있습니다.

게시된 스티커는 클릭할 수 없으며 디스코urs 라이트박스가 열리지 않습니다.

스티커 선택기

스티커 선택기는 스티커 컬렉션이 큰 경우 그룹을 지원합니다.

여러 그룹이 구성되면 선택기 상단에 필터 바가 표시됩니다.

그룹이 없는 스티커는 자동으로 기타 아래에 배치됩니다.

현재 컨텍스트에서 사용할 수 있는 스티커가 없으면 선택기는 빈 상태를 표시합니다.

설정 방법

스티커 구성은 v2.0에서 완전히 재설계되었습니다.

이제 이미지를 먼저 주제에 업로드하거나 이미지 URL을 수동으로 복사할 필요가 없습니다.

컴포넌트 설정으로 이동하여 스티커를 추가하기만 하면 됩니다. 이미지 필드를 사용하면 스티커를 직접 업로드할 수 있습니다.

스티커 설정

이제 각 스티커에는 다음 속성이 있을 수 있습니다:

제목

스티커의 이름입니다. 이는 스티커의 도구チップ과 alt 텍스트로 사용됩니다.

그룹

선택 사항입니다. 그룹을 사용하여 스티커를 정리하고 선택기에서 필터링하세요.

비워 두면 스티커가 기타 아래에 배치됩니다.

이모지 배지

선택 사항입니다. 스티커의 모서리에 작은 이모지를 표시합니다.

실제 이모지 또는 :heart: 또는 :smile:과 같은 디스코urs 쇼트코드를 사용할 수 있습니다.

이미지

스티커 이미지입니다.

설정을 사용하여 이미지를 직접 업로드하세요. 동일한 이미지가 선택기와 게시된 스티커 모두에 사용됩니다.

카테고리

선택 사항입니다. 스티커를 특정 카테고리로 제한합니다.

카테고리가 선택되면, 해당 카테고리 중 하나가 선택되었을 때에만 일반 게시글/답글 컴포저에서 스티커가 표시됩니다.

모든 카테고리에서 스티커를 사용 가능하게 하려면 비워 두세요.

이 설정은 채팅에 영향을 주지 않습니다.

직접 메시지에서는 숨김

활성화하면 스티커가 개인/직접 메시지 채팅에서 사용할 수 없게 됩니다.

채팅 채널

선택 사항입니다. 스티커를 특정 공개 채팅 채널로 제한합니다.

쉼표로 구분하여 채널 ID를 입력하세요.

예를 들어, 채널 URL이 다음과 같은 경우:

/chat/c/channel-name/123

다음과 같이 사용하세요:

123

모든 공개/카테고리 채팅 채널에서 스티커를 사용 가능하게 하려면 비워 두세요.

v1.x에서 업그레이드

이미 이전 버전의 컴포넌트를 사용 중이라면, 스티커 컬렉션을 다시 만들 필요가 없습니다.

v2.0에는 이전 sticker_images 구성을 새 형식으로 자동으로 변환하는 설정 마이그레이션이 포함되어 있습니다.

마이그레이션은 다음을 보존합니다:

스티커 제목
이모지 배지
기존에 업로드된 스티커 이미지

기존에 업로드된 이미지는 원래 디스코urs 업로드로 다시 해석되어 새 이미지 필드에 입력됩니다.

기존 previewUrl 및 markdownUrl 설정은 더 이상 필요하지 않습니다.

컴포넌트를 업데이트하기만 하면 기존 스티커가 자동으로 마이그레이션되어야 합니다.

Canapin · 10월 3, 2023, 11:52오전

Hi Don

Nice job! I had a quick look

Managing the stickers is a bit tedious – especially the preview part – as they isn’t a specific, dedicated layout or feature to do this (like there is with avatars and custom emojis), but I understand it would be much more work.

The drop shadow filter is disabled when a gif is stopped, and doesn’t appear as a square background on the middle image here (a rectangle jpg which triggers a lightbox):

chrome_k71dGHbeLH

The filter effect is really neat, but I’d put it as an optional setting

The sticker picker use justified content such as:

XXX
 X

But I think I’d prefer right aligned:

XXX
X

Very personal opinion, of course

Don · 10월 3, 2023, 2:10오후

Thanks for the feedback @Canapin

I’ve added a new settings for this…
Screenshot 2023-10-03 at 16.04.17

This one also done… Much better

Don · 10월 3, 2023, 4:54오후

Update: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · 10월 28, 2023, 3:53오후

Would it be possible to limit this to certain categories? (And, for that matter, have different stickers per category?)

hoangphuctran93 · 10월 28, 2023, 4:37오후

If you can allow administrators to create sticker groups and users can customize sticker selection according to each group of their favorite topics.
And further, recommend based on the installed icon when a user uses an icon in an article, but I think this is a difficult feature.

deltaR · 11월 9, 2023, 2:12오후

May I ask what should I do to let the sticker in the text line, not in a new line? ( I’ve forked this repo)

Don · 11월 9, 2023, 4:31오후

Hello

Yeah you have to remove the \n from the beginning and end of this line.

github.com/deltaR-3k/discourse-stickers

javascripts/discourse/components/modal/sticker.js

main


      
          @tracked stickerImages = JSON.parse(settings.sticker_images);
          @service site;
          @service capabilities;
          
          @action
          pick() {
            let stickerImage = document.querySelectorAll(".sticker-pack span.sticker-holder img.sticker:hover");
            stickerImage.forEach((sticker) => {
              sticker.classList.add("picked");
              sticker.addEventListener("animationend", () => {
                let markupComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                let markupChatComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                if (this.args.model?.customPickHandler) {
                  this.args.model.customPickHandler(markupChatComposer);
                } else {
                  getOwner(this).lookup("service:app-events").trigger("composer:insert-text", markupComposer);
                }
                this.args.closeModal();
              });
            });
          }

Hey @mattdm Sorry for the delay. Yeah I think it probably possible to show the button in composer per category. I need to check this.

The component is already a little complex to setup. I am not sure with this.

Hello Yeah this is an other level. I am not sure it’s possible now with this built.

deltaR · 11월 9, 2023, 5:03오후

Thanks for replying!
But after changing, the sticker can’t be displayed, like this

Don · 11월 9, 2023, 5:13오후

Oh my bad sorry I think you should remove the [wrap=sticker] and [/wrap] too. It will display the image inline so it probably won’t missing.

The [wrap=sticker] is only for adding some styling to the sticker image.

github.com/deltaR-3k/discourse-stickers

common/common.scss

f28fb4b9c


      
          .d-wrap[data-wrap="sticker"] {
            @include user-select(none);
            img {
              width: 75px !important;
              height: 65px !important;
              aspect-ratio: 75 / 65 !important;
              @if $stickers_shadow == "true" {
                filter: drop-shadow(2px 2px 2px rgba(var(--always-black-rgb), 0.8));
              }
            }
            .button-wrapper {
              display: none;
            }
            a.lightbox {
              .discourse-touch & {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                transition: filter 200ms;
                &:active {
                  filter: brightness(0.8);
                }

This file has been truncated. show original

deltaR · 11월 9, 2023, 5:23오후

I see, inline display can’t use [wrap=sticker]?
It works, thanks!

ps: I’m wondering if it is possible to hide hide the markdownUrl in the Composer, since it’ll be a long url and takes too much space?

Don · 8월 14, 2026, 2:31오후

Discourse 스티커 v2.0

이번 릴리스는 해당 컴포넌트의 상당한 현대화를 포함합니다. 여러 내부 개선 사항 외에도, 더 큰 스티커 컬렉션을 훨씬 쉽게 관리할 수 있도록 스티커 구성이 재설계되었습니다.

완전히 재설계된 스티커 설정

v2.0의 가장 큰 변화는 스티커 구성 자체입니다.

구버전에서는 스티커를 다음과 같은 값을 포함하는 JSON 설정으로 저장했습니다:

title
emoji
previewUrl
markdownUrl

v2.0에서는 이것이 Discourse의 네이티브 objects 설정 유형으로 대체되었습니다.

각 스티커는 이제 자체 필드를 가진 적절한 구성 가능한 객체입니다:

제목 - 스티커 이름 / 툴팁 텍스트
그룹 - 스티커를 그룹으로 분류하여 정리 (선택 사항)
이모지 배지 - 구석에 작은 이모지를 표시 (선택 사항)
이미지 - 설정을 통해 스티커를 직접 업로드
카테고리 - 특정 카테고리로 스티커를 제한 (선택 사항)
직접 메시지 숨기기 - 스티커가 DM에서 사용 가능한지 여부 제어
채팅 채널 - 특정 공개 채팅 채널로 스티커를 제한 (선택 사항)

이를 통해 스티커 구성을 이해하고 유지보수하기가 훨씬 쉬워졌으며, 특히 큰 컬렉션에서 그 효과가 큽니다.

스티커 그룹 및 필터링

이제 스티커를 그룹에 할당할 수 있습니다.

여러 그룹이 사용 가능한 경우, 스티커 선택기에 자동으로 상단에 필터 바가 표시됩니다.

다음 사이에서 전환할 수 있습니다:

전체
개별 그룹
그룹이 없는 스티커를 위한 기타

필터는 현재 사용자에게 사용 가능한 스티커를 기반으로 동적으로 생성됩니다.

카테고리별 스티커

이제 스티커를 특정 Discourse 카테고리에 선택적으로 할당할 수 있습니다.

스티커에 카테고리가 설정된 경우, 해당 카테고리 중 하나가 선택된 경우에만 일반 게시글/답글 작성기에 표시됩니다.

카테고리가 설정되지 않은 경우, 스티커는 모든 곳에서 사용 가능합니다.

채팅 스티커에 대한 더 많은 제어

v2.0은 Discourse 채팅에서 스티커 사용 가능 범위에 대한 더 많은 제어를 추가합니다.

이제 다음을 수행할 수 있습니다:

개별 스티커를 직접 메시지에서 숨기기;
스티커를 특정 공개 채팅 채널로 제한;
채널 설정을 비워 두면 모든 공개/카테고리 채팅 채널에서 스티커를 사용 가능하게 함.

이를 통해 관리자는 커뮤니티의 다른 부분에 대해 서로 다른 스티커 세트를 유지할 수 있습니다.

게시된 스티커는 더 이상 클릭할 수 없음

게시된 스티커는 이제 비인터랙티브 이미지로 취급됩니다.

클릭할 때 더 이상 Discourse 라이트박스를 열지 않습니다.

이는 다음 모두에 적용됩니다:

일반 게시글의 스티커;
채팅에 게시된 스티커.

이 목표는 스티커가 일반적인 업로드된 이미지보다 실제 스티커/반응 콘텐츠처럼 작동하도록 만드는 것입니다.

개선된 빈 상태

현재 컨텍스트에서 사용 가능한 스티커가 없는 경우, 선택기는 단순히 빈 선택기를 표시하는 대신 적절한 빈 상태를 표시합니다.

예를 들어, 카테고리 또는 채팅 제한으로 인해 어떤 스티커도 사용 불가능한 경우 이 상황이 발생할 수 있습니다.

기존 스티커 구성이 마이그레이션됩니다

v2.0의 가장 중요한 부분 중 하나는 기존 설치 환경에서 스티커 컬렉션을 다시 생성할 필요가 없다는 점입니다.

컴포넌트가 업데이트될 때旧的 sticker_images JSON 설정이 자동으로 새로운 objects 형식으로 마이그레이션됩니다.

기존 스티커 제목과 이모지 값은 보존됩니다.

가장 중요한 것은, 기존에 업로드된 스티커 이미지도 자동으로 마이그레이션된다는 점입니다.

따라서 이미 수십 개의 스티커가 구성되어 있다면, v2.0으로 업데이트할 때 모든 것을 다시 업로드할 필요가 없습니다.

旧的 markdownUrl 속성은 더 이상 필요하지 않으며, 새로운 Image 필드가 실제 Discourse 업로드를 나타내기 때문에 이관되지 않습니다.

github.com/VaperinaDEV/discourse-stickers

FEATURE: Modernize Discourse Stickers (#5)

main ← v2.0

merged 02:27PM - 14 Aug 26 UTC

VaperinaDEV

+424 -126

Modernizes the component and significantly expands sticker management. ### Wh…at's included - Migrate `sticker_images` from the legacy JSON setting to Discourse's native `objects` setting. - Add native image uploads for stickers. - Add optional sticker groups with filtering in the picker. - Add category-based sticker visibility. - Add Chat-specific visibility controls for direct messages and channels. - Modernize the sticker modal to Glimmer. - Improve sticker selection by passing the selected sticker directly to the action. - Prevent published stickers from opening the lightbox. - Add a proper empty state when no stickers are available. - Add localization for the new UI and settings. - Add a settings migration that preserves existing sticker titles, emojis, and uploaded images when upgrading from the previous version. ### Migration Existing `sticker_images` configurations are automatically migrated when the component is updated. Legacy sticker image URLs are resolved back to their existing Discourse uploads, so existing stickers do not need to be uploaded again. The legacy `markdownUrl` property is no longer used because the new `image` property directly represents the sticker upload.

OP도 업데이트했습니다.

글		댓글	조회수
Telegram-like stickers? Feature	8	1993	1월 25, 2024
Discourse Chat Plugin official , chat , included-in-core	43	34372	7월 29, 2026
Image comparison slider Theme component	31	3959	6월 6, 2026
Emoji Fluff Theme component	39	1773	11월 28, 2025
MD Composer extras Theme component	70	9934	7월 8, 2025