Emojify your site content

Bloke · 2015-06-17 12:11:27

Although not strictly related to plugin development — it’s more a journey on how to do it — the ability to add Emoji characters to your posts or user comments is something that smd_wrap can help with.

I don’t know of an official plugin and initially looked at an7_filter, but it wasn’t quite man enough for the job without modification. So here’s how to roll your own Emojified site content:

Obtain an Emoji font. I chose emojisymbols.com because of its permissive licence.
Extract the files in the zip file, and upload EmojiSymbols-Regular.woff to your site in a suitable location (here we’ll use a /font directory off your site root).
Add the following to your Page template’s <head>:

<txp:if_section name="some, sections, here">
<style>
/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face {
	font-family: "EmojiSymbols";
	src: url('/font/EmojiSymbols-Regular.woff') format('woff');
	text-decoration: none;
	font-style: normal;
}
</style>
</txp:if_section>

Install and activate smd_wrap. You may be able to use pax_grep as a lighter alternative, but I haven’t tried it (not sure if it handles capturing parentheses with replacements).
Create a new Miscellaneous Form called emojify and paste in this scary-looking content:

<txp:smd_wrap
   transform="replace|regex|/&amp;#x([\da-zA-Z]{4,5});/|&#x${1};"
   delim="~"><txp:yield /></txp:smd_wrap>

Go through your Pages / Forms and wrap <txp:output_form form="emojify"> around any content in which you want to permit Emoji characters, e.g. <txp:output_form form="emojify"><txp:comment_message /></txp:output_form>.
Profit.

All smd_wrap does in this instance is remove the encoded & character and replaces it with a vanilla & symbol on anything that looks like an HTML Emoji-like character sequence. You could tighten the regex if you prefer to only pick up a dedicated subset of the characters. Right now it might pick up quotes (“ and ”), for example.

The upshot is that anybody putting 🍌 in their comment will see a Minion’s favourite food appear in its place when submitted. You may like to wrap the emojify form around <txp:comment_preview /> too so the symbols appear in the preview area. See it in action here.

It might not appeal to the people who prefer to use a WYSIWYG toolbar to insert them, but for typey folk like me it’s good enough. Any improvements to the technique or other character sets you like, please feel free to post them here.

Hope it helps.

Last edited by Bloke (2015-06-17 13:44:00)

candyman · 2015-06-17 13:13:50

Love the

Emoji sentence => Intended meaning => Possible misinterpretation

table! lol :D

BTW, have you recently changed your website font? What is that? Very clear to read.

Bloke · 2015-06-17 13:37:16

candyman wrote #291603:

Love the… Possible misinterpretation table!

Hehe, thanks. Had fun putting that together.

have you recently changed your website font? What is that? Very clear to read.

It’s ABeeZee which is a children’s learning font, but it appealed to me because it remained super-readable at lots of different screen resolutions and sizes. And I’m just a big kid at heart.

Textpattern CMS

Textpattern CMS support forum

#1 2015-06-17 12:11:27

Emojify your site content

#2 2015-06-17 13:13:50

Re: Emojify your site content

#3 2015-06-17 13:37:16

Re: Emojify your site content

candyman wrote #291603:

Board footer