Smart layout - Image overrides - aspect ratios getting stretched


I’m using Smart Layout and have a problem with image overrides when creating a card design component.

I’m trying to get the symbol to work with different aspect ratio images.
I wish the image width to be fixed, but the height to adjust depending on the overridden image. This is how the front-end build will work.

What is happening currently is the image provided in the override gets squashed and scaled to fit the size on the symbol image.

Please see the screenshot.
I’m stumped!

Is someone able to offer some advice for me please?

Hey Meza!

Good question and I think I have a solution for you here! :slight_smile:

Currently, it looks as though you’re importing a bitmap image which becomes a part of your Symbol, and you then override that.

To achieve what you are trying to achieve though, the key is to use an Image Fill.

I’ve included a video which I think better describes the process (and differences compared to overriding a bitmap image) which I hope will answer your question!

1 Like

Hi Keir, thanks for the suggestion and demo.

I have tried image fill, and it does stops the image from becoming distorted.

However the key bit I’m trying to solve, is to have the height of the image change. So I want the image width to be fixed, and the height to be relative to the aspect ratio.

If I override with a tall aspect ratio image - I want the image to increase in height for example.

If I use image fill, the image always stays the same size.

Hey @Meza

Do you mean something like this?

Hey jonne,

yes that’s pretty much what I’m looking for! How did you do that?

Although I notice on your example the image of the person in the hat looks like a small part of the image (left and right edge) is still getting cropped out.

In the example I adjusted in LAYOUT > vertical > Top to bottom for the Symbol of image fill that is overridden (see screenshot). If you then override the image in the instance, you’ll see that the hight gets adjusted.

In this case the image gets cropped, if you don’t use the image fill - instead just a symbol of the image - then the image will be stretched to fit the layout.

1 Like

We’re actively working on the feature and will also take this case into consideration, to see where we can improve it.