Constrain image heights in feeds and threads #5129
Conversation
|
Your Render PR Server URL is https://social-app-pr-5129.onrender.com. Follow its progress at https://dashboard.render.com/web/srv-crbru2bgbbvc73c9rj2g. |
|
| <PostEmbeds | ||
| embed={post.embed} | ||
| moderation={moderation} | ||
| contextView="thread-highlighted" |
There was a problem hiding this comment.
Leaving this open ended in case we want to add additional cases
| onPressIn?: () => void | ||
| style?: StyleProp<ViewStyle> | ||
| children?: React.ReactNode | ||
| export function useImageAspectRatio({ |
There was a problem hiding this comment.
Just abstracted this to a hook
|
A pet peeve of mine is when cropped images offer no visual indication that they've been cropped. Depending on the actual image content, it can be non-obvious that there's missing information that must be clicked to be seen. Here's a mockup of an idea I had, setting a 4px coloured border on the top and bottom:
(the image in the mockup isn't actually cropped, just imagine it's taller heh) |
|
Is it not doable to scale it down instead? I suppose in React Native this would mean having to do a layout measurement but it's also something that only have to be done once (shared to all post component instances within a context) I'd expect it to crop at more extreme aspect ratios, like where it isn't possible to display in its entirety with the minimum height/width constraint of ~32/128px |
|
@mary-ext you thinking like this? Totally doable to allow smaller sizes, but starts to look kinda awkward aesthetically in a feed of posts. The 3:4 (portrait) minimum was chosen specifically to fit the most common photo size, though I think some Androids ship with 16:9 (or 9:16 portrait) by default.
|
|
@DavidBuchanan314 that's a fun idea, will play with it! |
|
I've just been trying this out on the preview branch and it works really well, great job! :) I especially like the little crop icon shown on solo cropped images. I did notice one strange glitch: this quote post in Following had a strangely rendered link card in the quoted post:
It also shows up like this when scrolling through posts on the user's profile. However, the link card shows up fine when viewing the post by itself. |
|
Also, the interaction with the content hider in this quote post is not great:
|
|
@surfdude29 ah thanks for the QA! Actually working on this issue right now 👍 |
|
@estrattonbailey Oh awesome 👌 |
|
https://bsky.app/profile/tanza.me/post/3l3fn5yc5fw2n
|
|
also, how's the thoughts on centering it when it's too tall and having a backdrop? kinda like how tall images display on anthera
|
|
@Tanza3D thanks for the QA help! Ah yes, I see that in Firefox. Will have a look! |
|
I'm a fan of the crop icon, definitely solves my "invisible cropping" gripe |
|
@DavidBuchanan314 thanks for the suggestion! We're gonna leave it off multi-image posts for now since it gets kinda aesthetically busy, but it'll appear on single-image posts if they're cropped 👍 |
|
Makes sense, when I see a multi-image post my default assumption is that they're cropped |
|
This post is broken on FF https://social-app-pr-5129.onrender.com/profile/test.esb.lol/post/3l3drrpiyyx2l 
|
|
Yep yep should be fixed in latest comment, just hasn't deployed on Render yet 👍 |
Constrains the height of images in feeds and threads.
To do
Cases
Too tall, crops to min-sized container
Same in quotes
Quotes with media appear slightly differently
Image shorter than 1:1 appears as it's normal crop
Very wide images display in full (TBD if we want this)
All images now have a background, so that while loading there's something to take up space
Works in DMs too
