Adding emoticons to Octopress

If you're using Octopress, chances are you're familiar with the emoticons used in GitHub.

It's possible to make use of these in an Octopress blog as well.

Here's how I managed it from: https://github.com/chriskempson/jekyll-emoji

Added gem 'gemoji' to Gemfile.

In Terminal ran bundle install.

Added the emoji folder to source/images/emoji and /images/emoji.

Added emoji_dir: images/emoji to _config.yml.

(Please note there shouldn't be spaces between the { Octopress decided not to display the code if they were together.)

Changed { { content } } to { { content | emojify } } in the article.html and page.html, you also do the same for anywhere else you'd like to appear and string emojify e.g. { { content | excerpt | emojify } }. (Again please ignore the spaces between the {.)

Also added the following in _styles.scss:

1
2
3
4
5
6

// Reset image styles for Emoji
.emoji {
  box-shadow: none;
  border: 0;
  height: 20px;
}

Then added emoticons into posts.

There's a full list here: https://www.emoji-cheat-sheet.com/

The default size of the images are 64x64 so finally going to run a Photoshop batch script to change the size to 20x20 to save a bit on filesize.

Thanks to https://github.com/chriskempson for helping me out with this.

:bowtie: :smile: :laughing: :blush: :smiley: :relaxed: :smirk: :heart_eyes: :kissing_heart: :kissing_closed_eyes: :flushed: :relieved: :satisfied: :grin: :wink: :stuck_out_tongue_winking_eye: :stuck_out_tongue_closed_eyes: :grinning: :kissing: :kissing_smiling_eyes: :stuck_out_tongue: :sleeping: :worried: :frowning: :anguished: :open_mouth: :grimacing: :confused: :hushed: :expressionless: :unamused: