preserve aspect ratio of images receive via JSON

[Roger6240907]

I am displaying a series of images in a grid filled by a JSON request. Images have different sizes and I would like to display them to occupy at most the space define by the Image component. How can this be done? The 'preserve ratio' checkbox fixes the size of the image component but does not preserve the ratio of the image that I want to show in its place.

[Illya Stepanov]

Hello Roger -- can you show an example of your request parameters and example of JSON response?

[Roger6240907]

This is an example of the JSON
[
{
"firstname":"name",
"lastname":"last",
"email":"a href="mailto:name@gmail.com" rel="nofollow"name@gmail.com/a",
"phonenumber":"1234567989",
"user_id":2,
"picurl":"1"
}
]

I load the pic with custom javascript:
return 'https://54.208.82.222:8080/pics/'+value;
inside the asset of my Image Component.

So the core of the question is that I don't know the shape of the image until I download it. You can see an example pic from https://54.208.82.222:8080/pics/1

As it is I can fill the grid and have all pics displayed, yet they do not have the ratio ratio.

[Maryna Brodina]

Hello! Could you also post a screenshot how it looks like now and explain in more how you'd like it to be?

[Roger6240907]

Here's an example where all the objects are circles so it is obvious when they are out of correct ratio. The left column shows the current behavior of the image component. The asset utilizes all the space available making circles look like elippsoids. On the right is what I expect to see with one additional feature (the images on the second column should be center horizontally and vertically.

With more details: let us choose an Image component of 100x100 of available space to show an image. If I link an image that is wider than taller (like the image with 2 circles) let us say of 100x200, then Appery should scale it so that the longer size will be 100 and, to keep the ratio fixed, the final size will be 50x100 (this is the correct visualization of the first image on the right column).
Same thing if the image is taller than wider like an image of 200x100, then to correctly visualize it, Appery needs to show it as 100x50. This is what it is shown on the bottom row.

[Kateryna Grynko]

Hi Roger,

You can add the following CSS style for these 4 images:
codemax-height: 100px;
max-width: 100px;/code

[Roger6240907]

Hi Katya,
Thank you for your help. I was able to add the CSS, but it does not work inside Appery since I have to add fixed dimensions inside the Image component. I cannot leave it empy and add the CSS.

Here you can see that if I only add CSS, no changes appear on the app:
a href="https://d2r1vs3d9006ap.cloudfront.net/s ... 1379960746[/img] /a

If I use Inspect and disable the fixed dimension of 100px then the max-heigth and max-width take control and I get the expected behavior. a href="https://d2r1vs3d9006ap.cloudfront.net/s ... 1379960857[/img] /a

The problem is that I cannot leave the dimension field empty inside Appery. I think there should be a checkbox to indicate if it is fixed or max dimension as default property of Image Component:
a href="https://d2r1vs3d9006ap.cloudfront.net/s ... 1379961044[/img] /a

Are there other ways to achieve this inside Appery?

Thanks,
Roger

[Roger6240907]

I found a hack that seems to work, not sure how reliable it is.

Add CSS:
code.Screen1_img{
max-height: 100px;
max-width: 100px;
}
/code

on page load run javascript:
code$(".Screen1_img").css("width", "auto");
$(".Screen1_img").css("height", "auto");
/code

the end result is correct even if Inspect crosses the original width/height:
a href="https://d2r1vs3d9006ap.cloudfront.net/s ... 1379963160[/img] /a

I believe a solution with max-width & max-height within Appery would be better . Thanks.

[Kateryna Grynko]

Hi Roger,

This is the correct solution.