App Store onebox images are distorted

(Jeff Atwood) #1

For example:


(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


Image is:

[1] pry(main)> FastImage.size('')

=> [630, 630]

Looking at the HTML onebox generates:

<img src='//' 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