Show Profile Photo on Profile Page

Hey all!

So, I have a Webflow CMS running website. Using Memberstack for member signup/sign in.

With the use of Uploadcare I’m also allowing members to upload their photo (it’s required in our website, actually). And with the use of Zapier, I connected Memberstack with Webflow CMS. My clients wants to have the main focus on the data of members inside the Webflow CMS, without the need to constantly switch from Webflow’s backend to Memberstack’s backend.

That all is working fine! However. Now, I hope someone knows the trick on how to show the profile photo for each member on it’s profile page AND make it editable at the same time (using uploadcare again). I can’t figure this out.

Please help :grin:

1 Like

Hi Rowan!

Are you saving the uploadcare image link to the member, or directly in the webflow CMS item?

If you’re storing the image link to the member here are my initial thoughts…

You could use our ms-update="profile" attribute to create a profile update form inside webflow. Inside that form you could add upload care. That way, if the user uploads a new image, the uploadcare image link will get updated in the member. After this, I am assuming you’re using the member update trigger inside Zapier where you could then update the image link in the CMS.

2 Likes

Just created a shorter, more simple video that explains how everything fits together. Hopefully this connects a few dots. I’m using Webflow’s image upload feature, but you can use Uploadcare in the same way.

4 Likes

Thanks, that definitely helps!

BUT. The biggest question remains… How can I show the correct uploaded image for each member on their profile page?

So, just like I can show a headline saying “Welcome back, Tyler!”. Next to that, I want to have the image they uploaded. So in my case, I have various pages for the user dashboard:

  • Main dashboard page
  • Edit my contact info
  • Edit my education info
  • Edit my profile

On all pages I want to show the name of the user + the image of their profile. But howwwwww :crazy_face:

1 Like

I think I get it now. Zapier actually sucesfully sends the image url to the Memberstack member data. That means I could potentially use Memberstack’s custom attribute for that image field to show the correct image for each member.

But I would need a piece of custom code for that I imagine. Anyone dare to help me write that piece of code if the custom attribute has a value of “image”? :pleading_face:

1 Like

Good news! You can give your image (in Webflow) an ms-data attribute and it will start working automagically :partying_face:

Are you also sending the image off to Webflow as well? If your zaps start to give you trouble, let me know. I’ve been playing around with this for the last few days and I’m still working out the kinks.

2 Likes

Damn!? What a rookie I am :D. This will make things very easy now.

THANKS!!

1 Like

Nahh man! This attribute is brand new :grin: I’m going to add it to our support docs now! I don’t think we mention it anywhere.

2 Likes

I’m having trouble passing along the member-id through the webflow form submission. I’m having the member do a multistep sign-up and one of the steps is uploading a profile picture. It seems in zapier is not displaying any data from step 1 for me to be able to reference in the google sheet look up. And I assume the ms-data “profile-update” can’t pass along the webflow image url otherwise I could just zap that into the webflow cms.

Any help here would be much appreciated.

  • Josh
1 Like

Hi Josh, you’re exactly right about the Webflow image. You’ll need to use a regular Webflow form + Zapier for that. The image has to hit Webflow’s servers before a link is generated.

Is the member-id still giving you problems? Adding ms-data=“id” to a hidden field should be enough to pull a user’s id into a form submission. However another user was having some trouble with this too.

Hey Duncan! I finally got this to work with your quick video tutorial :smiling_face_with_three_hearts:

This means Images updates well on my new created dashboard in webflow.

But for part two, zapier seems to be well integrated but…

2 issues:

1// I don’t have my placeholders replaced with my actual credentials on that new dashboard
2// and when I update my information on same dashboard it does not sync with google sheet and webflow.

So something is missing, what can be the problem here?

Thanks!