Mutant Standard Emojis

For a long time I have wanted to incorporate the Mutant Standard Emojis into my website. The problem is there are so many and they seem so overwhelming to organize. Atom’s autocomplete-emojis plugin makes it possible to easily select from the native emoji. I will need to figure out something similar if I ever hope to use the Mutant Standard with any efficiency.

The plugin uses emoji-images, so as a test I dumped a custom emoji into the image source folder and added a reference to emoji-images.js. It now appeared on the popup, so at least I have a quick way to look them up.

Mutant Emoji Test

A quick an dirty batch script can be used to grab all the emoji filenames and format them in a list with colons. emoji-images isn’t maintained and are redundant to the native emoji display so I just removed all the old emojis and dumped the new ones in. That will avoid confusion. Emojis at the bottom of the list must be referenced as an image, ones at the top are native unicode emojis.

for %i in (*.png) do echo ":%~ni:", >> all.html

native emojis listed at top, mutant standard on bottom

I still need to manually key the image path. Down the road I may come up with something better but for now this is adequate, I think being able to look up emoji by typing in keywords is the most important part. The only post I ever saw about using custom emojis in Hugo involved using regex magic in the template, I would much rather set up some kind of shortcut that simply adds the path in the markdown document. I’ve had trouble getting markdown-editor to default to that local directory so I looked into custom autocomplete and learned about Atom snippets.

# snippets.cson

'.source.gfm':
  'Mutant Standard Emoji':
    'prefix': 'msemoji'
    'body': '![Mutant Standard Emoji: $1](/images/mutant_standard/$2.png)'

You’re supposed to be able to target images by alt tag in CSS but I couldn’t get it to work, so I targeted the source.

main img[src*="mutant_standard"] {
  width: 24px;
  height: 24px;
  display:inline;
  vertical-align: middle;
}

It’s not perfect, but it makes it easier and faster to add these emojis to posts, which means they will actually get used. I’m tempted to dump my custom emoji and kaoani into emoji-images as well, and probably will at a later date. And snippets are dead useful Mutant Standard Emoji: Cool Face , I wish I’d known about them sooner. Mutant Standard Emoji: Alien Monster Whee! Mutant Standard provides visual tips on how to integrate these images and I made some adjustments to line-height to accommodate.

Mutant Standard Emojis

12/14/20