[issue]the asset preview img size looks weird.

[sync-by-unito]

User story
As a Capture App user, I want see the normal size of preview photo so that I don't have the concern of my asset.

I think the solution could be

1. maybe could crop preview size
2. let user could press the img & display the original size for captures.

┆Issue is synchronized with this Asana task by Unito
┆Created By: Kenny Hung

[sync-by-unito]

➤ Ethan Wu commented:

Scott Yan can you share some examples with me. also share the product ids. thanks!

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu
in asset page.

[sync-by-unito]

➤ Kenny Hung commented:

In prod page.

[sync-by-unito]

➤ Scott Yan commented:

Ethan Wu
account : tps15201@zwoho.com ( mailto:tps15201@zwoho.com ) password : DM
cid : bafybeic3vm36cpimhfvydfrzvk3xpoln4qsrzseimat6h76fvofksk3fne
original image: https://dia-cdn.numbersprotocol.io/files/2022/08/17/03/14/39/omLZm8nrQgFrqpC7se9U_proof.jpg?Expires=1660965606&Signature=DHtpSMVWeqUXjpPH69dt1gLI4TwgUFsNKtDh9KczDhbl02mlSNQXNaUXBbMJ4NZF8L~dFUBOTIXLr4eNMlzfnI77THYgdjDYdXirJ6rNok3XoATTToOyCeAZGuBgio8W1Cx0SPXjv8~AtZsu3hMBC3ozCAu6Sv6wesuCxgsd~aId5jDIHbLTz3AJTGWdu2UhYBPciWBZxzGUo3Eblu45wltcA0iO77cjoDu84NFck2KJd0kvQGswNpoLtnzPvWEkb4UKr-0ARNk2hM5Bo~OtRxLcUjN1s9Tbz8ZMQad0ynFjg0yLkcacZ5DTZK~K9RO1Bsyz-rwNJC7HUGHPVw7Y1A__&Key-Pair-Id=KBYPQEH39GYAO ( https://dia-cdn.numbersprotocol.io/files/2022/08/17/03/14/39/omLZm8nrQgFrqpC7se9U_proof.jpg?Expires=1660965606&Signature=DHtpSMVWeqUXjpPH69dt1gLI4TwgUFsNKtDh9KczDhbl02mlSNQXNaUXBbMJ4NZF8L~dFUBOTIXLr4eNMlzfnI77THYgdjDYdXirJ6rNok3XoATTToOyCeAZGuBgio8W1Cx0SPXjv8~AtZsu3hMBC3ozCAu6Sv6wesuCxgsd~aId5jDIHbLTz3AJTGWdu2UhYBPciWBZxzGUo3Eblu45wltcA0iO77cjoDu84NFck2KJd0kvQGswNpoLtnzPvWEkb4UKr-0ARNk2hM5Bo~OtRxLcUjN1s9Tbz8ZMQad0ynFjg0yLkcacZ5DTZK~K9RO1Bsyz-rwNJC7HUGHPVw7Y1A__&Key-Pair-Id=KBYPQEH39GYAO )

[sync-by-unito]

➤ Ethan Wu commented:

ok what i can do is can change the settings in asset / product pages to maintain the aspect ratio.

[sync-by-unito]

➤ Ethan Wu commented:

this is what maintain aspect ratio of image looks like. Scott Yan let me know if this looks better

Kenny Hung let me know what you think

[sync-by-unito]

➤ Scott Yan commented:

it's look better than now ( v 0.63.1 )

[sync-by-unito]

➤ Ethan Wu commented:

ok so i'll set it so that the images on asset and product page will maintain aspect ratio.

[sync-by-unito]

➤ Kenny Hung commented:

wait~
if the picture is vertical？

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung so bubble supports the following runtime rendering: rescale & stretch.

Maintaining the aspect ratio we have the following.

(Left) Rescale (Middle) Stretch (Right) Original Image

[sync-by-unito]

➤ Kenny Hung commented:

The rescale looks better.
👍 Ethan Wu

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung the issue is the edges are cropped. let me see what I can do

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung rescale horizontal images don't look good. plus the edges are not rounded like in the original design.

[sync-by-unito]

➤ Ethan Wu commented:

I did some reading and it looks like standard phone aspect rations are either 1:1 to 4:5. I've set the aspect ration to 4:5 and adjusted the runtime rendering to stretch (since its better to fill the space rather than have dead space). this is what a vertical and horizontal image looks like. let me know what you think.

Kenny HungScott Yan

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu I think this ( https://app.asana.com/0/0/1202789809053002/1202811344860460/f ) is looks better than fill space.
but maybe it's okay, and we could let user press the img and display the original img?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung img preview implementation

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung just realized that the "press img and display the original image" function won't work well for asset-page because the back button is leveraged with ionic.

if that's the case maybe its better to just do "rescale" runtime rendering?

what your thoughts?

[sync-by-unito]

➤ Kenny Hung commented:

I think this part is okay, because I think we could use other ways let user see the original img.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung so just to clarify let us set the image preview to

1. rescale and have the empty space
2. set to stretch

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu
#1 is like this Screen Shot 2022-08-17 at 1.12.56 PM.png ( https://app.asana.com/app/asana/-/get_asset?asset_id=1202811344860459 )
#2 is like this Screen Shot 2022-08-17 at 1.26.11 PM.png ( https://app.asana.com/app/asana/-/get_asset?asset_id=1202811344860463 ) & Screen Shot 2022-08-17 at 1.26.25 PM.png ( https://app.asana.com/app/asana/-/get_asset?asset_id=1202811344860465 )
right?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung correct

[sync-by-unito]

➤ Kenny Hung commented:

Ethan WuTammy Yang
About preview img display

1. rescale and have the empty space, example ( https://app.asana.com/app/asana/-/get_asset?asset_id=1202811344860459 )
2. set to stretch, example ( https://app.asana.com/app/asana/-/get_asset?asset_id=1202811344860463 )

I prefer #1. Although there is some space, the preview is more like the original.

[sync-by-unito]

➤ Ethan Wu commented:

I have submitted a code review with:

• runtime rendering: rescale

[sync-by-unito]

➤ Kenny Hung commented:

on 0.64.2, qa passed.