Chat previews now expanded with aspect ratio#4469
Conversation
Instead of cropping the previews in the conversation to a square, they are now using a limited height but their width is computed based on aspect ratio. This is done by passing different arguments to the previews endpoint so it delivers a preview with the matching size. Adjusted styles around the preview to make it look better. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
|
I'm fine with this, but this is up to @jancborchardt's call :) |
|
|
||
| .loading { | ||
| display: inline-block; | ||
| height: 128px; |
There was a problem hiding this comment.
I think we once also discussed to use more height, e.g. 300? cc @jancborchardt
But not sure what the endpoint does if the image is actually smalled?
There was a problem hiding this comment.
I can check with it. otherwise there's a "mode=fill" option which I'm not sure what it does, might fit
There was a problem hiding this comment.
I've tested with a picture of 50x50 and the preview provider doesn't make it bigger.
However the image tag will scale it up, so it will have the same height as the other pictures:
There was a problem hiding this comment.
okay I found the ticket with the decision to make it 384px: #3746 (comment)
I'll adjust
There was a problem hiding this comment.
with new height:
and for a wide image:
Was 128, expanded to 384 so it can fill a bit more width as well and look better. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
Center the spinner as it looks better overall, except for when the picture is narrow in the end. But we can't detect the image size beforehand, so this will do for most use cases. Signed-off-by: Vincent Petry <vincent@nextcloud.com>
|
closing in favor of #4472 which improves the same code further (and I'd like to avoid conflicts) |
3 participants
Instead of cropping the previews in the conversation to a square, they
are now using a limited height but their width is computed based on
aspect ratio. This is done by passing different arguments to the
previews endpoint so it delivers a preview with the matching size.
Adjusted styles around the preview to make it look better.
Fixes #3746
This was mentionned in #1805 (comment)
Manual Tests