Emoticons
BlaB! AX supports two types of emoticons - native emoji and a list of emoticons. Native emoji can be inserted in a message directly from the display keyboard of IOS and Android devices and there are emoji extensions for the desktop browsers.
A list of emoticons is displayed when users click on the yellow icon on the left of the text box. This list of emoticons can be found as a PHP array in the file emocodes.php
. There are no image files, all emoticons in SVG format are base64 encoded entries in emoticons.css
. A single emoticon from emocodes.php
looks like this:
$emoticons[]=':code: css_selector 1';
There are three parameters separated by a blank space: [1] an emoticon code to post with, [2] a CSS selector from emoticons.css
, [3] visibility - (1 or 0) which determines if the emoticon is displayed in the list of emoticons. If 0 the code would be processed and the emoticon posted in chat but neither code nor image would be visible in the list of emoticons. We call this an alias.
emocodes.php
$emoticons[]=':anguished: svg_emo_anguished 1';
$emoticons[]=':astonished: svg_emo_astonished 1';
$emoticons[]=':bandage: svg_emo_bandage 1';
$emoticons[]=':coldsweat: svg_emo_coldsweat 1';
// etc etc
emoticons.css
.svg_emo_anguished {background-image: url("data:image/svg+xml;base64,...")}
.svg_emo_astonished {background-image: url("data:image/svg+xml;base64,...")}
.svg_emo_bandage {background-image: url("data:image/svg+xml;base64,...")}
.svg_emo_coldsweat {background-image: url("data:image/svg+xml;base64,...")}
/* etc etc */
You can download 2 sets of emoticons from the product page - EmojiOne and NotoEmoji. To replace EmojiOne with NotoEmoji download NotoEmoji, unzip and replace emocodes.php
& emoticons.css
. Uncache with the pink button from AdminCP » Settings.
Why SVG in a single CSS file and not multiple image files? Unlike PNG, GIF & JPG SVG is a vector format and vector images look better and sharper on Hi-Res displays and a different size (see Tricks & Tips) will not blur the images. With this method all 80 emoticons are downloaded and cached on the user device with a single HTTP request which greatly reduces the load time.