Ask Reuben 45 - Rounded Image

Started by Reuben B., September 04, 2020, 03:01:09 AM

Previous topic - Next topic

Reuben B.

The solution of how to create a rounded image is a good one to demonstrate the benefits of the customisation feature of  Universal Rendering.  If you look to achieve this using our Native User Interface front-end, you won't see an Image attribute or Presentation Style that controls this.  However Web Interfaces have a very simple CSS style that achieves this and Universal Rendering can use this same CSS style via customisation.

The CSS that achieves this is to use the CSS border-radius property.   Normally this is set to a small value such as 10% to create the effect of a rectangle with rounded corners.  However if you set this to 50% then the rounded corners meet in the middle to effectively make a circle.

Using customisation, you can apply this to your Universal Rendering interface and choose to render selected images as Rounded Images.

Read more at https://4js.com/ask-reuben/ig-45/
Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero