- Read Tutorial
- Watch Guide Video
So having live updating comments on our blog is very cool, and we're just about done with this section. In this guide, we are going to walk through how we can style these and how also we can add images to the Gravatar here. Or how we'll leverage the Gravatar feature in order to have that.
First, let's open up and see what Gravatar is. If you google Gravatar you'll see it stands for "globally recognized avatars" and it's something that came out of the Wordpress side of the world. But it is actually very cool and helpful. If you do not have one you are not required to go sign up for one but if you do you can go and enter your email address and you can go upload an image and then anywhere that you go that uses Gravatar will actually pull that in. So if you provide your e-mail address and it's one you have associated with Gravatar then when you go to a site that uses it. Automatically without you having to upload anything, you are going to have access to that and your thumbnail will get shown. So that's what we're going to implement here because for your portfolio, I don't think it really makes sense to implement the ability for users to upload their own profile picture. I don't think that a lot of users are going to come to my personal blog and go and spend the time to go and upload their image. I want this to be something that is just happening automatically.
Switch into sublime and let's create a view helper. I'm going to go into app then let's close a few of these out just to make life easier on us. Let's go to helpers now if I go to blogs_helper.rb. This is empty right now
def gravatar_helper user
image_tag "https://www.gravatar.com/avatar/#{Digest::MD5.hexdigest(user.email)}", width: 40
end
so we can create a method called gravatar_helper. It's going to take a user in as an argument and here what it's going to do is, it's simply going to call an image_tag and then it's going to pass in a user with the Gravatar URL. I'm going to switch into another window and grab this("https://www.gravatar.com/avatar/#{Digest::MD5.hexdigest(user.email)}", width: 40) because I don't think you want to see me type out a long URL but this is a shortcut and you can access this in the show notes. This is Gravatar and the path is slash avatar. Then they have this way of generating a kind of a unique key and what it is is it takes your email address and then it creates a code based off of that. It's going to create what's called an MD5 hash and it's going to simply use your e-mail address. That is the URL that Gravatar uses in order to share that. I also added a width of 40 here and that should be all we need. Now we pop into our comment(_comment.html.erb) and we already kind of put a placeholder slot here and now we can simply call Gravatar helper and then pass in comment.user...
If I hit save what's going to happen here, remember we don't want to call current_user that would be very bad because then what would happen is a user would come and then they would see their picture on everyone else's comments. This is only the user associated with a comment. If we come back, I do have the server running. If I hit refresh, let's see if this works. There we go! This has the little G. This is one of the defaults. We also could always override this if it doesn't pick up an image. The other thing that we can do is I can go and create an account with a user that actually has that. I'm going to use my devcamp address and create an account this way, click sign up and coming into the blog. If I come to, I forget which one we used was it my blog post 1? No, it doesn't matter. If I come here and say my comment, hit post comment. You can see it gets added and there is my thumbnail. Now, when users come they're going to be able to add that in and then see their image right there. Which is kind of a cool little feature to have. Let me come and make one little change I'm not sure 40 is exactly what I'm wanting. Let's let's see what 60 looks like for the width. It's a square so it's going to give us something a little bit better. OK. That's OK. It's not perfect but we can, you know we can clean this up. I like the size of the image but obviously, we have to work on the rest of it. So that's the first part. Let's take a look at how we can style the cards because if we come back and create a few more comments just like this you can see they all butt up against each other. Definitely not what we want to do. I'm going to switch here and now let's open up our blog.scss file. There we go. Going all the way down to the bottom right now we only have for custom styles, are .social-links. Let's do a couple things let's come and say...
.comment-card > .card { margin-top: 15px; }
comment-card and then grab the .card class and just for reference if you go to the comment partial(_comment.html.erb) You can see that I created a wrapper here for a comment-card. Now I can say margin-top. Let's go with 15 pixels. If I hit save this should give us some space in between each one of these. If I hit refresh now, it's going to go and it should give us the kind of margin that we need. Yes that is perfect! If we add a new comment it gets added and we have some nice margin here. The footer though, I'll switch back one more time, you can see the footers butting up right against that. Definitely not what we want but we have access to the blog-footer here. All we have to do is add an additional element. I'm going to say...
margin-top: 20px;
margin-top: and here let's say 20 pixels hit refresh. There we go. We have some good space. Let's kind of attack this side of it. If I click inspect and I have my image selected and it doesn't have any special class associated with it. If we gave it a class then we could just say something like margin-right and say 20 pixels. Let's see, that's not doing anything on the image side. We're probably going to have to do is manage with the div and the reason why this is probably causing a little bit of an issue is the fact that we're working with the grid and we may just need to get it a little bit wider. But let's try the margin-right here. 20 pixels and yeah. The problem is that we're working with the grids so let's come back really quick. Inside of our partial instead of giving it just one let's give it 2 and then 10 here...
If I hit refresh now, there we go. That's looking a lot better. This has the comment but it would be kind of nice if we had the user's name and also when they posted it. Just to give kind of a frame of reference and one of the cool things is if we switch back to our blog index page. Remember how we have this published 4 days ago and all of these things? Well, let's see if we can tie into this. I'm going to come back here. Let's come down and in sublime here, we have our content and this works. But let's also see if we can create another div. We're gonna have a div here where the content is going to go. Then we can create another div underneath. This is where the user information can go. We can also style this later but for right now let's just say come <%= comment.user.full_name %>. Let's see, we can also just say 'comment posted by' and actually we probably should, it's up to you. You can do full name, or you can do first name. Whatever you feel comfortable doing.
If we hit refresh you can see "comment posted by" and then my name. Let's append onto this, you know something about when it was published. If we go to the partial, blog like this(_blog.html.erb). You see how we have our distance of time in words and how we can do all of this. Well, we can implement this right here. I'm just going to copy this, come over here. We can say comment posted by, then the username. We have (comment.created_at, Time.now) %> and then ago...
Let's see if this works. If I hit refresh. 'Comment posted by Jordan six minutes ago'. That is perfect! That is exactly what I am wanting. Now we need to just kind of style this a little bit more. Also, let's take just a little quick look at what happens when someone comes and puts a ton of content in. Let's say that they come in here and they add two big paragraphs. OK, that looks good. I just wanted to make sure that that wasn't going to be an issue. Now all we have to do is style this since we want to give this some kind of distinction. We have this comment let's come and give this a class and we'll say comment-attribution class..
Save this go, to blogs, paste this(comment-attribution) in and now let's say the font-size should maybe be .8em and then the font, not font-decoration. I always forget the style for italics. Let's just hit refresh really quick and then I can look that up.(You can see 'comment posted by Jordan 1 minute ago'). Perfect, now let's say css italics and see what google tells us there. Okay, it's font-style. I always forget if it's font-style or one of those other ones. So, font-style and you can say italic and it should be italic or italics.
.comment-attribution { font-size: .8em; font-style: italic; }
Let's come back and let's hit refresh and see if that does the trick. There we go now it's italics and definitely play around with if you want something else you could also do something like pass in a value such as you wrap this up in a span tag so you could say
span here and inside of the name we could pass another class. You can say class and say comment-name class. With this one we could inside of this, we could come, and kind of make it bold.
We could say font-weight and say 700. Coming back hit refresh this should bold it up for us. There we go. Feel free to implement it however you want but I like the way that's looking and eventually, I may add some more padding or do something like that. But overall I think that that looks really good. I think our comment section is coming along nicely. Great job! If you went through all of that there was a ton of work this section and I hope you really are a fan of what actioncable can bring to your applications. How they can really bring them to life. You could use it for all kinds of things, we're using it for comments. Tons of people use it to build chat type applications to implement messaging. You can also do this for notifications if you have a social networking kind of app you can have notifications pop up and you can leverage actioncable in order to make it possible. Very nice work!
Let's actually come to a pivotal tracker. We have crossed off everything off of our list. We can hit finish, deliver, except. Everything is good to go on that side. Let's come and let's push everything up to github. I'm going to say git status and then git commit -m and here I'll say "completed comment feature with actioncable" git push origin actioncable. Because this was a big feature let's push it all up and let's merge it in github. I'm going to click "Create and pull request". You can see all the commits we had to do in order to build this feature. Now we can merge all of this in. This is all now available in the master branch. Here if I say git checkout master I can run git pull. Brings all of the code down and we are good to go. Fantastic job going through all of that! I know that was a ton of work if you're not familiar with some of those things. I definitely recommend for you to circle back. Go through it again until you start to become more familiar with the process. Don't let the syntax of some of those various jquery and the Javascript components scare you away. Focus more on the data flow, focus on exactly the process that's happening. The different components that are necessary and it'll start to make more and more sense the more times you go through it.