Moving right down our list the next item that we have is the breadcrumbs on the blog show page. I'm also going to tie in the icons because both of these are going to be in the same location. Let's go into the Bootstrap 4 documentation(v4-alpha.getbootstrap.com/components/breadcrumb/) and look for breadcrumbs. I have decided this is what I want, but I also want to show you how you can find these. This is located in the bootstrap 4 docs. This is what their breadcrumbs look like. They give a few different examples. They're pretty standard. I'm going to use the nav list here. Just because I think it is a little bit easier to read but honestly they're both going to be completely identical. I'm also not a huge fan of using ordered lists when I do not have to. That's just kind of a personal preference whenever I see an ordered list I kind of expect to see a set of numbers so when I don't, I think the code is not quite as clear as it could be whereas with the nav component this is a type of a navigational unit. I think it makes a little bit more sense.

Before we switch into the code let's see where we want this. Right now we have the show page and right now we don't really have anything I put the subject here. We have the edit action here. I want to get rid of both of those and I want to have the breadcrumbs right in that location. I'm going to grab this...

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active" href="#">Bootstrap</a>
</nav>

and switching over into the show page this is in the blogs/show.html.erb. Right now we have the topic title and the edit action. Let's see what this will look like. I can come in, paste this right in from the documentation. If I hit refresh We'll see if this works. Yes, it does. This kind of follows a little bit of a pattern that I've talked about that I like to implement and that is to implement the very smallest integration. Imagine that I went through the process of building out the whole set of breadcrumbs right here. I made all the links active worked on everything like that and it didn't show up right. If it didn't show up right the error could have been my fault for simply bringing something in, maybe having a typo but I wouldn't know at what stage something went wrong. But because I know that this code works and that these styles work I now can be completely confident that these styles have been brought in successfully and if something happens to change that. I'll know that there has been some change that was made after this point that's causing the error. I have brought up that workflow a number of times and it's because it really is an important thing to understand. A huge issue for me when I was learning to code was that I tended to try to do too much work all at one time. Then when something wouldn't work I wouldn't know where to even go and start to find where the bug was. That's just kind of something that I personally struggled with. I now try to go the complete opposite way and take very small steps and then it usually leads to less buggy code. With this in place let's talk about what links we want. I think we definitely want a home link here. I'm going to create, right underneath. I'm going to create a link_to tag so I'm going to say...

<nav class="breadcrumb">
  <%= link_to "Home", root_path, class: 'breadcrumb-item' %>
  <%= link_to @blog.topic.title, topic_path(@blog.topic), class: 'breadcrumb-item' %>

  <span class="breadcrumb-item active"><%= @blog.title %></span>
</nav>

a link_to "Home". This goes to the root_path. Then this is going to take a class of breadcrumb-item as we can see right here. I can just take that out. Close off our erb. We're good to go! If I hit save and come back and hit refresh. Nothing changes, but now if I click on home it should take me to the home. That is working perfectly. Coming back everything is now active for the home. The next one I think the most logical thing to put here, would be the topic. That seems like a good fit and we already know we have access to the topic title right here. I'm going to get rid of these next two because they're pure HTML and I want to use erb versions. I'm going to duplicate this. I'm going to take the title so, I can just grab @blog.topic.title grab that. Let's talk about how can we get access to the title route. I have a good idea of what it is but let's not take it for granted. Let's come in and stop the terminal, type rake routes | grep topic. This is going to bring up all of our routes related to topics and we want the topic show page. This is going to be just topic_path because that this is what the method is. That gives us what we need. It's going to be topic_path. Remember we have to pass in the id so here instead of root_path this is going to be topic_path and we can just pass it in as an argument (@blog.topic) and put it inside of parens. Hitting save let's come back. Make sure this is working. This should say Rails, it does. If I click on it, it takes me to the topic show page. That is perfect, then the last thing is just going to be the title of the blog post so that is something that we already have access to right here. You are perfectly welcome to leave this out. I'm going to put it in because we already have the here. Theoretically, we may not actually need this but just for the sake of keeping everything the same, I'm going to use it. The only difference is it's going to be breadcrumb-item but this one's going to be active. I can just grab the active flag here and we can get rid of this. We're going to bring in the blog title. But now this one is going to, actually, I think I deleted that too fast. Notice that this is not a link it's just a span. In that case, we do not actually need this. We're just going to use the span. I jumped the gun on my duplicating. There you go. This should now work and everything should be live. If I do that now it says 'My Blog Post 8'. It is not clickable has its topic and has the home section. This is great! This is exactly what I wanted to do for the breadcrumbs. But now what I also want to do is if an admin user is logged in I don't want to have my edit actions here. I want to have an edit and delete action right here and I want the ability to just have these to be icons so I can click on them and then it's going to either delete the blog post or edit it. How can we do that? I'm going to come down here and the first thing that I want to do is. I want to create a new span so I'm going to create a new span here...

<span class="pull-right">
  <%= link_to fa_icon('pencil-square-o'), edit_blog_path(@blog) if logged_in?(:site_admin) %>
</span>

and this is going to be pulled to the right. The way that you can do this in Bootstrap is just to say pull-right. This is the class for it. Let's create a couple link items and we're going to use icons instead of the text. I can say a link_to fav_icon. Let's pass in the pencil-square-o icon. I'm going to have this go to edit_blog_path pass in (@blog) and then say only show this if logged in and we want only site admins to be able to do this so that I believe is everything we need for that(this 'pencil Square', this is something provided by Font-awesome). You can definitely feel free to explore all of the icons and see exactly what that represents and pick your own icons if you want to have something different. If I hit refresh now we have a cool little icon. If I click on edit it takes or if I click on the icon it takes me right there where I can edit it. Just to verify if I open this up as a regular user or someone who's not an admin and go to the post or to any post it is no longer there. So, that is working nicely.

The last thing we're going to do in this guide, is we're going to duplicate this for deleting...

<%= link_to fa_icon('trash'), @blog, method: :delete, data: { confirm: 'Are you sure you want to delete this post' } if logged_in?(:site_admin) %>

The class I want to use for this is just going to be the trash icon and here instead of edit_blog_path the path for this is just going to be @blog. So it's going to be just the standard blog class but the difference is remember anytime we delete something we need to pass in the method delete. I also don't want to just be able to press delete and have it automatically delete. I want to pass in a little pop-up that's going to say "Are you sure you want to do this" and so you can say confirm. Say are you sure you want to delete this post? We've used that before. That's just a little bit of Javascript that is going to pop-up. It's going to halt this process. If you hit cancel it will not delete it. If you hit ok it will delete it. If I hit save this should now work. If I hit refresh. We have a little trash icon. If I hit edit this works and I'm going to go to my blogs if I come to this blog post here. This pops up 'Are you sure you want to delete this post'. Hit 'OK', it deletes it. The post is removed and you can see that it actually was removed. Everything there is working nicely.

Let's come and let's knock out the breadcrumb and the icons so very nice in the next guide. We're going to implement a partial for admin blog actions. What that means is we're going to build a partial right here that is going to instead of just saying draft, edit, delete post we're going to wrap these up in icons as well. But we're also going to refactor them into a partial so they don't take up any space on our blog index page. Let's come here say git status, git add ., git commit -m "Implemented icons in breadcrumbs", git push origin final-changes and we're good to go. I'll see in the next lesson.

Resources

• Source Code