Preview:
I have been experimenting around ways to implement custom emojis to Flarum while only using LESS.
My best approach was this code:
@emojis:
'URL for emoji-1',
'URL for emoji-2';
.for(@emojis, {
a[href="emoji-@{i}"] {
background: url(@value)
no-repeat;
background-size: 100% 100%;
color: transparent !important;
user-select: none;
pointer-events: none;
border: 0 !important;
}
});
.for(@list, @code) {
& {
.loop(@i:1) when (@i =< length(@list)) {
@value: extract(@list, @i);
@code();
.loop(@i + 1);
}
.loop();
}
}
How does it work?
The code creates a for loop mixin and then loops through @emojis variable to create CSS for the emojis.
How do I add my own emojis?
The emojis are stored in @emojis. You can add your own emojis by simply adding more URLs into the variable.
Example:
@emojis:
'https://emoji.gg/assets/emoji/9056_Ribbon_Gold.gif',
'https://emoji.gg/assets/emoji/6228_A_Blob_party.gif';
Note: The end of the list must always end with ;
How do I use the emojis in a discussion?
You can display them by using the following markdown in your post: [OO](emoji-<emoji-number>)
Example: blah blah some text [OO](emoji-2) another text
If we'd have an emoji list such same as above, we'd use [OO](emoji-2) to display the party blob emoji.
The number of the emoji depends on the position of the emoji in the list, and it's automatically generated.
Few things to note:
- If you remove an emoji from the list, the emoji list will be re-numbered. If you, for example, remove the first emoji, then entire emojis will be 1 number lower in the loop index, which will pretty much break all emojis in a discussion. This means that emojis should be always added/removed to/from the end of the list.
- The emoji size is fixed to the font size, and is automatically re-sized.
- This CSS was tested only in Chrome & FreeFlarum. I cannot guarantee that the emojis will be displayed correctly in other browsers & forums.
- You can get some emojis from https://emoji.gg/ and then just copy the image URL.
- The emojis won't appear in any emoji extension that generates an emoji list. You could have a discussion with emoji list & IDs, or list them somewhere else.
Have you got a better approach at this?
I tried to use the each function in LESS, but Flarum disliked that. I tried many ways, and this ended up being the only working way that automatically generates emojis from a list. If you've got a better idea on how to handle emojis, and maybe give them custom names, etc., then let me know!
Minified version:
@emojis:
'Emoji URL A',
'Emoji URL B',
'Emoji URL C';
// And so on... Last URL must end with ";", others should be comma-separated.
.for(@emojis,{a[href="emoji-@{i}"]{background:url(@value)no-repeat;background-size:100%100%;color:transparent!important;user-select:none;pointer-events:none;border:0!important;}});.for(@list,@code){&{.loop(@i:1)when(@i=<length(@list)){@value:extract(@list,@i);@code();.loop(@i+1);}.loop();}}
Paste the code in Administration > Appearance > Custom CSS, save & reload the page. If you have any questions or you found any bug, just reply to this discussion and I'll get to you ASAP.
