News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

How can I use special characters as smiley codes?

Started by Jade Elizabeth, February 27, 2016, 06:45:16 AM

Previous topic - Next topic

Jade Elizabeth

When I paste these into the message box it wont preview/post...so I've attached a picture of the codes. I want to use codes like facebook does...How can I make this work? Also I would need my posts to still work...since it doesn't seem to be working when I paste this stuff in posts.

You can find a full list here.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Biology Forums

Interested too, given that many people use their phones to browse my site...

For me, when I used emojis, the post comes out blank.

Jade Elizabeth

Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

nend

I found something that may be of some help, just need to find a way to incorporate it into SMF.

http://emojione.com/developers/

Allot of demo scripts in there, so most of the work is already done.  ;D
http://git.emojione.com/demos/2.1.1/autocomplete.html

Also for the unicode aspect
http://git.emojione.com/demos/2.1.1/jstoshort.html

Conversion
http://git.emojione.com/demos/2.1.1/class-convert.html

However allot of support, allot of routes you can go.


Jade Elizabeth

The only issue I have with emojione is that I want twitter emoji..
http://emojipedia.org/twitter/

I've already downloaded basically all of them and resized, the codes are the same as used for Facebook.

Quote from: Shuban on February 27, 2016, 03:39:31 PM
Quote from: Jade Elizabeth on February 27, 2016, 01:28:02 PM
Same here. Is your forum also UTF8?

Yes it is

I have a feeling it might actually work on non utf-8 forums which makes me sad because I thought ahead lol.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

nend

I don't know if you looked at this.
http://www.unicode.org/emoji/charts/index.html

It should work on UTF-8,  We have here a encoding(UTF-8) and a character set(Unicode), not the same thing. Also Unicode emojis are dependent on the OS how things will be displayed. I think in Twitter's case they are replacing the character with a image, not a impossible task but repetitive and time consuming depending how deeply you want to support it.

Jade Elizabeth

How will that work if they're copying and pasting from the above link? I don't really understand why it wont work and how to get it working.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

nend

To make it uniform across all systems you'll have to convert it sort of how the BBC smilies work. Which may be allot of work depending on how many you want to convert.

The reason SMF has trouble previewing is due to code support. I haven't looked where but it is either in the JavaScript or the PHP side that encodes it.

It will not work perfect at this time without a modification. It will work somewhat though, but fragmented between different browsers and operating systems.

margarett

That should actually work in 2.0.10+ when we added the utf8mb4 compatibility stuff...

😷 🙌 👀
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Jade Elizabeth

Is there a way to get it now? My smileys are kinda broken lol.
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Biology Forums

Quote from: margarett on February 28, 2016, 08:11:28 PM
That should actually work in 2.0.10+ when we added the utf8mb4 compatibility stuff...

😷 🙌 👀

So it does work? Could you elaborate?

nend

Quote from: Shuban on February 28, 2016, 11:46:37 PM
So it does work? Could you elaborate?
It does and it doesn't.

Unicode Emoji's are dependent on OS and browser.

To fix fragmentation between these you would have to translate the Unicode Emoji's, so that anyone's whose setup doesn't support a particular emoji can use them and so they show the exact same emoji across setups.

Quote from: Jade Elizabeth on February 28, 2016, 10:22:30 PM
Is there a way to get it now? My smileys are kinda broken lol.
This would be a major undertaking for anyone that wants to create a similar user experience and add full compatibility due to this fragmentation. This is one of the reasons I suggested Emoji One, I know it isn't Facebooks or Twitters set, but the hard work is already done.

I hate to be so blunt, but I too thought it might be fast and simple to do, that was until I looked at the data.  :(

Here is the full list of Unicode Emoji's
http://www.unicode.org/emoji/charts/full-emoji-list.html

Here is the reference key.
http://www.unicode.org/emoji/charts/index.html#emoji-data-chart-key

"Brow." is what your current setup of your current machine supports. Apple is like iPhone and iOS. Google is Chrome OS, Android. Emoji One and Twitter either use client side or server side processing to convert Unicode to provide a uniform experience.

I use Ubuntu as my main desktop PC and most of the Emoji's are just blocks which means they aren't in my character set. On my Android device I get most of them, but there is the problem what I may see on my Android I can not see on my desktop.

nend

Ok, on this I put it aside after seeing how much would have to be converted and after looking how badly coded the EmojiOne developer references are.

Well today I was trying to figure out where SMF stores the custom profile data in the database, well I never found it but while going through the message table I noticed how Unicode data is stored, it is stored in decimal format.

Then I remembered that the EmojiOne pack was stored in hexadecimal file names, that is when a light bulb appeared.

All I would need to do is convert decimal to hexadecimal. Will here it is, a working EmojiOne hack so forth, may release it on the mod site soon.

Here is code in Subs.php
//Emoji decimal codes 128512-128591
preg_match_all('/&#([0-9]{6});/', $data, $matches, PREG_PATTERN_ORDER);
if (!empty($matches[0])) {
$replaces = array();
foreach ($matches[0] as $match => $dec) {
$int = substr($dec,2,-1);
if ($int <= 128591 && $int >= 128512) {
$hex = dechex($int);
$replaces[$dec] = '<img src="http://emojione.com/wp-content/uploads/assets/emojis/'.$hex.'.svg" alt="'.$dec.'" class="smiley" />';
}
}
$data = strtr($data, $replaces);
}


Put it before
if (!empty($modSettings['autoLinkUrls']))
{
// Are we inside tags that should be auto linked?
$no_autolink_area = false;
if (!empty($open_tags))
{
foreach ($open_tags as $open_tag)
if (in_array($open_tag['tag'], $no_autolink_tags))
$no_autolink_area = true;
}

// Don't go backwards.
//!!! Don't think is the real solution....


Make sure to put it in that spot as this will prevent SMF from going through the HTML image tags it produces. ;)

If you use this code above it is set to use the EmojiOne sites library, you can download the images and host them yourself, it is a big though. ;)

nend

Ok,

The code above has the wrong url in it, it will work but it is basically hot linking off the EmojiOne site.

Here is the correct place to link it.

For SVG
http://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.1/assets/svg/

For PNG
http://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.1/assets/png/

nend

Updated code, widened the values a little bit because the scope is a little bigger than another source suggested.
preg_match_all('/&#([0-9]{6});/', $data, $matches, PREG_PATTERN_ORDER);
if (!empty($matches[0])) {
$replaces = array();
foreach ($matches[0] as $match => $dec) {
$int = substr($dec,2,-1);
if ($int >= 127344 && $int <= 128709) {
$hex = dechex($int);
$replaces[$dec] = '<img src="http://cdnjs.cloudflare.com/ajax/libs/emojione/2.1.1/assets/svg/'.$hex.'.svg" alt="'.$dec.'" class="smiley" />';
}
}
$data = strtr($data, $replaces);
}

nend

Found the other problem with previewing not working with these characters, it seems like SMF's correcting for older browser support is interfering.

In Post.template.php
Find
x[x.length] = textFields[i] + \'=\' + document.forms.postmodify[textFields[i]].value.replace(/&#/g, \'&#38;#\').php_to8bit().php_urlencode();

Replace
x[x.length] = textFields[i] + \'=\' + encodeURIComponent(document.forms.postmodify[textFields[i]].value);

Will have to look into it further but looks to be a bug.  :-\


nend

Been looking into some issues. I have found out there are a few characters that do not get translated in a post.

Not really looking into converting these because that would mean allot of unnecessary load.

For example if I do it on the PHP side then that would mean a decent size conversion table, it would be fast but then you have the large file size. You don't want this for something non vital as it would be cached by the system opcode cache. I try to stay away from growing this cache with non-vitals, you don't want the server reading from filesystem too much.

JavaScript wise the user would have to load the file and wait for the page to be translated, bad user experience in other words.

I can convert the strings amongst posting,  which might be the best option.

Biology Forums

I've decided to simply upload all the EmojiOne icons at images into smileys. Seems to be a more native way to do this, even though it's going to be a pain in the arse later on. What this does is give you that edge when it comes to using emojis and one's cellphone while browsing a forum

Advertisement: