Round Images showing as Square

Hi- Having trouble with round images in my app. (experts.artkollecto.com)

When you first load the site the images appear correctly- as round.

After you log in, the images revert to square, even though, you can see the round border behind the image. Is there a way to avoid this?

Note- If I refresh my page again, the image goes round once more.

I think this is because you’re using ‘rescale’ at the image rendering. That won’t work well if you want a border and a round shape, in that case, it should be ‘resize’, but that might lead to weird stuff. What i’d recommend is to use the ‘processed with Imgix’ function (after the image expression) and use a mask there.

Darn. I tried resizing & the imgix circle mask & neither worked to fix the issue.

Well, i just checked experts.artkollecto.com, it seems fine no?

see what happens when you click the ‘login’ button/ ‘get started’ button.

you dont actually have to log in, but when you click the button I think you’ll see the issue.

I can see it now. It was a bug on our hand, pushing a fix now.

2 Likes

you’re amazing! Thanks

Should I be using a different method or something to turn these into PERFECT circles like @twr2105 has done?

I created a style called circle image and set roundness to 20 but it looks like this:

Use a bigger number, 20 means 20 pixels, your picture is definitely wider than that.

Where do I input this?

All I can select are selects under the drop down. 20 is the highest. Am I in the wrong setting?

You can type anything.

Got it now.

Now one of the images is OK but the other images are not the same original size i guess and still look bad.

Is there a different process i should be following to FIX the width regardless of the Source file size?

Further to the issue above, is there a way to allow the user to upload and then re-size/MOVE their profile image before saving it similar to what AIRBNB does centering it around the circle?

Nope we don’t support that.

No big deal.

But how do we get perfect circles for our images? If the file size is a rectangle vs. square it elongates the one side as per below.

What happens if you set the roundness to something ludicrous, like 1000?

1 Like

Making the image a perfect square, fixed width, and 360 roundness should do the trick.

1 Like

But if they are user uploaded images how can I adjust the size?

And interestingly enough even when I DO set it to 1000 Roundness it still looks the same:

Can anyone help here?

Still cannot get images to be perfectly round as they should be.

You need the images to be square, it seems like yours aren’t. What’s certain is that without a link no one can really help.

1 Like