Keeping the aspect ratio of an image in a dynamic list

UI Builder
1

Hello,

my app puts images uploaded by the user into a Dynamic List. Utilizing the Image object the images are all the same size in the list. However, depending if the original image portrait or landscape the aspect ratio is distorted.

? is there a way keep the aspect ratio similar to the auto, cover, contain of a background image?

? or, is there a way to dynamically assign a background image for example to a Block object in Dynamic list?

Or, is there another way to handle this?

Thanks

2

Hi @Joerg

What UI components do you use to display the list with images?

3

or, is there a way to dynamically assign a background image for example to a Block object in Dynamic list?

Select Block, expand Background tab, there will be image option.

4

The structure is

  • Container
    • Row - which is the dynamic list
      • Cell - which is the dynamic list item
        • Block - to define the border radius
          • Image - to contain the image by setting the width to 100% and the Max height to 150 px
          • Text - to display the name of the item
5

Thanks, Maksym,

can the background image be changed programmatically from within a dynamic list?

Thanks

6

You can define the logic to load the necessary images into dynamic list.
Here is a good tutorial from Mark:

If you want to be able to change any image in the list, you can save the images to the database, then load it to the dynamic list. And when necessary, you can update the database entry and reload the list.

Best Regards,
Maksym

8

Do you mean that all images are the same size but they are “squashed”?

9

Yes, @Maksym_Khobotin

in the video the images have different sizes depending of the underlying file. By setting the image size to 100% width and 150 px height all the images in my list are the same size, however they are squashed or stretched.

Is there a remedy for that?

Thanks

10

Hi, @Joerg

I believe the issue is in width, try to change width to the desired pixel size and height change to auto, as in Mark`s video.

Regards,
Marina

11

Thanks, @Marina.Kan,

that takes care of the aspect ratio but then the pictures have all different heights (like in Mark’s video).

Guess what I am looking for is a result like the Size - Cover option for a background image.

Any ideas how to accomplish that?

Or, can the background image of a Block be set programmatically?

Or, can an image be created/saved with the desired dimensions programmatically? Since it is an image uploaded by the user I don’t have any control over die size.

Thanks

12

@Joerg, we can offer you the solution below:

  1. Add block component;
  2. Add to it fixed dimensions which you need, es example 150 x 150 px;
  3. Add an image inside this block;
  4. Set the image at least one property, for example min-height:1px (This step is temporary, but for now we need it. There is problem on this issue, our engineers are looking for it)
  5. Add this logic to your image component (make sure, that the image itself does not have width/height styles).
    image

Regards,
Marina

13

@Marina.Kan : Thanks for this hint. I would wish, this feature becomes part of the image component configuration, because this is used very often.
One more question: The actual standard name of this property is “object-fit” (see e.g., object-fit - CSS | MDN). Using this identifier works similar well as when using your camelCase notation. Are you translating any standard css property to camelCase?
Thx

14

JS engine gives possibility to use a notation - object[“some-property”] or object[“someProperty”]
And two way of setting property work similarly in this case.

Regards, Dima.