Emoji selector and custom Emoji

This is a Discourse 1.2 feature.

Phase 1: select emoji style

In the admin, site settings, offer a choice of emoji sets

Choices are: Apple/International, Google, Twitter, Emoji One and None.

Does not need to be pretty and graphical selector, can be a drop-down with text choices for now.

Phase 2: add per-site custom emoji

In the admin, customize, Emoji offer a way to add a custom emoji for your Discourse instance:

  • define the new emoji word used, e.g “fired”, which will equate to :fired: in text.

  • add the image and associate it with the emoji word, e.g. fired.png

  • provide a basic UI for browsing, editing, and adding these custom emoji. Can be admin only for initial release.

17 Likes

Twitter Emoji:
https://github.com/twitter/twemoji

Emoji One (our current default):
https://github.com/Ranks/emojione

Google emoji:

Apple emoji:
https://github.com/tmm1/emoji-extractor

(if anyone knows better links for Apple or Google, feel free to reply.)

3 Likes

2 things are in the wishlist of most of our users:

  1. A better emoji selector box in the message editor: with a search box and no captions (so many icons can be shown per row) and a scrollbar (currently only 5 are shown). Maybe with an additional comma-separated per-icon search terms configurable by admin.
  2. A special page where users can see all emoji that are currently available on the website, their codes, and with click-and-copy possibility.

for #2 there is already

http://www.emoji.codes/

So just bookmark that or put it in your FAQ or welcome message on the site.

As for #1 that’s not in scope for 1.2, unfortunately. I do agree we could improve the pop-up emoji selector more in the future though.

3 Likes

What if we add a small button to the toolbox so that when it is clicked, the : is typed automatically and a simple full list of all emoji icons is output in a scrolled area?

Users keep asking “how do I embed smiles” even with a very detailed FAQ topic about it.

They could try typing :) and find out…

Yes, that’s what I keep telling them, but they simply do not understand that some piece of code is converted into an image - in Ukraine the computer education is falling back :smile:

What’s more, the hardest part for them is to discover the way to let the popup show different set of icons. The problem is that they do not know / use English letters at all, so it’s difficult for them to guess what they should type. They’d rather pick by a mouse in a big list. But they do not understand how to do it.

Sorry not trying to be annoying… Just explaining the case in detail. It annoys me as well but I can’t tackle it even by linking them to a 3rd party website. They just want "a button to insert an image, just like they do to insert images in their posts).

Related, I kind of want us to convert emoji unicode codes to images when you bake posts… that way when I am on my iPhone / iPad I can simply switch to the emoji keyboard and type away.

I think we should try to do this if its technically simple enough, not critical for 1.2 though

I do also agree an “emoji” toolbarry thing with much cleaner browse functionality would be awesome. Also not critical for 1.2 but very useful. Finding the right emoji now is :dizzy_face:

3 Likes

Whetever you do, please do not have a pop-up containing them all. There are just way too many of them for that IMHO

1 Like

Slightly off topic - I apologize

@meglio, not sure if this will help your users, but you can use the Composer Help Window Plugin, I just finished.

That will at least add a button your users can click, and you can have the content of that window show the “common” smilies that they can copy and paste.

1 Like

A good example from Skype:

Adding a one-liner with buttons to switch between categories in the box would solve the problem of having too many icons. Just like here:

1 Like

Phase #1 is now available :beetle:

8 Likes

:kissing_heart: thanks! :gift_heart:

we are now on twimoji here :slight_smile: at least to test it out.

5 Likes

Phase #2 is now available :discourse: :sunglasses:

https://github.com/discourse/discourse/commit/45dbdb689620096d348f6a2b1d2cbb081fa4d948

9 Likes

:arrow_right: :cool:
:+1: @zogstrip :roller_coaster:

Added a howto:

5 Likes

Could emojis show their original size, instead of the standard size? Just like photo collection. I also got complaints about its not showing two custom emojis.

What do you mean? Emojis are all consistent sizes.

When you use a custom emoji it will scale the image down to the standard size which makes slightly larger ones look odd.

I get it. I think he is asking for sticker or emotion support. The idea is different from emojis. But it seems logic to put them altogether?

Not sure how to do this using the custom emoticons but I solved it with my plugin using the following css style

https://github.com/cpradio/vb_emoji/blob/master/assets/stylesheets/vb-emoji.css

Granted all of my emoticons have a ‘vb’ prefix, if custom emoticons have a prefix too then this should work

3 Likes