Run-mode rendering

[hacker]

Hi,

I have an app where users upload profiile pictures that have more height than width. Like this one:

And in a square image element with 100 rounded borders and “Rescale” run-mode rendering, this image looks like this:

But I would like it to look like this:

How can I make this possible?

Thanks in advance

[lantzgould]

Try setting the border roundness to 360

[johnny]

I would even go for 9999999 roundness

[sudsy]

@hacker

How can I make this possible?

I think the image will need to have a square aspect ratio in order for the rounded-border result to be a circle. Thus, it will either need to be cropped, or if you can somehow position it within a square container and then round the borders on the container, it might work. I haven’t tried the latter, so you might have to tinker.

[hacker]

Thanks, @lantzgould and @johnny,

But the problem I think is not the roundness, it´s the aspect ratio, as @sudsy says.

@sudsy, what do you mean with:

@sudsy

position it within a square container and then round the borders on the container

Thanks again

[sudsy]

You could do the following, but it’s not going to behave the way you want / expect. The group will not maintain aspect ratio for different viewport widths.

Imgix would be great for this; it can even recognize faces and crop so that the face is centered. However, Bubble doesn’t officially support Imgix URL tinkering with its native integration, so you’d be better off getting your own Imgix account.

[sudsy]

@sudsy

Bubble doesn’t officially support Imgix URL tinkering with its native integration, so you’d be better off getting your own Imgix account.

But I forgot that there is a built-in circle and face cropping option. Check out :processed with Imgix in the expression builder. Definitely worth experimenting with that first.

[hacker]

Great, thanks, @sudsy.