Emoticons

BlaB! WS 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.


Page updated: 2022-10-05
 
Powered by BlaB! Pages