Circular images

Hello, having trouble with round images in my app. The user will upload their profile image from their photo library. The image could really be any dimension & orientation.

I have my image set to 75px by 75px and border radius 90 (as per Mevi's Component Factory - Messaging App - part 1 - YouTube). This works nicely if the image I upload is square. If the image I upload is not square, bits are chopped off either on the sides of the circle (portrait image) or the top and bottom (landscape):

Any ideas how I can resolve this? I tried resizing it with the flow function and max height/width on upload but I couldn’t get it to work.

This might help

1 Like

Make sure the Image style is ‘Cover’ (not Contain)

1 Like

THANK YOU GUYS :heart:

I am an impatient twat who can’t watch entire videos I am so sorry

With looking at these videos, it doesn’t seem we can set the border radius any longer with the new theme editor. How do you go about creating a circular image?

Hi! You can set the border radius still, you just have to edit the style in the component style editor :slight_smile: See here.