Emoji selector and custom Emoji


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


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


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.


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


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

(Joe Seyfried) #23

Hey all, hey @zogstrip

one question here: The emoji toolbar button in the editor currently happily ignores the setting of “en-/disable emoji” in the site settings. I tried to fiddle with the emoji-toolbar.js file and would like to add something like

if (Discourse.SiteSettings.enable_emoji)
      id: 'wmd-emoji-button',
      description: I18n.t("composer.emoji"),
      execute: showSelector

– but I fail since I can’t seem to access the Discourse object at this point in the code. Could you either give me a hint or even fix this? This is slightly annoying for my site which now has a smiley-implementation of its own - and even a emoji selector with exactly the same button… :wink:

(Gerhard Schlager) #24

I have a few problems with the current state of the emoji selector:

  • The emoji images don’t seem to be cached very long. I used it yesterday and it started to slowly load image after image. Today my browser started to download them again the first time I opened the selector popup. That’s annoying.
  • Why use pagination for the emojis? I thought Discourse is all about infinite scrolling and here I have to click those next/previous buttons. Why not use a simple scrollbar?

I’ve been looking at other products and how they implement such a feature. I like the way outlook.com is doing it.

What I like about it:

  • The first group (the star) shows a list of recently used emojis. That’s great!
  • After selecting a group there’s a heading that shows what I’ll find there (e.g. “People and faces”).
  • The emojis load instantly. No waiting time where I can slowly watch them loading. I guess that’s because they have only one image.
  • There’s a scrollbar!
  • It remembers the last selected group. When I open it again it shows me that group.

(Sam Saffron) #25

A few points here.

  • I do want to add the star tab, think it totally makes sense
  • Emoji caching is bust again @zogstrip, a few weeks ago I set expires to a year out, but it appears gone now and we no longer have any sane caching for emojis which is terrible.
  • Emoji sprites is a huge piece of work I would like to just avoid doing, long term HTTP 2.0 takes care of this anyway with SPDY so its a stop gap solution with plenty of drawbacks.
  • Totally agree with remembering last group (at least for session)
  • Don’t really like the idea of adding a heading, besides the annoyance with localizing I don’t see it as adding any value, you can tell what the grouping is about by looking at the images.
  • Pagination is there to minimize image downloads, if I put 200 pngs in a list it can quickly become a very slow process.

(Régis Hanol) #26

That’s now fixed :cat:


(Régis Hanol) #27

Thanks for reporting that. I just fixed it :sun_with_face:


(Régis Hanol) #28

That’s now done :dragon:


(Justin Pierce) #29

Inspired by iOS, it might be nice having a ‘last used’ or ‘most used’ section that is automatically created for each user as they use emoji and have that be the default category that they see when they open the selector. I also like Slack’s interface for emoji – very clean, quick.

edit: Ah, already doing that – oops – I searched ‘last’ instead of ‘recent’

(Gerhard Schlager) #30

The “last used” seems to be on the roadmap:

(se oli tonnin seteli) #31

Any update on adding custom emoji that are larger than default emoji? Because I can think of a lot of uses for reservedword png’s…