App Store onebox images are distorted


(Jeff Atwood) #1

For example:

and


(Jeff Atwood) #2

They initially look OK and then convert to distort-o-vision. Paging @sam since this looks related to your image sizing CSS magicks :mage:


(Sam Saffron) #3

Odd aspect ratio is reported as

–aspect-ratio:690/361

Image is: https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/0e/07/fa/0e07fa97-5135-288e-abec-8355648a07c1/source/1200x630bb.jpg

[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='//discourse-meta.s3-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.


(Jeff Atwood) #4

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’


(RĂ©gis Hanol) #5

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… :expressionless:


(Arpit Jalan) #6

Generic Oneboxes will now no longer include open graph image size tags as per:

IMDb issue seems related to the image processing we are doing in CookedPostProcessor.


(RĂ©gis Hanol) #7

I’ll have a look at the IMDb onebox.


(RĂ©gis Hanol) #8

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 :sadpanda: My only solution would be to cook the proper dimensions server-side.


(Sam Saffron) #10

Well that was a nightmare:

This is fixed in latest due to this magic:

 --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 :passenger_ship:


(Sam Saffron) #11