Discourse Stickers

Don · October 3, 2023, 11:19am


	Summary	Add Stickers
	Preview	Theme Creator
	Repository	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	Found it useful?	> ./support --coffee
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Discourse Stickers v1.0

Hello

With this theme component you can add stickers to posts and chat messages…

How it works?

It place a button in composer which opens the sticker modal.

Stickers Modal

When you click a sticker it will add it to the composer.
The image markdown code is going inside [wrap=sticker] img [/wrap] which means the sticker images are targetable separately from the other images.

The stickers are always goes to new line and contains title and size. The size now fixed 180x180px. Each stickers has a shadow which makes the image more stickery…
In the composer and posts the hover - meta information are hidden with CSS.

How to setup?

First you need to upload the images you want to use for stickers. Simple upload these images in a topic post.
We will work with these images we need the image url and markdown url.

Example:
I uploaded the image in a post. I use the optimized version of the image url. Which is found here but you can use whatever url of the image.

The markdown upload url inside brackets

Settings

sticker images
In the sticker images setting you can set up the stickers…

title: This is the image title and alt. It will goes to the markdown code title too.

emoji: It will goes in the Sticker Modal to each sticker top right corner.

previewUrl: This the image what shown in Sticker Modal.

markdownUrl: This is the previously uploaded image markdown url.

Discourse Stickers v2.0

Hello

With this theme component you can add stickers to posts, replies, and chat messages.

Version 2.0 introduces a redesigned sticker manager with native image uploads, sticker groups, category-based visibility, and chat-specific controls.

How does it work?

The component adds a sticker button to the composer. Clicking it opens the sticker picker.

When you select a sticker, it is inserted directly into the composer.

For regular posts and replies, stickers are wrapped in:

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

This allows sticker images to be styled separately from regular images.

Published stickers are not clickable and will not open the Discourse lightbox.

Sticker picker

The sticker picker supports groups when you have a larger collection of stickers.

If multiple groups are configured, a filter bar is displayed at the top of the picker.

Stickers without a group are automatically placed under Other.

If no stickers are available for the current context, the picker displays an empty state.

How to set up?

The sticker configuration has been completely redesigned in v2.0.

You no longer need to upload images to a topic first or manually copy image URLs.

Simply go to the component settings and add a sticker. The Image field allows you to upload the sticker directly.

Sticker settings

Each sticker can now have the following properties:

Title

The name of the sticker. This is used as the sticker’s tooltip and alt text.

Group

Optional. Use groups to organize your stickers and filter them in the picker.

Leave empty to place the sticker under Other.

Emoji badge

Optional. Displays a small emoji in the corner of the sticker.

You can use an actual emoji or a Discourse shortcode such as :heart: or :smile:.

Image

The sticker image.

Upload the image directly using the setting. The same image is used for both the picker and the posted sticker.

Categories

Optional. Restrict the sticker to specific categories.

If categories are selected, the sticker will only appear in the regular post/reply composer when one of those categories is selected.

Leave empty to make the sticker available in all categories.

This setting does not affect chat.

Hide from direct messages

When enabled, the sticker will not be available in private/direct message chats.

Chat channels

Optional. Restrict the sticker to specific public chat channels.

Enter channel IDs separated by commas.

For example, if the channel URL is:

/chat/c/channel-name/123

use:

123

Leave empty to make the sticker available in all public/category chat channels.

Upgrading from v1.x

If you are already using an older version of the component, you do not need to recreate your sticker collection.

v2.0 includes a settings migration that automatically converts the old sticker_images configuration to the new format.

The migration preserves:

sticker titles
emoji badges
existing uploaded sticker images

Existing uploaded images are resolved back to their original Discourse uploads and populated in the new Image field.

The old previewUrl and markdownUrl settings are no longer required.

Simply update the component and your existing stickers should be migrated automatically.

Canapin · October 3, 2023, 11:52am

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 · October 3, 2023, 2:10pm

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 · October 3, 2023, 4:54pm

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

mattdm · October 28, 2023, 3:53pm

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

hoangphuctran93 · October 28, 2023, 4:37pm

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 · November 9, 2023, 2:12pm

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 · November 9, 2023, 4:31pm

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 · November 9, 2023, 5:03pm

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

Don · November 9, 2023, 5:13pm

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 · November 9, 2023, 5:23pm

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 · August 14, 2026, 2:31pm

Discourse Stickers v2.0

This release is a fairly significant modernization of the component. Besides a number of internal improvements, the sticker configuration has been redesigned to make managing larger sticker collections much easier.

A completely redesigned sticker setting

The biggest change in v2.0 is the sticker configuration itself.

The old version stored stickers as a JSON setting containing values such as:

title
emoji
previewUrl
markdownUrl

In v2.0, this has been replaced with Discourse’s native objects setting type.

Each sticker is now a proper configurable object with its own fields:

Title - the sticker name / tooltip text
Group - optionally organize stickers into groups
Emoji badge - optionally display a small emoji in the corner
Image - upload the sticker directly through the setting
Categories - optionally restrict stickers to specific categories
Hide from direct messages - control whether a sticker is available in DMs
Chat channels - optionally restrict stickers to specific public chat channels

This makes the sticker configuration much easier to understand and maintain, especially for larger collections.

Sticker groups and filtering

You can now assign stickers to a Group.

When multiple groups are available, the sticker picker automatically displays a filter bar at the top.

You can switch between:

All
individual groups
Other for stickers without a group

The filter is generated dynamically from the stickers currently available to the user.

Category-specific stickers

Stickers can now optionally be assigned to specific Discourse categories.

If a sticker has categories configured, it will only appear in the regular post/reply composer when one of those categories is selected.

If no categories are configured, the sticker remains available everywhere.

More control over Chat stickers

v2.0 adds more control over sticker availability in Discourse Chat.

You can now:

hide individual stickers from direct messages;
restrict stickers to specific public chat channels;
leave the channel setting empty to make a sticker available in all public/category chat channels.

This allows administrators to maintain different sticker sets for different parts of their community.

Published stickers are no longer clickable

Published stickers are now treated as non-interactive images.

They no longer open the Discourse lightbox when clicked.

This applies both to:

stickers in regular posts;
stickers posted in Chat.

The goal is to make stickers behave more like actual sticker/reaction content rather than normal uploaded images.

Better empty state

If no stickers are available for the current context, the picker now displays a proper empty state instead of simply showing an empty picker.

For example, this can happen when category or Chat restrictions prevent any sticker from being available.

Existing sticker configurations are migrated

One of the most important parts of v2.0 is that existing installations do not need to recreate their sticker collection.

The old sticker_images JSON setting is automatically migrated to the new objects format when the component is updated.

Existing sticker titles and emoji values are preserved.

Most importantly, existing uploaded sticker images are also migrated automatically.

So if you already have dozens of stickers configured, updating to v2.0 should not require you to upload all of them again.

The old markdownUrl property is no longer needed and is not carried over because the new Image field represents the actual Discourse upload.

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.

I’ve updated the OP too.

Topic		Replies	Views
Telegram-like stickers? Feature	8	1986	January 25, 2024
Discourse Chat Plugin official , chat , included-in-core	43	34210	July 29, 2026
Image comparison slider Theme component	31	3878	June 6, 2026
Emoji Fluff Theme component	39	1712	November 28, 2025
MD Composer extras Theme component	70	9883	July 8, 2025

Discourse Stickers

Discourse Stickers v2.0

How does it work?

Sticker picker

How to set up?

Sticker settings

Upgrading from v1.x

Discourse Stickers v2.0

A completely redesigned sticker setting

Sticker groups and filtering

Category-specific stickers

More control over Chat stickers

Published stickers are no longer clickable

Better empty state

Existing sticker configurations are migrated

Related topics