• Replace smileys with spqr/assets

Replace smileys with spqr/assets

Working with assets 6

Potentially outdated

This post is older than 365 days and may be outdated. Please use the site-search to search for updated information.

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".

Working with assets - Add EmojiOne JS

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.

Working with assets - Add EmojiOne CSS

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.

Working with assets - Add Convert Script

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

Working with assets - Add Smiley To Content

Working with assets - Converted smiley

{{ message }}

{{ 'Comments are closed.' | trans }}

Wait a second!

Did you know that there's are great support channels for Pagekit? Visit us today and sign up for free using email or your GitHub-, Twitter-, Google- or Facebook-Account.

Latest blog posts

Latest comments

  • How to fork a theme

  • spqr/toc updated

  • spqr/toc updated

Like my work?

If you would like to support my work, you are invited to do so.