Hi All,



I am using Outsystems default template for showing user profile, shown below.


I can update the picture.

Since the image is in circular format i have used following css to achieve this.

img.img-circle {
    border-radius: 50%;
}

But for certain image resolutions, the image uploaded gets scattered, as shown below.

Can anyone tell me how can i achieve this, so that it can handle any resolution of images.


Thanks,

DM

Hi Dhiraj,


Would t be possible to share oml for this screen only,So that we can look into it

Hi Dhiraj,

If you want to restrict the image size on your site, without your application resizing the image to an optimal size, then you can use the CSS properties width and height. Set them to the same value of your choice.

Btw. in OutSystems UI the CSS for circle image is alraedy available

img.img-circle {
    border-radius: var(--border-radius-circle);

}

So you do not have to add that yourself. 

Regards,

Daniel

Hi,


I want following kind of implementation, can anyone suggest?

Thanks,

DM

Hi Dhiraj,

Ok what you described in your last post, I could not derive from your original post.

So you want the user to be able to crop the picture and then save it.

I would like to suggest to have a look at the following mobile plugin:

https://www.outsystems.com/forge/component-overview/5000/cordova-crop-plugin

which has also a sample application on how to use it:

https://www.outsystems.com/forge/component-overview/5001/cordova-crop-plugin-sample

Regards,

Daniel