Element-web: Smaller inline thumbnails for uploaded images

[jfrederickson]

Currently if someone posts an image, it can fill up almost the entire chat pane. Given that images can already be expanded by clicking on them (which provides a link to the full size version as well), I think the thumbnail shown inline should be significantly smaller, to avoid pushing the rest of the conversation off the top of the screen with one message.

[ara4n]

We've experimented a bunch with this over the last few months. I agree that usabilitywise it could be reduced, but aesthetically i also kinda like them being big. Hmmmm. @AmandineLP wdyt?

[jfrederickson]

Yeah, aesthetically it's kinda nice, but I personally think the interruption that can cause in a conversation could get annoying very quickly. For reference, here's the way Vector and Slack currently present the same image (and note that Slack allows you to fold it out of the way as well)

[AmandineLP]

Agreed it's sometimes hardly usable. Even on the screenshot below and especially on small screens. It's glossy when it's a nice pic, but shouldn't block usability :)
I would still keep it bigger than Slack though. The option to unfold it is good, but I would at least make it a setting ("display small/medium/large thumbnails"), basically like windows allows you to change the way your folder content is displayed: sometimes you need huge thumbnails, others, only details.

We could also start by decreasing the size a bit (by the same amount of free space on the right, only the bit with the grey line). The problem on small screen is that it takes the full height, but failing to think through an algorithm which would allow to take into account the height of the window as well as the width when resizing the thumbnail....

[jfrederickson]

Oh yeah, I didn't think about making it configurable - that would be nice. (Still leaves the question of what the default should be, but it'd be an improvement IMO.)

[trosel]

I think there should just be a consistent image preview size for desktop and phone apps alike. For example on Slack, you'll notice that all pictures regardless of size have the same cropping preview applied to them. If you absolutely must see the full version, you can click to download the full image.

Consistency is the key, in my opinion.

[nyoma-diamond]

Bumping this. looks like a bunch of other issues have been opened and then linked here but this issue seems kinda dead. For the sake of quality of life having this resolved would be really nice (and make the app feel a lot less clunky imo)

[DJCrashdummy]

given the fact that displays may be very different in size, how about an option to set it for every device differently by the user?

[lgrn]

If deciding the right size to display is hard or complex from a UI standpoint, maybe it would make sense to at least allow the user to resize the image before it's uploaded. Gmail used to do this in the past, or maybe it still does, when you pasted an image inline you could select from "Small, Medium, Large" depending on whether you wanted the pixel and byte-size to be smaller or not.

[DJCrashdummy]

@lgrn this issue is about the thumbnail, not the picture itself!
...if you are suggesting to make the sender to chose how big the thumbnail should be displayed, i'm strongly against it, because a reasonable display size strongly depends on every single user and his currently used device.

that would be like hardcoding a website to its mobile-view even if your visitor has a 8k-screen. - that makes no sense!

[lgrn]

I wasn't really suggesting that the thumbnail size should be user defined, rather that the user should get an optional choice to downscale the source image if they choose before it's uploaded. While I agree it's not a good solution to the issue of thumbnail size in general, my guess was just that it would perhaps be easier to implement and would give users a way to avoid pushing a huge image file in the meantime.

There are of course separate use cases regardless of thumbnail size where your source file may be unsuitably large to share in a chat, so my idea was just that it may be a nice feature that could partly alleviate this issue until a better responsive UI scaling of the thumbnail is available.

[DJCrashdummy]

[...] the user should get an optional choice to downscale the source image if they choose before it's uploaded.

at least in riot-android exactly this feature (you'll find it in the settings) is already implemented; you can chose between "ask", "original", "big", "medium" and "small".

but it seems that riot-web and riotx are missing such a feature... :open_mouth: and i have no idea about riot-ios! probably there are open issus regarding this topic, but if not, the best would be to open a separate new one.

[ara4n]

I think we should make this configurable in the new Appearance tab - it's something that comes up fairly regularly, and I don't think there's much point in being super opinionated about it.

[mcnesium]

As a workaround, I added the following snippet to my .mozilla/firefox/xxx-profile/chrome/userContent.css:

@-moz-document domain(app.element.io) {
    .mx_MImageBody_thumbnail_container {
        max-height: 300px !important;
        max-width: 300px !important;
    }
}

[konomikitten]

@mcnesium sorry to bother you but do you have any idea on how to add that fix to the electron desktop client?

[mcnesium]

@konomikitten as far as I know there is no such easy way to override the CSS of an electron app. See #7316 for a discussion about this