search

knadh / tg-archive

A tool for exporting Telegram group chats into static websites like mailing list archives.
MIT License
829 stars 121 forks source link

Show stickers inline #113

Closed scarlion1 closed 11 months ago

scarlion1 commented 11 months ago

Follow up to https://github.com/knadh/tg-archive/issues/112 Also added a variable to control the size the sticker is rendered inline, in case 50% doesn't work for everyone.

knadh commented 11 months ago

Thanks for the PR @scarlion1. We needn't introduce a config variable for this. This can just be including in the template's CSS. Instead of width, add a class to the image, say media-webp, and then add a style for that.

scarlion1 commented 11 months ago

Instead of width, add a class to the image, say media-webp, and then add a style for that.

Okay I'll try and figure that out!

scarlion1 commented 11 months ago

how's that?

scarlion1 commented 10 months ago

Hi, I just realized that this code isn't working as intended.  I thought specifying img width value as a percentage would do the obvious and resize the image, but it turns out this is actually against standards and an invalid value for img width.  The fact it even has effects seems to be that browser developers have coded in a non-standard parsing of this (probably common) mistake made by web devs. 😉

My intention was to display the sticker at 50% of the image width (so, usually 256 px, since most stickers are 512 px wide), which makes it fit in with the default text size better.  However, the CSS width property is rather based on the parent container which, in case of a wide screen with a wide container (say 2048 px), the sticker image width will actually be upscaled (to double-wide) and look ridiculous compared to the surrounding text, example below.

Sticker rendering on wide screen ![Screenshot from 2023-10-29 06-31-51](https://github.com/knadh/tg-archive/assets/2446600/8498e9d4-6bea-46c8-9ebe-173d0d5bf146)

I've been searching around for a correct way to scale the image with CSS... not coming up with much.  Most of what I find will scale the image but not the surrounding containers (ℯ.ℊ. transform: scale(0.5)), so the same space is used but sticker then has big clearspace margins around it.

It seems can be done without CSS, ℯ.ℊ. by adding srcset and sizes img attributes: <img src="media/id.webp" srcset="media/id.webp 2w" sizes="1px"> also simply <img srcset="media/id.webp 2x"> does the same but not sure if that is standards compliant.

If that's acceptable then I could submit a patch or whatever?

Or you'd rather have different solution?

knadh commented 10 months ago

Does max-wdth: 256px do what you're referring to?

scarlion1 commented 10 months ago

It appears to, since 99.9% of stickers are 512✕512.  However, the spec^1 only requires one side to be 512 px while the opposing side can be ≤ 512 px.  In the case of a sticker that is 128✕512, I'm not sure what would happen until I test it directly...

scarlion1 commented 10 months ago

Ok I tested with a 128✕512 and it stayed that dimension, too tall.  I think also use max-height: 256px then?  Then it was scaled to 64✕256.