Rocket.chat: Custom-Emoji: Set Emoji Dimensions

[xandershelley]

Emoji size is set by a span class that causes all emojis to have the same height and width. This can be overwriten in the custom css area, but not all emojis look good at any one defined size.

It would be awesome if it were possible to define a size for the emoji in menu during the upload process, or be able to define what span class it should use, or atleast have it respect the original dimensions of the file.

@nokobon

[fnordsh]

+1
I have many images that I would like to use as custom emoji, that only look good in their original dimensions.

It makes sense to scale emoji down inside a text message, but in an emoji-only message, it would be great if the image would be shown in its original size. In both cases, the original aspect ratio should be maintained.

[JD-Hughes]

+1
Does anyone know what the current maximum dimensions are for emoji uploading?

[johanneszink]

+1 We added some meme's as custom emoji. Would be great if they stayed the original size if you use them in an emoji-only message. Maybe allow to set a max size?

[fnordsh]

Max size should be the original image dimensions, imho. Upscaling looks ugly, and I can easily resize the images before I upload them, if the originals are too big.

[johanneszink]

Agreed, upscaling should be avoided. Max size shouldn't be larger than the original picture/emoji.
I thought about using this as a restriction to prevent pictures from being to large if you don't want to touch everything before uploading :)

[fnordsh]

Okay, resizing the images before upload is not a real problem, but still an annoyance, agreed.
But setting a max image size might become more than just a convenience feature when #4482 gets implemented. (I suspect I have some users who would probably use FullHD emoji if they could...)

[murmelbahn]

Custom emoji dimensions would be nice. We are using some faces like Bob Ross as emojis and they are only funny if they are big enough!

[fnordsh]

Any progress on this?

[Frankstar]

still small useless emoji size :(

[c-ampferer]

+1 @Frankstar is still unhappy and bothers me^^

[c-ampferer]

.emoji.big {
    width: 200px !important;
    height: 150px !important;
}

A workaround would be to add the lines above with your desired dimensions under Admiistration/Layout/Custom CSS
As far as i can see, this only affects the custom emojis, the build in emojis use different css classes.

[TwizzyDizzy]

@rocket-cat close

I'm closing this. This would break the UI / UX and is simply achieved/hacked by custom CSS. If you disagree, please elaborate on why this would be important for a larger amount of people and please also elaborate on how one should solve the ramifications for the UI (emoji-reactions being different in size, sidebar last message emojis and so on).

Cheers
Thomas

[fnordsh]

@TwizzyDizzy Please explain how I can use custom CSS to make my custom emoji appear with their original size (as defined in the PNG). I had the impression that the inability to do just that was the whole point of this issue.

[Viktova]

@gertmenke lol check @c-ampferer answer....
its just right above Twizzy's one...

[fnordsh]

@SecKarma Nope, that sets one size for all custom emoji.

[Frankstar]

@gertmenke thats the way to go.
feel free to improve it and post a patch

[fnordsh]

@Frankstar Since I have very little JS/CSS experience and know nothing about Meteor, could you give me a pointer in the right direction? I imagine somewhere in the code it enforces fixed image dimensions, where it shouldn't. Just removing that should cause the Browser to render the image with its original dimensions, right? Feels like it sould be a one-line-fix - the thing is, I have no idea where to look for it.

[Viktova]

Update in 0.66
this should work (example size)

.emoji {
    width: 250px !important;
    height: 200px !important;
}

as the .emoji.big is no longer recognizable

[fnordsh]

Custom emoji are still being forced to fixed dimensions. :-(

[Frankstar]

??? gertmenke - stop "spam" this issues.
SecKarma posted a way to fix this.

its closed anyway ...

[fnordsh]

He did not. His "solution" would force all custom emoji to the same dimensions. It's really not that difficult to understand. I just want Rocket.Chat to not resize my custom emoji when displaying them.

[baiking]

Update in 0.66
this should work (example size)

.emoji {
  width: 250px !important;
  height: 200px !important;
}

as the .emoji.big is no longer recognizable

Seems this is not working now

[Viktova]

New workaround using padding:

.emoji {
   padding: 100px !important;
}

[adocampo]

@M034B5 that code doesn't work properly: it prints the code of the emoji over the emoji and if you type something, then it padded the entire line, and when typing the emoji should be redimensioned to fit the line.

This other still works as per version 2.1.0

.emoji.big {
    width: 200px !important;
    height: 150px !important;
}

[Weuxel]

This other still works as per version 2.1.0

.emoji.big {
  width: 200px !important;
  height: 150px !important;
}

In 3.6.1 this is not working.

[sleeplessnight2]

This other still works as per version 2.1.0

.emoji.big {
    width: 200px !important;
    height: 150px !important;
}

In 3.6.1 this is not working.

It's working perfekt since 3.7.1 (on 3.8.0 too)
But only on desktop Clients or the Browser.

The Mobile Client seems use another css-style "command" or it's fixed at the app itselfs. Does someone knows wich? Would be helpful for all others...

Would be nice for a reopening the case. Or just delete the whole Custom-Emoji section. There's no point in having a custom emoji if you can't recognize it.