Emoji selector and custom Emoji

emoji
rfc
spec

(Jeff Atwood) #1

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.


(Jeff Atwood) #2

Twitter Emoji:

Emoji One (our current default):

Google emoji:
http://emojipedia.org/google-emoji-list/

Apple emoji:

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


(Anton) #3

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.

(Jeff Atwood) #4

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.


(Anton) #5

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.


(Jeff Atwood) #6

They could try typing :) and find out…


(Anton) #7

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).


(Sam Saffron) #8

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:


(Mittineague) #9

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


(cpradio) #10

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.


(Anton) #11

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:


(Régis Hanol) #12

Phase #1 is now available :beetle:

https://github.com/discourse/discourse/commit/e6e794861767721ff0ece7714c2f7564a6cc61b1


(Sam Saffron) #13

:kissing_heart: thanks! :gift_heart:

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


(Régis Hanol) #14

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

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


Custom emoticons/emoji list?
:anguished: and possibly others don't appear as Emojis
(Erick Guan) #17

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

Added a howto:


(Erick Guan) #18

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.


(Jeff Atwood) #19

What do you mean? Emojis are all consistent sizes.


#20

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


(Erick Guan) #21

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?


(cpradio) #22

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