48design/phmiley Demo Code

tagGenerator

tagGenerator / config Output
none (direct Browser output) 
// The variable $testString in the following code sections
// corresponds to the following string:
"I could eat 11️⃣ 🍕 right now! 🤤 🧎🏾‍♂️👩🏿🇪🇺🏃🏻‍♀️🏃‍♀️"

I could eat 11️⃣ 🍕 right now! 🤤 🧎🏾‍♂️👩🏿🇪🇺🏃🏻‍♀️🏃‍♀️
default (with default preset "twemoji_72") 
$Phmiley->parse($testString)

I could eat 1 right now! 

I could eat 1<img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/72x72/31-20e3.png" style="height:1em;width:auto;vertical-align:text-bottom;"> <img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/72x72/1f355.png" style="height:1em;width:auto;vertical-align:text-bottom;"> right now! <img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/72x72/1f924.png" style="height:1em;width:auto;vertical-align:text-bottom;"> <img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/72x72/1f9ce-1f3fe-200d-2642-fe0f.png" style="height:1em;width:auto;vertical-align:text-bottom;"><img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/72x72/1f469-1f3ff.png" style="height:1em;width:auto;vertical-align:text-bottom;"><img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/72x72/1f1ea-1f1fa.png" style="height:1em;width:auto;vertical-align:text-bottom;"><img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/72x72/1f3c3-1f3fb-200d-2640-fe0f.png" style="height:1em;width:auto;vertical-align:text-bottom;"><img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/72x72/1f3c3-200d-2640-fe0f.png" style="height:1em;width:auto;vertical-align:text-bottom;">
default (with preset "twemoji_svg") 
$Phmiley->setPreset("twemoji_svg");
$Phmiley->parse($testString);

I could eat 1 right now! 

I could eat 1<img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/svg/31-20e3.svg" style="height:1em;width:auto;vertical-align:text-bottom;"> <img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/svg/1f355.svg" style="height:1em;width:auto;vertical-align:text-bottom;"> right now! <img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/svg/1f924.svg" style="height:1em;width:auto;vertical-align:text-bottom;"> <img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/svg/1f9ce-1f3fe-200d-2642-fe0f.svg" style="height:1em;width:auto;vertical-align:text-bottom;"><img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/svg/1f469-1f3ff.svg" style="height:1em;width:auto;vertical-align:text-bottom;"><img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/svg/1f1ea-1f1fa.svg" style="height:1em;width:auto;vertical-align:text-bottom;"><img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/svg/1f3c3-1f3fb-200d-2640-fe0f.svg" style="height:1em;width:auto;vertical-align:text-bottom;"><img src="https://gitcdn.xyz/repo/twitter/twemoji/master/assets/svg/1f3c3-200d-2640-fe0f.svg" style="height:1em;width:auto;vertical-align:text-bottom;">
default (with preset "openmoji_svg") 
$Phmiley->setPreset("openmoji_svg");
$Phmiley->parse($testString);

I could eat 1 right now! 

I could eat 1<img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/svg/0031-FE0F-20E3.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"> <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/svg/1F355.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"> right now! <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/svg/1F924.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"> <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/svg/1F9CE-1F3FE-200D-2642-FE0F.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/svg/1F469-1F3FF.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/svg/1F1EA-1F1FA.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/svg/1F3C3-1F3FB-200D-2640-FE0F.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/svg/1F3C3-200D-2640-FE0F.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;">
default (with preset "openmoji_72") 
$Phmiley->setPreset("openmoji_72");
$Phmiley->parse($testString);

I could eat 1 right now! 

I could eat 1<img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/72x72/0031-FE0F-20E3.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"> <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/72x72/1F355.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"> right now! <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/72x72/1F924.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"> <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/72x72/1F9CE-1F3FE-200D-2642-FE0F.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/72x72/1F469-1F3FF.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/72x72/1F1EA-1F1FA.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/72x72/1F3C3-1F3FB-200D-2640-FE0F.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/72x72/1F3C3-200D-2640-FE0F.png" style="height:1.3em;width:auto;vertical-align:text-bottom;">
default (with preset "openmoji_618") 
$Phmiley->setPreset("openmoji_618");
$Phmiley->parse($testString);

I could eat 1 right now! 

I could eat 1<img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/618x618/0031-FE0F-20E3.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"> <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/618x618/1F355.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"> right now! <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/618x618/1F924.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"> <img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/618x618/1F9CE-1F3FE-200D-2642-FE0F.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/618x618/1F469-1F3FF.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/618x618/1F1EA-1F1FA.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/618x618/1F3C3-1F3FB-200D-2640-FE0F.png" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji@12.3.0/color/618x618/1F3C3-200D-2640-FE0F.png" style="height:1.3em;width:auto;vertical-align:text-bottom;">
default (with custom options, e.g. local emoji images) 
$Phmiley->imgBase = "./example-images/";
$Phmiley->imgExt = "svg";
$Phmiley->codeUppercase = true;
$Phmiley->parse($testString);

I could eat 1 right now! 

I could eat 1<img src="./example-images/0031-FE0F-20E3.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"> <img src="./example-images/1F355.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"> right now! <img src="./example-images/1F924.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"> <img src="./example-images/1F9CE-1F3FE-200D-2642-FE0F.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="./example-images/1F469-1F3FF.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="./example-images/1F1EA-1F1FA.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="./example-images/1F3C3-1F3FB-200D-2640-FE0F.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"><img src="./example-images/1F3C3-200D-2640-FE0F.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;">
custom 
$Phmiley->tagGenerator = function($data) {
    return $data['emoji']
            . ' => <span style="outline: solid red 1px;">'
            . $data['code']
            . '</span>';
};

I could eat 11️⃣ => 31-fe0f-20e3 🍕 => 1f355 right now! 🤤 => 1f924 🧎🏾‍♂️ => 1f9ce-1f3fe-200d-2642-fe0f👩🏿 => 1f469-1f3ff🇪🇺 => 1f1ea-1f1fa🏃🏻‍♀️ => 1f3c3-1f3fb-200d-2640-fe0f🏃‍♀️ => 1f3c3-200d-2640-fe0f

I could eat 11️⃣ => <span style="outline: solid red 1px;">31-fe0f-20e3</span> 🍕 => <span style="outline: solid red 1px;">1f355</span> right now! 🤤 => <span style="outline: solid red 1px;">1f924</span> 🧎🏾‍♂️ => <span style="outline: solid red 1px;">1f9ce-1f3fe-200d-2642-fe0f</span>👩🏿 => <span style="outline: solid red 1px;">1f469-1f3ff</span>🇪🇺 => <span style="outline: solid red 1px;">1f1ea-1f1fa</span>🏃🏻‍♀️ => <span style="outline: solid red 1px;">1f3c3-1f3fb-200d-2640-fe0f</span>🏃‍♀️ => <span style="outline: solid red 1px;">1f3c3-200d-2640-fe0f</span>
custom (only repalce regional indicator symbols / flags) 
$Phmiley->tagGenerator = function($data) use ($Phmiley) {
    if (!preg_match("/[\x{1F1E6}-\x{1F1FF}]/u", $data['emoji'])) {
        return $data['emoji'];
    } else {
        return $Phmiley->defaultTagGenerator($data);
    }
};

I could eat 11️⃣ 🍕 right now! 🤤 🧎🏾‍♂️👩🏿🏃🏻‍♀️🏃‍♀️

I could eat 11️⃣ 🍕 right now! 🤤 🧎🏾‍♂️👩🏿<img src="./example-images/1F1EA-1F1FA.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;">🏃🏻‍♀️🏃‍♀️
custom (replace images that are not found via JavaScript) 
$Phmiley->tagGenerator = function($data) use ($Phmiley) {
    $code = $Phmiley->codeUppercase ? strtoupper($data['code']) : $data['code'];
    return '<img
        src="' . $Phmiley->imgBase . $code . '.' . $Phmiley->imgExt . '"
        style="height:' . ($Phmiley->imgHeight ?? '1em') . ';width:auto;vertical-align:text-bottom;"
        onerror="this.parentNode.replaceChild(document.createTextNode(\'[missing: ' . $data['emoji'] . ']\'), this);"
        >';        
};

I could eat 1 right now! 

I could eat 1
<img
    src="./example-images/31-FE0F-20E3.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.parentNode.replaceChild(document.createTextNode('[missing: 1️⃣]'), this);"
    >
 
<img
    src="./example-images/1F355.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.parentNode.replaceChild(document.createTextNode('[missing: 🍕]'), this);"
    >
 right now! 
<img
    src="./example-images/1F924.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.parentNode.replaceChild(document.createTextNode('[missing: 🤤]'), this);"
    >
 
<img
    src="./example-images/1F9CE-1F3FE-200D-2642-FE0F.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.parentNode.replaceChild(document.createTextNode('[missing: 🧎🏾‍♂️]'), this);"
    >

<img
    src="./example-images/1F469-1F3FF.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.parentNode.replaceChild(document.createTextNode('[missing: 👩🏿]'), this);"
    >

<img
    src="./example-images/1F1EA-1F1FA.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.parentNode.replaceChild(document.createTextNode('[missing: 🇪🇺]'), this);"
    >

<img
    src="./example-images/1F3C3-1F3FB-200D-2640-FE0F.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.parentNode.replaceChild(document.createTextNode('[missing: 🏃🏻‍♀️]'), this);"
    >

<img
    src="./example-images/1F3C3-200D-2640-FE0F.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.parentNode.replaceChild(document.createTextNode('[missing: 🏃‍♀️]'), this);"
    >
custom (remove images that are not found via JavaScript) 
$Phmiley->tagGenerator = function($data) use ($Phmiley) {
    $code = $Phmiley->codeUppercase ? strtoupper($data['code']) : $data['code'];
    return '<img
        src="' . $Phmiley->imgBase . $code . '.' . $Phmiley->imgExt . '"
        style="height:' . ($Phmiley->imgHeight ?? '1em') . ';width:auto;vertical-align:text-bottom;"
        onerror="this.remove();"
        >';        
};

I could eat 1 right now! 

I could eat 1
<img
    src="./example-images/31-FE0F-20E3.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.remove()"
    >
 
<img
    src="./example-images/1F355.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.remove()"
    >
 right now! 
<img
    src="./example-images/1F924.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.remove()"
    >
 
<img
    src="./example-images/1F9CE-1F3FE-200D-2642-FE0F.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.remove()"
    >

<img
    src="./example-images/1F469-1F3FF.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.remove()"
    >

<img
    src="./example-images/1F1EA-1F1FA.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.remove()"
    >

<img
    src="./example-images/1F3C3-1F3FB-200D-2640-FE0F.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.remove()"
    >

<img
    src="./example-images/1F3C3-200D-2640-FE0F.svg"
    style="height:1.3em;width:auto;vertical-align:text-bottom;"
    onerror="this.remove()"
    >
custom (only replace if local image exists) 
$Phmiley->tagGenerator = function($data) use ($Phmiley) {
    $code = $Phmiley->codeUppercase ? strtoupper($data['code']) : $data['code'];
    $emojiFile = $Phmiley->imgBase . $code . '.' . $Phmiley->imgExt;
    if (!is_file($emojiFile)) {
        return $data['emoji'];
    }

    return $Phmiley->defaultTagGenerator($data);        
};

I could eat 11️⃣ right now! 🧎🏾‍♂️👩🏿🏃🏻‍♀️🏃‍♀️

I could eat 11️⃣ <img src="./example-images/1F355.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"> right now! <img src="./example-images/1F924.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;"> 🧎🏾‍♂️👩🏿<img src="./example-images/1F1EA-1F1FA.svg" style="height:1.3em;width:auto;vertical-align:text-bottom;">🏃🏻‍♀️🏃‍♀️