Replace smileys with spqr/assets

Hello everybody,

as you know, I really love to see Pagekit-based websites out there. Of course I love to see people using my extensions, too.

One of the most powerful extensions is spqr/assets. This is not because the extension is something special, it just supplements the possibilities of Pagekit.

Today I will show you a real-life-example: How to replace smileys like :) or :smile: with spqr/assets.

Download spqr/assets

At first you need to install the extension. Enter your Pagekit-backend, open the marketplace and search for "assets". Click the image and choose "install".

Add the assets

Now you are good to go. Open the assets-extension and click "Add Asset".

Now let's add the first asset: The Emojione JavaScript.

Enter a title, just like "EmojiOne JS" and choose the language ("JavaScript"). Now change the type to "URL" and enter the URL https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js. Check the status: It has to be "published". You should also make sure that the script is executed "immediately".

Okay. Let's add another asset: The CSS.

Just close the first asset and click "Add Asset" again. Give it a name (e.g. "EmojiOne CSS") and choose "CSS" as language.

Just like we did before, choose "URL" as type and enter https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css.

Make sure the asset is "published" and save the new asset.

We are almost ready. Just create a third asset, give it a name (e.g. "Emojify" or "Convert JS"). Choose "JavaScript" as language and change the type to "Save Content To File".

Did you see that there is a code editor available now? Enter this code:

$(function() {
    emojione.ascii = true;
    $( "p" ).each(function( index ) {
          var input = $( this ).text();
          var output = emojione.toImage(input);
        var text = $(this).html();
         $(this).html(text.replace(input, output)); 
    });    
});

Make sure that the script is executed deferred and choose "jQuery" as "dependency". As always, make sure this asset is "published".

Now you are done.

If you are adding a smiley like :) or :smile: to your content, it will be replaced automatically.

Written by Roman on {{ "2017-11-24T12:52:52+00:00" | date "longDate" }}