Looking at our list of tasks right here we can see that our next two are very similar. I will attempt to get through both of in this single guide. We're going to create a secondary layout file for blogs and then create another layout file for portfolio items.

Technically, this third one might be a little bit overkill for a project, I'm doing this more just so you can get the practice of using different layout files. In a real application, you could use another layout file or you could customize the HTML file that portfolio items are on itself. I think we think it's worth the time to create another layout, this is something that you're going to be asked to do quite a bit when it comes to professional rails development.

Let's switch to the terminal and what do we have to do in order to implement this feature? If we come to views and then layouts we have our application layout file, this is where every single view every page of our application is currently using this. We have this directory called layouts. Therefore, it makes sense that this is where we would put any other layouts. It's not a standalone file, if the concept was not to have multiple items this probably wouldn't be a directory or it would be called Layout or something like that.

Layout is where rails allows you to put as many layout files as you want. If I right click here I'm going to click save blog.html.erb, this is now a layout. Now it would be a horrible layout because your layout needs to encapsulate all of these things. I'm going to copy this and paste it in and save

I'm also going to click out of it. one thing Sublime Text does is sometimes it loses its syntax highlighting but if you just open it back up you'll see it's working.

We want our blogs to be a little bit different in regards to the layout especially compared to the rest of the site. I don't want to have the regular navigation where is right now. I think that instead, I want to have our categories and those kinds of things at the top and I want to move this down more towards the bottom of the page. I'm going to put it underneath the yield and once we start implementing styles then all of this is going to be changed and look much different. For right now, this is talking a little bit more about having the ability to see the difference in creating different layout files.

One major change you usually make when using a different layout file is changing the stylesheet link tag. Right now we have application and this means that there is a mapping between this name, if you go to assets/stylesheets you can see that we have a application.css file. There is a very important connection here. If I changed this application layout file to be called something like main or something like that, this is going to look for a stylesheet called main. When we ran our scaffold, it gave us a blogs.scss file, all we have to do is say blogs and that is all we're going to have to do

and now any styles that we put inside of this blog's file are going to be picked up.

The things that we're going to be implementing here are more architectural and more structural. We haven't implemented any style so there's not going to be a huge difference except for what we do kind of for demonstration purposes.

Inside of blogs lets put something just so we can see it looking different.

body {
    background-color: grey;
)

This is just so you can see the difference between a blog page and the rest of the application. I do have to make one other change to our application.css file. If you open it up you can see that there is this little piece of code here called required tree with a period. What this means is the entire set of files in stylesheets. What this is going to do is it's going to look inside of our blog style sheet and that's going to be a problem because it's going to pick up these styles, however, we want these files to only be available to our blog. The way we can do that is pretty easy, we can just delete everything.

If I delete that all then it's going to be gone and it won't pick that up. Later on, this is going to be one of the spots where we start implementing the styles for the rest of the application. We don't want to have any crossover between our blog styles our portfolio styles and then the main application styles.

Now we need to open up the blogs controller and this is where we can declare which layout file that we're going to use. They make it very nice and easy, at the very top right below before_action, you can say layout "blog". If I hit save then this is all we need to do.

This is the layout with blog, this is very specific. This is going to map and it's going to say OK in the layout directory, find a file called Blog. This means you can't go any other files in here blog, that's very important. The other thing, you have to name this exactly like this. If you say "blogs" this will not work that's very important that those are named the exact same.

We do have one more item that we're going to have to implement in order to get this working. I actually want to run into the error that's going to occur in order to make it work. Switch over to Google Chrome and hit refresh. Everything is working on our main application layout file. If I go to portfolio everything's still working. We don't have that gray charcoal background at all so everything is still working from the application layout file. Now watch what happens if I click on blog and see that this throws an error. It says "Sprockets::Rails::Helper::AssetNotPrecompiled in Blogs#index" this is not a bad error. It might be one of the most informative error messages I've ever seen in my development life. It actually gives you the exact code that you need in order to fix the error and it even tells you the file that you need to put it in.

Right here it says take this code inside of the backticks and add this to config/initializers/assets and it gives the error, which says "asset was not declared to be precompiled in production." Essentially, this says we saw that you have a .css file that you did not manually declare in your assets initializer. We need to do that. All you have to do is paste that in, they even put in the name of the file so it is very nice and easy.

Switching over the terminal, restart the server and everything should work perfectly.

Coming back to the application, refresh, our application is now working. Our new blog file layout file is working, we know because this has the gray background. If I click on home, it switches and you can see that the nav links have been moved, they're in the header up here but they're in the footer here. Our register links are still right here and our register pages are using the other layout file.

I think we can follow the same pattern in order to do this for our portfolio. First, go into views/layouts hit new file and hit save portfolio.html.erb. Paste this in

Let's go into our portfolio controller and now we just have to say layout 'portfolio' and that's all we're going to have to do right there.

Inside of portfolios.scss we can come here and this we can give a body style.

  body {
    background-color: black;
    color: white;
  }

Let's open assets.rb and add Rails.application.config.assets.precompile += %w( portfolios.scss )

Restart the server and let's test this out. Blogs still work, if we go to portfolio, it's working. We now have three layouts and they are all changing dynamically.

• we have our application layout
• we have our portfolio layout
• we have our blog layout

Very nice job if you went through that,

• git status
• git add .
• git commit -m "Added custom layouts for blogs and portfolios"
• git push origin view.

Let's switch up to here and we can knock off two items. Very nice, in the next guide we're going to get into partials.

Resources

• Source Code