What format should the emojis be in to be accepted by the Retort Plugin?

(Blu McCormick) #1

I have been troubleshooting why the formatting is so off (rows and columns, squished icons) for emojis I uploaded to discourse when used in the Retort Emoji plugin.

I got the plugin to work for a 4x5 grid of emojis already existing in the dicourse set:


I uploaded my emojis to discourse from this website:

The uploaded emojis have a slightly visible off-white background in the shape of a square compared to emojis used from the existing discourse set. I am wondering if that might have something to do with it?


Does anyone know a website I can use to upload emojis that is compatible with discourse or am I on the wrong track here? :face_with_raised_eyebrow: It could be something to do with the plugin itself.

(Joe) #3

Hi :smile:

I just logged into your site and I see this:


I think you’ve turned off the custom emojis. If you turn them on I can take another look.

This most likely happens because you’re uploading jpeg format images or incorrectly processed png format images.

there’s not much else you can do outside of editing the emojis in Photoshop / Gimp and fix that or find a better set of emojis.

(Blu McCormick) #4

Thanks, Joe. That’s the latest set I have uploaded. That is strange that the detective appears now for both you AND me. Hmmmm. Any ideas on why that would be? He is my test png being uploaded by me. I’d like to know why this happened so I can pass on the info the next poor little non-coder like me. :joy: It’s not a matter of refreshing, cause I refreshed the hell out of it. :joy: I’m gonna upload something instead of the corn and see what happens.

(Blu McCormick) #5

What the . . . how can this be? Corn replaced with custom uploaded png working just fine (chat icon):

They say don’t look a gift horse in the mouth. So I might just stick with this grid layout and one by one replace png’s while holding my breath.

(Joe) #6

I took this from your post in the Retort topic:

Does this still occur if you just change all of them at the same time?

(Blu McCormick) #7

That was set of pngs I uploaded to the custom emoji section. Then when a friend showed me his plugin worked fine I noticed his pngs were all from discourse’s existing set so I started to wonder if it would work if I just used discourse pngs and low and behold, it worked beautifully. I then added in our little detective buddy and an hour later thanks to you, I know it is working now for some unfathomable reason. :face_with_raised_eyebrow: I will test your question right now.

(Blu McCormick) #8


Maybe my string is problematic:


(Joe) #9

Ok the ones with the white square are not edited correctly. They are png files but still need the background color to be transparent.

The good_sleuth is throwing a 404

Make sure the name matches 1:1

(Blu McCormick) #10

Thanks, Joe. Seriously, thanks.

So copy and paste the name into the string is what you mean? I’ll go back to making pngs and see if I can figure out what is going on with the formatting and report my results here. I’ll start with the detective.

(Joe) #11

The name of the emoji, yes.

Wasn’t good_sleuth named good_sleuthing just now when it was working?

(Blu McCormick) #12

Yes, I uploaded a few different detectives today as a test png and boloxed the name. Thanks.

So I just uploaded an emojione ear the exact same way I did the detective who now works and it’s acting the way the detective emoji did at first. So I’ll wait and see if it eventually changes and report in here probably at midnight. :joy: I think this is what I would call emoji hell.

(Joe) #13

You’re right, there might be some caching involved


(Blu McCormick) #14

Sheesh. I don’t like wasting people’s time with a caching issue. Do you think me using emojione is relevant, too? You can see I’m gradually replacing the icons with the white background with emojione. Just, wait, a cute little icon will appear in the bottom left soon (a quill pen).

The caching doesn’t explain the squished pngs. That’s wrong formatting like you elaborated on before is my thought.

(Joe) #15

Ok, now I see this:


Don’t change anything let me have a look first.

(Blu McCormick) #16

Oh no. :persevere::persevere::persevere:

Ok. On standby.

(Joe) #17

Try adding this:

.retort__emoji-picker-wrapper--limited .emoji-picker button.emoji {
	min-width: 45px;
	min-height: 45px;

Retort - a reaction-style plugin for Discourse
(Blu McCormick) #18

Thanks, III.

I got this.


Hey, at least it is in neat rows. Let me check my string. Maybe I duplicated it?

Deleted and pasted string in fresh:


(Joe) #19

You have three separate issues:

1- emojis don’t show until a bit of time has passed (Caching, possibly)
2- Some emojis have white backgrounds (need to be edited / changed)
3- Emojis get squashed sometimes if there’s a lot of them (the code above should prevent that)

Retort - a reaction-style plugin for Discourse
(Blu McCormick) #20

Thanks, III.

I will keep replacing the pngs with white background, and wait overnight to see how it looks in the morning.

(Blu McCormick) #21

Wow, III. Your code worked like a charm and I just signed out and in to get the latest emojis to appear in the set. I stuck with EmojiOne and that fixed the formatting problems.