Discourse Stickers

Install this theme component

Hello :wave:

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 :arrow_down_small: but you can use whatever url of the image.

The markdown upload url inside brackets :arrow_down_small:
Screenshot 2023-10-03 at 13.07.41


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.


17 Likes

Hi Don :wave:

Nice job! I had a quick look :slight_smile:

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 :slight_smile:

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 :v:

5 Likes

Thanks for the feedback @Canapin :slight_smile:

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

This one also done… Much better :slight_smile:

7 Likes

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

5 Likes

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

1 Like

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.

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)

Hello :wave:

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


Hey @mattdm :wave: 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. :thinking:

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

1 Like

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

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. :thinking:

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

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?