Jump to content

Automatically Format Profile Picture

Recommended Posts

In my application, each user has a profile which they can access / edit.  Their placeholder profile image is an avatar and then they can edit/add a profile picture.   Their profile image will appear in various places/pages on the app including the header menu, notes, and in their profile page. 

Query:  I would like their picture to be automatically formatted to center, be circular in shape and add a border. 

I submitted a support ticket and the Caspio support agent pointed me to the forums for solutions.  

Many thanks.  



Link to comment
Share on other sites

  • 1 month later...

Hi @rrushton,

If you want it to be saved in the table, I think it wouldn't automatically be formatted to circular in shape and with a border. However, if you want it to be displayed in circular shape and with border, you could try this:

Insert an HTML Block and unchecked the "Enabled HTML editor"

Insert this code: 

<meta name="viewport" content="width=device-width, initial-scale=1">
img {
  border-radius: 50%;
  border:10px solid black;

<h2>Rounded Images</h2>

<img src="[@field:File_name/]" style="width:200px">


Here is the output:



I hope this helps!


Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...