Filter out emojis by category

[WebCMS]

Please provide an option to I turn off irrelevant emojis by category like country flags, food, activity, travel, symbols, etc. It would be nice to filter out everything except Smileys and Emoticons (first and last categories) to eliminate all other clutter.

[Matt]

This isn't something we'll likely do. The emoji picker is pretty universal across all devices and apps and we'd not want to change that.

[Nathan Explosion]

https://www.ynwa.tv/files/file/20-ne-emoji-enhancements/

[Dreadknux]

At the very least, is it possible to consider the ability to re-organise Emoji groups in the drawer? I have some custom Emoji that I want to be the first thing users see in the drawer, but users have to scroll all the way down past the default ones just to find them and they get forgotten about as a result (I want to keep the default emoji, but bottom of the list - it doesn't make sense for these to be the first thing users see in a community emoji drawer if there are other categories/groups available, as users can easily access the same emoji using their mobile keyboard).

[Marc]

This is not being planned at present, however its worth pointing out recently used ones are actually shown at the top

[WebCMS]

On 10/25/2023 at 4:38 AM, Matt said:

This isn't something we'll likely do. The emoji picker is pretty universal across all devices and apps and we'd not want to change that.

One of the following approaches would be a graceful solution to this issue -

1) You already have emojis grouped by category nicely so it would be quick to offer filter switches in the ACP to unselect emojis by category. This generic solution will not affect the behavior as all the emojis would still show by default. For those site operators who want to filter out some categories, they could use the category switches in the ACP.

2) Alternatively, you could offer to sort the categories so we could push the less frequently used categories to the bottom (this would be ideal for sites who still want to offer all the emojis but list the most used categories on the top). Best of both worlds.

 

If you don't wanna implement the above -

3) For the emojis themselves, we could hide them using CSS like so for now:

div[data-categoryid='flags'] {display: none}

However, this leaves the category headings as they don't have unique identity in the DOM. Hiding by the available classes (ipsAreaBackground_light ipsPad_half) will hide all category headings and display all the emojis in one place (including the Recently Used ones) which is not ideal. How about giving ID's to the category heading divs so we could hide them using CSS?

<div class="ipsAreaBackground_light ipsPad_half" id="catetory-symbols">

Then, in our CSS:

#category-symbols {display: none}

Or you could group each category heading div and their emoji divs inside a parent div with ID's so we could hide the parent-category divs by their ID's.

Done.

Edited November 4, 2023 by WebCMS

[Marc]

On 11/4/2023 at 5:06 AM, WebCMS said:

One of the following approaches would be a graceful solution to this issue -

1) You already have emojis grouped by category nicely so it would be quick to offer filter switches in the ACP to unselect emojis by category. This generic solution will not affect the behavior as all the emojis would still show by default. For those site operators who want to filter out some categories, they could use the category switches in the ACP.

2) Alternatively, you could offer to sort the categories so we could push the less frequently used categories to the bottom (this would be ideal for sites who still want to offer all the emojis but list the most used categories on the top). Best of both worlds.

 

If you don't wanna implement the above -

3) For the emojis themselves, we could hide them using CSS like so for now:

div[data-categoryid='flags'] {display: none}

However, this leaves the category headings as they don't have unique identity in the DOM. Hiding by the available classes (ipsAreaBackground_light ipsPad_half) will hide all category headings and display all the emojis in one place (including the Recently Used ones) which is not ideal. How about giving ID's to the category heading divs so we could hide them using CSS?

<div class="ipsAreaBackground_light ipsPad_half" id="catetory-symbols">

Then, in our CSS:

#category-symbols {display: none}

Or you could group each category heading div and their emoji divs inside a parent div with ID's so we could hide the parent-category divs by their ID's.

Done.

As mentioned by my colleague, this is a pretty universal thing, which we won't be changing.

I have to be honest here too, and say you should really ask yourself how much of an impact on the success of your site changing around a few emojis is going to make. We do see people overthink quite often, and it can be helpful to sit back at times and ask yourself if these things are really worth it. 

Take this one thing as an example. We wont be implementing it ourselves. Evaluate if the below is worthwhile, or if it would be better spent on the sites content

• Time spent here figuring out if it's possible
• Time to write the relevant changes to do what you wish to do
• Time fixing issues with what you just changed
• Time updating these items on-site upgrades which break your changes
• Time chasing what you think may be bugs due to those changes

Of course you may read the above and think "Yes!". If that's the case, then great! But it would be remiss of me not to share my thoughts.

 

[WebCMS]

Sticky Icon tabs for emoji categories (instead of a single scrolling list for all categories) would offer the necessary UX.

This is from LinkedIn

[WebCMS]

Here is the best implementation of emoji dropdown list by Gmail that has ALL the emojis with category icon links/tabs on the top that serve as jump links to jump to its category on clicking them. We can still scroll to the next/previous categories and the category icons on the top highlight automatically (2-way) as we scroll. No need to hide any categories as the jump links can quickly jump to a category and scrolling still works as usual.

Please try it out in your Gmail and its better UX and consider implementing the category links/tabs in emoji dropdown.