Best way to implement custom emoji

support
1

Hello
What would be the best way to implement custom emojis on a site?

Ideally, I would like it to be similar to the emojify feature and write something like :haha: to display a custom emoji, in markdown.

How would one go about implementing something like this?

Thank you!

Jaclyn

2

@jaclyntan

I like your timing. :smiley:

I have just submitted a PR over here: Update HugoBasicExample Content by onedrawingperday · Pull Request #45 · gohugoio/hugoBasicExample · GitHub that documents a technique to achieve the use of non Unicode emoji in Hugo.

The following quote is from the file over here:

If you feel restricted by Unicode Standard emoji and want to use custom emoji the replaceRE function makes it easy to perform Static Image Replacement in Hugo.

In this example we will be using emoji from the Mutant Standard set.

  • Do not use enableEmoji in your Hugo project’s configuration

  • Store the icons of the custom emoji set under /static/

  • Use the shorthand codes provided by the custom emoji set in your content files e.g. :orc:

  • In your templates execute the Image Replacement like so:

{{ replaceRE “(\:([a-zA-Z0-9_]*)\:)” <img class="emoji" src="/${2}.svg" alt="${1}" title="${1}"> .Content | markdownify | safeHTML }}
{{< /highlight >}}

N.B. The above RegEx captures all alphanumerics and underscores within two colon : characters (amend it according to your custom emoji set’s specification).

3 Likes
3

That sounds perfect, I’ll definitely check it out. Thank you so much!!! <3

4

Hi there, sorry to reopen this after so long. I just started to use Twemoji in my website thanks to hugo-mod-twemoji. I’m looking for a way to include custom SVGs in a simple way and found this, which would be great since the custom SVGs could be included just using some escape characters before and after the name of the icon (filename).

I’m wondering if the replaceRE function can be used in a shortcode. In my website I’m using Wowchemy, which implements this shortcode to include icons. It’d be great if I could use the technique documented here to easily include custom SVGs.

Could you share an example of using this so it can detect custom codes and replace them with SVGs? Ideally normal emojis should still be able to work, so perhaps the escape characters could be different (not :).

Thank you very much in advance,

Rodrigo

5

The example is in the above linked GitHub Pull Request.

I am afraid that I do not have the time to look into the Wowchemy theme.

Last but not least, we discourage bumping old topics because people who participated in these discussions some time ago, may not be around or may have moved on.

In my case I am still around in this forum, but emoji is really low in my priorities at the moment.

Thanks for the understanding.

1 Like