For example:
and
3 Likes
They initially look OK and then convert to distort-o-vision. Paging @sam since this looks related to your image sizing CSS magicks 
Odd aspect ratio is reported as
–aspect-ratio:690/361
[1] pry(main)> FastImage.size('https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/0e/07/fa/0e07fa97-5135-288e-abec-8355648a07c1/source/1200x630bb.jpg')
=> [630, 630]
Looking at the HTML onebox generates:
<img src='//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/4/3/43b940ab0b073922858cc50202a682bccb561534.jpg' width="695" height="364" class="thumbnail size-resolved onebox-avatar">
So somehow onebox here is adding nonsense sizes which throw us off later on.
@techAPJ can you look at app store onebox and fix onebox library to stop reporting sizes there.
4 Likes
Probably worth looking at Google Play as well in case it inherits this defect from its family.
Also this looks wrong too
So this may be busted a bunch of places and they all need fixin’
2 Likes
The onebox is using the dimensions provided by the open graph tags
<meta content="1200" property="og:image:width" />
<meta content="630" property="og:image:height" />
Which are incorrect… 
3 Likes
Generic Oneboxes will now no longer include open graph image size tags as per:
https://github.com/discourse/onebox/commit/913c91ef304661b3a11decb1148383cf30bb213c
IMDb issue seems related to the image processing we are doing in CookedPostProcessor.
4 Likes
I’ll have a look at the IMDb onebox.
4 Likes
Actually the IMDb issue is not related to the CookedPostProcessor but rather @sam’s magic aspect ratio code.
Seems like it’s not working as the padding-bottom of the ::before pseudo-element is indeed respecting the aspect ratio but not the max-height: 170px.
@sam do you think you can fix it via CSS? I can’t figure it out 
My only solution would be to cook the proper dimensions server-side.
2 Likes
Well that was a nightmare:
This is fixed in latest due to this magic:
https://github.com/discourse/discourse/commit/2fe131db9f0cc2e8f53a2d3334019466cd845968
--magic-ratio: calc(var(--aspect-ratio) + 0.15);
width: calc(128px * var(--magic-ratio));
If an image is tall we go and take the widest possible onebox image we allow which is 128px and then multiply it by aspect + 0.15.
This works cause now we have 2 widths set, the max-width and the explicit one.
Very very complicated to come up with this hack, it works fine 
8 Likes