# App Store onebox images are distorted
**URL:** https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567
**Category:** Bug
**Created:** [November 22, 2017, 7:46am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567 "2017-11-22T07:46:32Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 22, 2017, 7:46am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/1 "2017-11-22T07:46:32Z")
For example:
> **[MeasureKit - AR Ruler Tape App - App Store](https://apps.apple.com/us/app/measurekit-ar-ruler-tape/id1258270451)**
>
> Download MeasureKit - AR Ruler Tape by Rinat Khanov on the App Store. See screenshots, ratings and reviews, user tips, and more apps like MeasureKit - AR Ruler…
and
> **[Focos App - App Store](https://apps.apple.com/us/app/focos/id1274938524)**
>
> Download Focos by Mosaic S.r.l. on the App Store. See screenshots, ratings and reviews, user tips, and more apps like Focos.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 22, 2017, 7:47am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/2 "2017-11-22T07:47:04Z")
They initially look OK and then convert to distort-o-vision. Paging @sam since this looks related to your image sizing CSS magicks 🧙
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 22, 2017, 7:52am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/3 "2017-11-22T07:52:30Z")
Odd aspect ratio is reported as
–aspect-ratio:690/361
> **[MeasureKit - AR Ruler Tape App - App Store](https://apps.apple.com/us/app/measurekit-ar-ruler-tape/id1258270451)**
>
> Download MeasureKit - AR Ruler Tape by Rinat Khanov on the App Store. See screenshots, ratings and reviews, user tips, and more apps like MeasureKit - AR Ruler…
Image is: [https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/0e/07/fa/0e07fa97-5135-288e-abec-8355648a07c1/source/1200x630bb.jpg](https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/0e/07/fa/0e07fa97-5135-288e-abec-8355648a07c1/source/1200x630bb.jpg)
```plaintext
[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:
```plaintext
```
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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 22, 2017, 8:04am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/4 "2017-11-22T08:04:00Z")
Probably worth looking at Google Play as well in case it inherits this defect from its family.
Also this looks wrong too
[http://www.imdb.com/title/tt0105690/?ref\_=nv\_sr\_1](http://www.imdb.com/title/tt0105690/?ref_=nv_sr_1)
So this may be busted a bunch of places and they all need fixin’
---
### Author:  [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [November 22, 2017, 9:52am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/5 "2017-11-22T09:52:11Z")
The onebox is using the dimensions provided by the open graph tags
```plaintext
```
Which are incorrect… 😑
---
### Author:  [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [November 22, 2017, 10:10am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/6 "2017-11-22T10:10:18Z")
Generic Oneboxes will now no longer include open graph image size tags as per:
[https://github.com/discourse/onebox/commit/913c91ef304661b3a11decb1148383cf30bb213c](https://github.com/discourse/onebox/commit/913c91ef304661b3a11decb1148383cf30bb213c)
IMDb issue seems related to the image processing we are doing in [`CookedPostProcessor`](https://github.com/discourse/discourse/blob/9197feefb867fa1a028ae68b6ddc930119689600/lib/cooked_post_processor.rb#L203-L233).
---
### Author:  [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [November 22, 2017, 10:13am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/7 "2017-11-22T10:13:51Z")
I’ll have a look at the IMDb onebox.
---
### Author:  [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [November 22, 2017, 9:14pm UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/8 "2017-11-22T21:14:35Z")
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.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 23, 2017, 3:49am UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/10 "2017-11-23T03:49:45Z")
Well that was a nightmare:
This is fixed in latest due to this magic:
[https://github.com/discourse/discourse/commit/2fe131db9f0cc2e8f53a2d3334019466cd845968](https://github.com/discourse/discourse/commit/2fe131db9f0cc2e8f53a2d3334019466cd845968)
```css
--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 🛳
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 10, 2017, 10:43pm UTC](https://meta.discourse.org/t/app-store-onebox-images-are-distorted/74567/11 "2017-12-10T22:43:49Z")
```
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.
---
Probably worth looking at Google Play as well in case it inherits this defect from its family.
Also this looks wrong too
[http://www.imdb.com/title/tt0105690/?ref\_=nv\_sr\_1](http://www.imdb.com/title/tt0105690/?ref_=nv_sr_1)
So this may be busted a bunch of places and they all need fixin’
---
The onebox is using the dimensions provided by the open graph tags
```plaintext
```
Which are incorrect… 😑
---
Generic Oneboxes will now no longer include open graph image size tags as per:
[https://github.com/discourse/onebox/commit/913c91ef304661b3a11decb1148383cf30bb213c](https://github.com/discourse/onebox/commit/913c91ef304661b3a11decb1148383cf30bb213c)
IMDb issue seems related to the image processing we are doing in [`CookedPostProcessor`](https://github.com/discourse/discourse/blob/9197feefb867fa1a028ae68b6ddc930119689600/lib/cooked_post_processor.rb#L203-L233).
---
I’ll have a look at the IMDb onebox.
---
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.
---
Well that was a nightmare:
This is fixed in latest due to this magic:
[https://github.com/discourse/discourse/commit/2fe131db9f0cc2e8f53a2d3334019466cd845968](https://github.com/discourse/discourse/commit/2fe131db9f0cc2e8f53a2d3334019466cd845968)
```css
--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 🛳
---