FREELessons: 15Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Create the “_layout.html” Template

The basis of our blog’s HTML will be the “_layout.html” template, as it will be extended by every page of the site. Let’s get it set up in this lesson.

Note: Before we begin, you should have a Craft CMS site set up offline on which to develop your blog.<p></p>

Related Links

2.1 Create the “_layout.html” Template

Hey, welcome to lesson one of build a blog with craft CMS. I'm Kezz and this is Plus. Now this course does assume that you've already done the course, up and running with Craft CMS, and building landing pages with Craft CMS. So there are some things that we can put in there that we're not going to go over again in this course. So to start with, before we move on in this course, you should make sure that you have an offline installation of Craft set up, and we went through how to do this setup in Up and Running with Craft CMS. So your site should just look like this in the back end and like this on the front end. And then there's one other thing that you should do before we move on, and that is in your general .php file that's in your config folder, you should set up this baseUrl variable. Now this is another thing that we covered in Up and Running with Craft CMS. So if you're not sure what this means and you need a refresher, look at lesson 2.5 in that course. So what we're going to be doing in this lesson is getting the layout.html template set up. And you'll remember from the last two courses that this layout file is what gets loaded in or extended on for every page of the site. So you want to go into your craft folder, your templates folder. And then we're gonna work with the existing layout, that HTML file, and just edit it. So go ahead and open that up in your favorite code editor. We're gonna be using Sublime Text for the duration of this course. All right, so here we are in our layout template. First thing you can do is get rid of these comments, we won't be needing those. And also all of this inline CSS, we won't need that either because we're going to load in our own style sheet. Now in the source files that are attached to this course, you can find a style sheet. So that's already done completely and you won't have to spend any time on that, so that way you can just focus on learning what you need to learn about Craft. So grab that CSS file and copy it, then head into your hddocs folder. We're gonna create an assets folder, inside that we'll create a CSS folder, and then we're going to paste in our style sheet. Now back in our layout HTML template we're going to load in that style sheet. So at the bottom of our head section we're gonna use includeCss file. And then we're gonna put the path to the style sheet that we just pasted in. Sorry. So /assets/css/style.css. Now you should remember this includeCSSFile expression from the two courses that we did before this one. Now, we're just gonna make another couple of quick additions to this head section. We're gonna include the viewport meta tag. So just add the card in that you see here, this is to make sure that our site is going to resize on mobile devices as we expect it to. And then we're also gonna load in some Google fonts that we'll be using. And we'll do that with this snippet of card, here. Now if you just want to copy and paste these easily, all the source files including this file will be attached to this course, so you can just grab the completed file to copy and paste lines like the ones that we just added in. Next up, we're gonna rework the HTML in this template so that we get our basic layout down. So, just inside the body tag, the first thing we're gonna set up is a bar that's gonna run along the top of the site. So we're gonna need div with the class, top_bar. By the way, if you're interested, I'm using the Emmet extension for Sublime Text that allows you to quickly type in a class name, hit tab and then have that turned into a div, like you have there. Just there. And inside that, we're gonna add another div for the class standard_width, and that's just going to let us have a little section inside this bar that's centered, and is the same width as the rest of the site is going to be, which is going to have a standard width throughout everything. And that will make a bit more sense as you start to put everything together. And then because we're gonna have some floated elements inside this div, we're also gonna add the class clear fix, which is going to clear those floated elements. Later on, we're gonna add a nav bar inside here and a search bar, but for now, that's just gonna get this into our layout. So then after that we're gonna create a new div that's gonna hold our header, and it's going to hold all of our posts. So we want this div to have the class wrapper and also standard width, again. And then inside that we're gonna set up our header. So we want a head element with the class site_header. And then in here, we're gonna copy and paste this snippet here with an h1 element and a linked site name inside it. And we'll just make one small addition. We can add the class site name to this h1 element. And I'm just going to comment all this out for now. Then let's have a quick look at what we've got so far. So there we go, we've got our stylesheet loaded in and our top bar and a header is set up inside our wrapper. So we've got the top bar here, this is our wrapper, and here is our header. All right, so let's keep going. Next up, underneath the header, we wanna have a place where the posts are going to be loaded in. And we're gonna do that by just grabbing this block content expression. And then closing it off with end block. Now, what's gonna happen is every time this template is extended, this here is gonna be replaced by the content for that particular entry or page. Right, so that's everything that we need in our wrapper section. And then next up we're just going to add in a simple footer. So we need a footer element. And we're gonna use the classes site_footer, and again, standard width. Then in here, we're just going to use the same content that was in the default layout template. We'll save that. We'll delete all this commented-out code. And let's have a look at what we've got now. So, just as we expected, we've got the content for the home page being loaded in where we put that block content expression, and then down here, we've got our footer. So now we're almost done with our layout.html template. There's just one more thing we're gonna do. And that is to add a full-sized image background that we're gonna apply to our body element. In order to do that, we're gonna need to set up an asset. So head into your dashboard. And this is gonna be just like the assets that we set up in the previous two courses. So go into Settings, into Assets. Create a new asset source, and we're gonna call this one Site BG. Now we're gonna need to go ahead and set up a folder for these assets to go into. So in our htdocs folder, we'll create a new folder and we're gonna name it images. Inside that, we'll create a new folder named site BG. Now, we head back to our dashboard and we'll add the path to the folder that we just set up. So, that's images/sitebg/ with a trailing slash. And then down here, we need to fill in the URL field, and we're gonna use that base URL variable. And then we'll add our file system path onto the end of it. And now that's good to go. Now our site BG asset source is set up, we can go ahead and add a background image that we can use in our site. So now you'll see assets has appeared in the menu here, we go into here and now we can upload a file. Along with the source files for this course, you'll find an image named site_BG.jpeg so find that file, browse to it and then upload that, here. Now this is the only file that we're uploading under this Site BG asset source. So that means when we query the Site BG source, there's only one image is gonna be returned and we use that image on our background. So if you want to change images, just make sure that you delete the one that's already there, and have only one image uploaded at a time under this site BGS at source type. Now we're gonna go ahead and load that image into our template. We're gonna use the same technique to load this image in as we did in building landing pages with Craft CMS. So we're gonna go through this pretty quick, because you have already done it before. If you do need a refresh though, check out lesson 2.3 in that course. All right, so up here before our opening body tag, we're gonna set a variable that's gonna end up holding the URL of our background image. So we're gonna use set and the variable siteBg, and then we'll just set that to an empty string, for now. Let's make this a bit more readable. We're just gonna change the syntax to Craft-Twig. That's a really great syntax highlighting package and we went through how to install that also in Up and Running with Craft CMS. So next, we're gonna to set up a for loop and we're gonna use that to query the asset source that we just set up. So we'll say for asset in craft.assets.source. And then the asset source that we want to query is siteBg. Then we'll just end our for loop. Now inside our for loop, we're gonna update the value of our siteBG variable. So we use set, once again. And now we want this variable to hold our asset URL. So now our siteBG is going to hold the URL of the image that we just uploaded. And now we can just output that as a background image for a body element. So we're just going to use style= and then we'll set the background image. [BLANK AUDIO] And in here, we just output our variable. Right. So now, let's have a look on the front end. And there is our background image. So now, that is everything that we need for our layout template. We're gonna come back later and add some extra things into our top bar, but for now we're ready to move on. So in the next lesson we're gonna be doing some work on the back end in the dashboard, setting up blog categories. We're gonna use blog categories in this site in a couple of ways. One, we're just gonna use them in the normal way so that when you're creating a post you can allocate specific categories to it, just for organization. The other way is, we're gonna have every post set with what we're gonna call a main category. Now we're going to use this main category to determine what the search engine-friendly permalink of each individual blog entry should be. So we're gonna go through setting all that up in the next lesson. I'll see you there.

Back to the top