Emoji are huge when embedding

[oblio]

I’ve embedded Discourse on several Github Pages blogs. Something strange happens when the posts are shown on the forum, the emoji are huge: https://forum.oblio360.com/t/welcome-to-hearthstone-you-suck-hearthstone/15

Is this a bug? Or something I need to configure?

For reference normal, forum emoji are small, like they’re supposed to be: https://forum.oblio360.com/t/welcome-to-the-oblio-360-forum/8

(I’ve since deleted the topics but the bug is still present. The embedded emoji are shown 100%, as they are stored, while the forum ones seem to be shrinked)

[gwwar]

The huge emoji are missing the class="emoji" attribute. How are the posts being imported? It’s likely being scrubbed by an attribute whitelist.

[oblio]

embed whitelist selector: div.post

So I’m basically just importing the whole post, there are no other selectors applied.

[gwwar]

@sam does it sound about right to add a whitelist selector for img.emoji? I’m not as familiar with https://github.com/cantino/ruby-readability

[sam (Sam Saffron)]

Sounds more or less right, been ages since I looked at that code.

[oblio]

Is there anything I can do as an user? Should I add another whitelist selector?

Please, please, please, let it be a configuration option!

[oblio]

I’ve added img.emoji in the whitelist:

div.post img.emoji

And I only got the huge emoji as the forum post

So this looks like a bug (albeit minor).

[gwwar]

Too bad the whitelist didn’t work.

Could you add steps to show how you’re embedding the posts? It’ll help a lot in reproducing the issue.

[oblio]

Plain old integration into Github Pages, using EvilTrout’s info. You can see the Github Pages repo here: https://github.com/oblio360/dota-blog/blob/gh-pages/_layouts/post.html

I’m just using bog-standard Githug Pages emoji, such as : smile :

[gwwar]

For reference the Jekyll page is using the https://github.com/jekyll/jemoji plugin.

Original emoji markup looks like:

<img class="emoji" title=":worried:" alt=":worried:" src="https://assets.github.com/images/icons/emoji/unicode/1f61f.png" height="20" width="20" align="absmiddle">

[oblio]

I’m a bit unclear

Is this still a bug or did I just misconfigure something?

[gwwar]

The huge emoji’s are the ones coming from assets.github.com (the jemoji gem). This is probably a minor bug with the crawler too aggressively scrubbing attributes from img tags.

Edit: After looking at the config settings, could you show me what you have in:

Is it just “div.post img.emoji” for the whitelist?

[oblio]

Now it’s just div.post.

When I tried div.post and img.emoji I got just the emoji.

BTW, the field doesn’t say which separator should be used. If it’s space or comma or whatever…

[codinghorror (Jeff Atwood)]

This is a good point, can we clarify the copy here @eviltrout so people are not confused, or show an example next to the field?

[oblio]

I think that the best thing would be to change it to the token-type entry. See for example: “Required” -> “exclude rel nofollow domains”.

If we’re at it, I propose another improvement for these kinds of field, they should tokenize on space and comma and other delimiters. This would make editing a lot more efficient. Right now you have to know that the separator is space and write everything and then Tab out, while the field separates the tokens. If it would just process the tokens during input, it would be a lot more user friendly, IMO. Write a word, space, token appears or write a word, comma, token appears.

Should I add this as a separate suggestion? (if you think it’s worth it)

[eviltrout (Robin Ward)]

I’ve added placeholder values to the fields with examples of CSS values.

@oblio it’s just a standard CSS selector so commas are the separators: article, .ad-unit etc.

I don’t think it makes sense to add a token entry for this kind of thing – CSS works great for this!

[oblio]

Ah, ok, the placeholder values will probably do

[gwwar]

PR here:
https://github.com/discourse/discourse/pull/3812