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... 😮 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.

[Trendyne]

The fact a single image covered the entire chat made me very often just not post them because it would cover everything. It's horrible design. I get that you guys want to be bureaucratic about everything even if it's pretty obvious, so this will take forever, but for anyone else that wants to fix this in their own instance:

body .mx_MImageBody_thumbnail_container{
	max-height: 300px !important;
	display: flex !important;
}
body .mx_MImageBody_thumbnail_container > :first-child{
	display: none !important;
}
body .mx_MImageBody_thumbnail_container img{
	position: relative !important;
	max-width: 100% !important;
	width: auto !important;
	max-height: 100% !important;
}

[trosel]

I get that you guys want to be bureaucratic about everything even if it's pretty obvious, so this will take forever

Is there really no single product manager or designer? where is the vision coming from? who is steering the ship here?

[Trendyne]

I get that you guys want to be bureaucratic about everything even if it's pretty obvious, so this will take forever

Is there really no single product manager or designer? where is the vision coming from? who is steering the ship here?

No, not really.

The Matrix.org Foundation | Matrix.org

The evolution of Matrix is managed through an open governance process, looked after by The Matrix.org Foundation - a non-profit UK Community Interest Company, incorporated to act as the neutral guardian of the standard on behalf of the whole Matrix community.
The Foundation defines the manifesto, mission and values of the project, the open governance process that determines how the specification develops, and provides a safety-net to ensure the project stays independent and true to its goals. The constitution of the project is defined in the Foundation’s legal Articles of Association and Rules, and is enforced by the Guardians of Matrix: the directors of the Foundation appointed to provide a balance of independent experts and the founding Matrix team to ensure the project stays on track.

[t3chguy]

Right, that's for the protocol, not for Element which is owned by New Vector Ltd T/A Element. Element has a Design team and a Product team, they're the ones who decided the larger timeline thumbnails in the first place.

[ShadowJonathan]

Please keep in mind that - while this process seems very bureaucratic - its "slow" effects are only made apparent because the design and product teams are absolutely swamped with work, and bigger fish to fry (threads, voip, etc. those are the things that keep Element alive). There are some here which do indeed work hard on the small UX stuff in their free time (:heart: @SimonBrandner) but eventually everything would have to go through the design and product teams for approval.

Imagine this, what if there werent teams checking on the look of the app, and everything could just make it through like this? That was Element a few years ago, and this is a move to better organisation and less chaos, shame it's overloaded at the moment, I only hope that'll get better as the load lessens and issues like these can be pulled straight, the best contributors can try to do then is to give as less work to review as possible, and get someone to put it into the review queue.

[trosel]

for anyone else that wants to fix this in their own instance:

body .mx_MImageBody_thumbnail_container{
	max-height: 300px !important;
	display: flex !important;
}
body .mx_MImageBody_thumbnail_container > :first-child{
	display: none !important;
}
body .mx_MImageBody_thumbnail_container img{
	position: relative !important;
	max-width: 100% !important;
	width: auto !important;
	max-height: 100% !important;
}

@Trendyne Can you just submit a PR with this added?

[SimonBrandner]

@trosel, there is no point in doing that. There already are PRs to fix this, see #1520 (comment)