Replace smileys with spqr/assets

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".
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.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}