Non-square Emojis within spoiler tags have fixed size


#1

Hi,

We added a set of non-square custom Emojis to our Discourse instance. To prevent them to be resized to 20x20 by the clients, we prefixed all of them with _ and added the following CSS rule:

body img.emoji[title^=":_"] {
    width: initial !important;
    height: initial !important;
}

It works great but not when these Emojis are included in a spoiler tag. The title attribute is missing and nothing seems to allow us to prevent them to be resized to 20x20.

See a live example here:

which generates the following code for the Emoji:

<svg data-spoiler-id="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
  <defs>
    <filter id="blur-1"><feGaussianBlur id="gaussian-1" stdDeviation="0"></feGaussianBlur></filter>
  </defs>
  <image xlink:href="https://forum.detendusdupad.com/uploads/default/_emoji/_hollande.png?v=3" filter="url(#blur-1)" style="filter: url(#blur-1)" width="20" height="20"></image>
</svg>

Is it possible to add the title attribute to the outer SVG tag? If not, what workaround can we implement?

Thanks!


(Rafael dos Santos Silva) #2

I can apply a xlink:title to the image tag, would it help?


#3

I don’t think it would help since the parent svg tag also have a fixed size as attributes (width="20" height="20"). According to my CSS knowledge there is no way to select a parent element.

This is broader than this particular issue but can’t the blur effect be achieved with CSS only?