Auto-populating image with user's profile picture

Ask the community
, , ,
1

Question:
Hi! I am building a personalized site where I would love to construct the pages so that each page a user goes to, their profile picture is the one automatically shown in the center page. (See attached). So, fo

Screenshot 2024-11-09 at 5.03.10 PM
Screenshot 2024-11-09 at 5.03.10 PM1532×1234 115 KB

r example, the boy here (“John”) is shown to John as he navigates between the Learn, Live, and other pages; but if “Jenny” was visiting these pages, her own picture would be shown instead.

Product:
Wix Editor

What are you trying to achieve:
I want to do this to provide as personalized an experience as possible. It’s always lovely seeing your own face, rather than someone else’s!

What have you already tried:
I’m familiar with dynamic pages, but if I used dynamic pages I would need to manually change the images myself for every member, and on every set of dynamic pages, which would be impossible due to the time! I would like to find out if there is a code solution to make the page “auto-populate”, as mentioned, with the user’s profile photo.

Additional information:
Thank you! :slight_smile:

2

Hi, austinmdiamond !!

If you can use Velo code, you should be able to implement this by retrieving the currently logged-in user’s information after the page loads, then obtaining their profile image URL from that data, and applying the retrieved image URL to the image element on the page. :raised_hands:

3

Hi, I am just now seeing your reply!

Could you please describe more clearly/even provide the code, if you’re up for it! :slight_smile: of how exactly to do this?

What you’re describing sounds like exactly what I’m after, but I don’t know how to actually do it… :thinking:

4

bump! I am so close now, I can’t let this go!! :smiley: I will give whoever answers this the biggest virtual fist bump in the world :slight_smile:

5

There you go:

import { authentication, currentMember } from "wix-members-frontend";

$w.onReady(function () {

    const isLoggedIn = authentication.loggedIn();
    if (isLoggedIn) {
        fetchMemberData();
    } else {
        authentication
            .promptLogin({ mode: 'login', modal: false })
            .then(() => {
                fetchMemberData();
            })
            .catch((error) => {
                console.error(error);
            });
    }

});

function fetchMemberData() {

    currentMember
        .getMember({ fieldsets: ['FULL'] })
        .then((member) => {

            $w('#image1').src = member.profile.profilePhoto.url;

        })
        .catch((error) => {
            console.error(error);
        });

}

Just remember to change #image1 with the ID of your image element (:

6

Hi there, thanks for your help. It’s not working. Please see screenshot. When I run it, it says that there are errors, and this girl (who I just put as the placeholder image and called #memberimage) is supposed to be replaced by the logged-in user’s profile picture (a boy with goggles on, currently). :slight_smile:

Screenshot 2024-12-03 at 10.47.33 AM
Screenshot 2024-12-03 at 10.47.33 AM1920×1251 76.8 KB

7

Hey Austin, looks like you didn’t copy paste the whole code from my previous post.

Make sure the whole code is copied, there are a few more lines below Line 27.

8

Oh, you absolutely rock!!! :smiley:

Since you figured that out, would you happen to know the answer to this other question of mind regarding member blogging?

Thanks! :smiley: