This is pretty exciting. We are just about done with this entire design. Right here you can see we have our index and this is working. As soon as we get to our show page working then we're going to be in really good shape. Obviously we still have our forms to do for the portfolio but for right now this is going to be everything that other users are going to be seeing on the site. That's pretty significant.

I'm going to come to Sublime Text and let's open up portfolio show and as you can see right now this is pretty basic and pretty much just bland HTML. The first thing we're going to do is create a wrapper. Now with bootstrap 4 you may have noticed one of the things with the portfolio is that whenever you want to create some type of mechanism for essentially restraining the width a great tool that you can use is the container class. That's what we're doing right here on the index. I think it makes sense to implement that here on the show page.

First thing I'm going to do is create a div with a class of container. Make sure it's spelled properly. Then inside of this because what I'm essentially envisioning is having an image here and then a description right here. So, all of the written content will be here on the right-hand side and the image is going to be here on the left. You probably already have a good idea on what we're going to use in order to implement that.

First we're going to create a div.

<div class="container">
  <div class="row">
    <div class="col-md-7">
      <%= image_tag @portfolio.main_image %>
    </div>

    <div class="col-md-5">
      <h1><%= @portfolio_item.title %></h1>

      <em><%= @portfolio_item.subtitle %></em>

      <p><%= @portfolio_item.body %></p>

      <h3>Technologies Used:</h3>

      <% @portfolio_item.technologies.each do |t| %>
      <p><%= t.name %></p>
      <% end %>

    </div>
  </div>
</div>

So, I'm going to create a div with a class of row just like we've done a few times before. Now inside of this we're just going to create our own columns. Ok, I'm going to create now another set of divs and this one is going to be of class="col-md-7" is going to be what I want to go with for our image. Now I can just copy this and paste it down here. We always need our columns to total up to 12. This is going to be 7 plus 5 is 12.

Now I can take our main image put it inside of the left column and everything else we can put inside of the right column and indent it all. Now that we have that we can put some separation in place so I'll add in some tags here. I'm also going to make technologies used a and that should be it.

Now if I come back and hit refresh. Look at that, this looks like a real portfolio show page. This is looking much better. We have everything organized we have our subtitle, the content right there. All of that is looking fantastic. I'm very excited about that. Now one other thing that seems like it would be helpful is to maybe on the very bottom put something like view all portfolio items something like that. Let's put that in here. Just create a link and say link_to view all portfolio items and that will just go to portfolios_path. That should be all we need to do. If I hit save, hit refresh now you have this little link here.

If I click on this it takes us right back to the portfolio just because usually you want to make it nice and easy for people to navigate on your site and it's going to be a little bit more intuitive this way. In fact, I think it may make more sense because when we have items like this page where it has no portfolio technology is being used. I think it makes sense to actually put this right next to this back-to-top. I think that would actually be a little bit better spot for it. I'm going to extract this out take it off of the show page and let's go to the portfolio footer.

Coming here looks like we have a little indentation issue. We should be able to put this right here. If I hit refresh you can see that that is right there. We can put a little slash or you can put anything you want there. But a little slash just to show that they're different. We have this and I think that's a little bit of a better spot for it. You can obviously do whatever you want with it but that's a way that it makes easy for users to do it because if not they would either have to hit back or come up here and neither one of those are really that intuitive. That should be very good.

Let's come to the terminal. I'm going to say git status, git add . Now you can say git commit -m "Implemented show page styles for portfolio layout". git push origin design.

This is all pushed up to Github now. We are very close. The only things that I think we're going to have to do now is take care of the form page for the portfolio items. But as far as everything that users are going to see on the site our initial design is implemented. Very nice work on that! Take a little break and I will see you in the next guide.

Resources

• Source Code