This episode is for members only

Sign up to access "Build a Livewire Comment System" right now.

Already a member? Sign in to continue

Playing

15. Adding simple avatars

Transcript

00:00

Let's quickly add avatars from an external source. And why don't we fix up this comment count that we forgot to add while we're here.

00:07

So let's work on that comment count first of all. Okay. So over in our main comments component, just down here, we just want to go ahead and output the count of all the comments, which is pretty straightforward.

00:19

So we just want to say comments and count, and we should be done. There we go. We have six parent comments here. Okay.

00:26

So for avatars, let's head over to the user model and let's add in a helper for this. So let's come down here and we'll go ahead and create our own avatar helper from here. It's really up to you where you pull this from. I'm going to go ahead and pull it from Gravatar.

00:43

So what we need to do to get this to work is pull in the Gravatar URL. Then at the end of this, we want to hash the email address. So we're going to do this with SHA-256 and we want to do a string to lower on the email address.

00:59

So let's grab the user's email address and we could also trim this as well. I think that kind of makes sense just in case there's any additional white space. And that's pretty much it. That's a really simple avatar URL based on a service where the user can sign up

01:15

for, give their email address and upload a profile photo. So let's go ahead and output it within our comments item. So if we look for the image that we had earlier, all we need to do is we could provide an alt in here of the comment user name, and we just want to output

01:33

the comment user avatar and we should be good. There we go. So you can see my comments are with my photo and we have the default here. We can adjust the defaults if we want to.

01:45

So for example, we could add onto here, let's pull this down, a default here of retro, for example, and that's going to go ahead and change that up. Of course you can use any service for this you want, but Gravatar is usually the most popular.

18 episodes•1 hr 40 mins•11 months ago

Overview

Build a drop-in comment system with Livewire that instantly works for any model.

We’ll cover top-level comments and replies by re-using Livewire components, editing and deleting comments, working with Alpine.js to minimise network requests, building an Alpine.js directive to display when a comment was posted, handling deleted users and loading more comments gradually.

Once you’re done, you can drop a single Livewire comments component wherever you need it — and comments will instantly be enabled.

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!

Sign up to access "Build a Livewire Comment System" right now.

Episodes

Transcript

Overview

Episode discussion