10/10/19 - Emojis in Hugo

Mood accomplished icon 😎accomplished
Tags Hugo Web Development emoji

On a whim, I decided to see if I could add moods to my microblog posts a la LiveJournal. I learned Hugo has an Emojify function. Simply enable emojis in the configuration file:

enableEmoji = true

I ❤️ Hugo!

It doesn’t get much easier than that. My emoji-foo is incredibly weak. Fortunately, there is a Emoji cheat sheet. The emojis don’t quite correlate with the old LJ moods (e.g. “accomplished”) but LJ actually had a custom mood text box, so the same idea can be applied here. For now, I have added simple moods by including the following custom front matter categories:

mood_text: "accomplished"
mood_image: ": sunglasses :"   //without extra spaces
mood_custom: "mario_luigi_dance.gif"

These are referenced in the microblog list template like so:

{{ if or (isset .Params "mood_image") (isset .Params "mood_custom")}}
  <div id="mood"><span class="mood-text">Mood: {{if (isset .Params "mood_custom")}}</span><img class="custom-icon" src="/images/emoji/{{ .Params.mood_custom}}" alt="{{ .Params.mood_text }} icon" title="{{ .Params.mood_text }}"/>{{end}} <span class="emoji" role="img" title="{{ .Params.mood_text }}">{{ .Params.mood_image | emojify }}</span></div>
{{ end }}

While doing this I found some good ideas on emoji accessibility by Léonie Watson and Adrian Roselli. A CSS tooltip is on the to-do list, but for now ye old title will suffice.

I think I will be pilfering slackmojis for a while now.