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.  

headermenu.JPG

profilepicture.JPG

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: 

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

<h2>Rounded Images</h2>

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

</body>
</html>


Here is the output:

image.png.2de91b2409fc2a86d62f45207ed28632.png

 

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.

Guest
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.

Loading...
×
×
  • Create New...