This article will show you how to add an image upload button & image preview directly into Webflow.
If you're using the Memberstack profile modal this functionality is included automatically.
Getting Started
The fastest way to get started is to copy an Unstyled Profile Image Component directly into your project. Avoid placing it inside of another Memberstack form.
The component picture above requires two attributes to function:
- An attribute to display member's profile image:
data-ms-member="profile-image". - An attribute launch the upload UI:
data-ms-action="profile-image". The image is saved automatically on upload. No need for a save or confirm button 🎉
DOM package
If you are looking to see if a member has a profile image using the DOM package you can use the following code as a starting point:
window.$memberstackDom.getCurrentMember().then((member) => {
if (member.data) {
if (member.data['profileImage']) {
console.log('Member has a profile image');
// Do something if the member has a profile image
} else {
console.log('Member does not have a profile image');
// Do something if the member does not have a profile image
}
} else {
console.log('No member data');
// Do something if there is no member data (member is logged out)
}
});Notes
- Despite the name, Profile Images cannot go inside of a profile form. They can go anywhere on your site, except inside of a profile form.
- This feature only works with
<image>elements. It does not support CSS background images. - Each member can have one profile image.
- The default image you upload in the Webflow designer is the default image members will see until they upload a profile image of their own. (Side note: You can change the background color of the profile image in the unstyled component linked above.)
- This feature works on all Memberstack and Webflow plans. Does not require Webflow business hosting.
Comments
8 comments
Hey, how can I implement the data attribute in the image element? like custom code image element?
Is there a way for a member to delete the profile image? Suppose they just want to reset the image back to the default - blank/placeholder - how can they do that? How can we do that from within the dashboard?
Goosetlk null Your code will look something like this:
John Matias It's not possible to remove or reset a profile image. The member will need to upload another image instead. If that's not a valid solution, please let me know 👍
Is there a way to sync the profile photo between Circle and Memberstack? Even a one-way flow would be okay.
trying to display profile images in a collection list (think an explore page or directory) does the same method above apply?
Eddi Gonzales the profile image attribute only works for the logged in member. Memberstack doesn't offer native support for public profiles yet.
(If you're asking yourself "Then what's the point of profile pictures" we honestly wondered the same thing 🤣 But there was enough demand for the feature even without public accounts, so we went ahead and implemented it as is.)
Is it possible to use this attribute for a different type of data? For instance, I would like to offer users the ability to upload their resume in PDF format. Can this attribute be utilized for that purpose?
Hi Shamil Dibirov 👋 I'm afraid that's not possible yet. We do hope to extend this feature in that direction at some point in the future though.
Please sign in to leave a comment.