On this Craft Cms lesson we review the user profile syntax and apply it to our own template.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right guys. So for the account or profile settings, what we want to do is create a layout on webflow. In this case, I've already done that with a couple of simple alerts in case we get an error, we want to have some basic field labels so we identify this account or user. Here we have the avatar image.
So you'll notice that we're recycling the component that we've already created for the actors. So I exported this code already and we can open it up. I've cleaned things up, I'm using now the extension of layout. And I am just gonna focus on the section of the account, which is the code that got exported from webflow.
So the first thing here, what it's doing is we're creating a variable to set the user. If there's existing values. So, for example, if I've saved this profile is going to pull that information from the current user or session that is currently happening. We're going to see this in a little bit down on another field.
Then we have the macro against the same idea we looked at the signup. So we're going to output an error field using the class that we have created in webflow. We have the token, the action to save the user, grabbing the user ID, and you can see that over here, we have a customized option and we can toggle open the ID and simply by doing that, we can access the user's ID number.
And then finally, just the redirection. So here I've already created a redirect to an account. So whenever a user access to the account is going to take them to the profile template. So if there are any errors, we're going to display an output that through this tag, and now let's take a look at some of the other fields.
So notice here now I have the first name, last name, then we have a self macro so these is outputting any errors that are found through first name and last name. Why would we need to have this? Well, if we have first name and last name as a required option, then if the user does not enter it, when they click submit, then the error will show.
So that's why it's important to have this little macro up here every time. And make sure that the variable that's inside of that macro aligns with the name of that field as well. First name, email address. We've seen this before. The difference here now is that it's going to have us an option to show if a user changes their email address during the time that they have the account.
Then anytime they changed the address, we need to send them a new verification email. And this is what this is for. So if there's a new email updated, then they will see this error message that says, well it's not an error message, it's more like an alert saying, Hey your email address needs to be verified. That's pretty much it.
Everything else is pretty much the same. And if we go over to the avatar right away, we see that the preview thumb has a conditional that says if the user photo exists, then output, the user photos URL,so is pulling the URL of that photo. Okay. Then we have the preview meta, so that's inside the card.
We have the full name, which is another way to pull in both first and last name together. So I think that's very handy. We see here the first and last name, the username.
All right, so this is looking good. So for the profile photo, what we want to do is create a conditional. So the conditional goes like this.
If the photo of the user exists, then we want to have a checkbox or a button that deletes that photo from the server before they can upload another one. If the photo doesn't exist, then you can have the user upload the photo. And craft gets us this really neat code, which just basically creates an input field.
So similar to this and what the input field does. It's just the type of checkbox and it adds the name value of delete photo. If we were to open this up in the inspector, we could see that the check box has the ID delete photo, the name, and then just the value, which I believe it's a boolean one or zero, which is true or false.
That's pretty much it. And for the upload, it's the same idea. And then we have some parameters in there for like photo and the type of images that it will accept. Notice that there's no file images. That's why we want to keep it secure and only stick to image formats. When you add any file uploading, you want to make sure that you go to the form field.
The very first one. And you make sure that you have the encryption type to have multi-part form data. I had a lot of issues because it wasn't working and I didn't understand why. And it was because I was copying the form, sign up field from a different. Template. And I didn't catch that this was added in the template that prev provides.
Let's make a quick test and upload a photo click update. And as soon as I do that, it's going to refresh an upload, the photo. In its place. So if we open up our Craft, we can see that assets now has our admin photo or our admin sub folder, and the photo that we just uploaded along with a conditional that if the photo exists, then you can just select this and delete it when you click update.
Now, depending on what you're building, you might want to have custom fields and the way you do that is by simply going over back to the settings on the users and then fields.
Go ahead and create a new tab, and then let's call this tab meta. We can simply drag and drop the field biography. I can just save that. And now if I want to access that through the front end, We can duplicate one of our fields, change the field label,in this case, I don't want this to be a text field. Instead, what we want to do is make this a text area and it's really important that you add in the correct name here. So as you know, the text areas behave with an opening and closing because it's a custom field, they don't use the normal or traditional way of just adding biography.
The way it's done it's through a sub named or a prefixed called fields. And then we would input the name of that custom field. So in this case, biography, let's make sure we change this to biography. Now, of course we want to have have a class so that the biography looks and extends 100%.
Now, biography, because we have added that into our fields we can add in here... we can save that. Now, the reason why it's not showing up here is because we haven't added the actual value inside the text area, if it exists. So similar to how we do it here with the username, if the value of the user exists, then output that over here.
So we just need to add in here user biography. And when we refresh the page, we should see that, pulling from the database. There we go. If we check into our control panel, we'll see that under the tab meta. And we have biography added.
Pretty cool right? Now I can see you creating amazing things, harnessing the power of Craft. All right, I'll see you on the next lesson so we can take a look at signing up with Google.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS