2.9 Adding Custom Templates

Hey, welcome back to up and running with Craft CMS. This is the last lesson of this course and we're gonna create a very simple template to display our About Us entry. Now, as I've mentioned a couple of times after this course, I'm gonna be taking you through another course where we're gonna be creating a landing page from the ground up. So in that we're gonna get into some more details with templating. But in this lesson just wanna really get the basics down. So don't worry if this seems a little bit light on because you're gonna get to really sink your teeth into things in the next course. All right, so let's start by checking out what happens if we look at our About Us entry right now. So we're gonna go to Entries, here's our About Us entry. Now if you click the little globe icon over on the right, that's gonna open up this entry in the front end. So that is loading up the 404.html template that we saw earlier. What we need to do is create our own template that's gonna load where people go to this URL. In order to associate the template that we're gonna create with this URL, we need to make sure that we give the template the right name. So we're gonna go back and refresh our memory as to what we said we'd be naming the template. So we're gonna go into settings, and then into sections, and then we need to go into the About Us section that we created earlier. And down at the bottom here, here's our entry template field and we filled it in with the name About-Us. That means that we're gonna need to create a template named about-us.HTML. Let's do that now. In our Templates folder, we're gonna create a new HTML file and we're gonna name it About-Us.HTML and then we will open that up for editing. So the first thing that we're gonna do in this template is extend the layout template. So we'll just make it a bit quick and easy by copying this line over from our index file. And that is gonna pull in all the code from our layout template, so let's see how that looks now. All right, so that's got all the basics in of our layout. Now we need to bring in some content. So we'll do copy and paste again, make things a bit quicker. So we'll copy this block content line over. Then we need to indicate where our block ends. And then we just put a little line in here that says test, make sure it's working. All right, there's our test, so that's all so far so good. Now, let's just start by getting the title of the About Us page onto the screen. So we're gonna create a h1 tag to hold the title. And now because we want some content to appear, we need a pair of two curly brackets. And to bring in our title, all we need to do is type entry.title. So let's see that in action. All right, so there is our About Us title. Now we can bring in the body of the entry. So down bellow our title, the same thing again, we have our curly brackets. We're gonna say entry again cuz we wanna pull in more information from the entry. This time though we don't want the title, we want the body. So we put another dot and this time we say body, now let's see. All right, cool, so now we've got our title, and we've got the body of text to go with it as well. So now the only thing left is to have our image appear. Assets are stored as an array, so you need to iterate through that array of assets in order to get at the one that you want to output. So we're gonna set up a for loop and we'll do that by putting curly brackets with percentages and we're gonna say for. Now we're gonna end the for loop. Now we're gonna add in what we want to iterate through. So we're gonna add in asset in entry and what we wanna do is iterate through the array of About Us images. So in order to make sure that we get the right handle, we're gonna go back to our settings and just refresh our memory again. This time we wanna look at the fields. So we created this About Us image and here is the handle, AboutUsImage. So now, we add that in there. So this for loop is gonna iterate through whatever it finds saved under our AboutUsImage field, and for each individual entry there it's temporarily going to name it asset. So now we can use this, asset.url and that will give us the URL of our aboutUsImage. So just cut that out temporarily so we can put in a whole image tag, so now we'll set that image source to the URL of our image. For the alt tag, we'll just reuse the title of this entry. And we're just gonna wrap this in a paragraph tag too, so there's a little bit of spacing around our image. All right, so let's see what we've got. And there's our image. So now our About Us template is complete. We've got our image at the top, we've got our title, and we've got our body. So that takes you through all the basic steps of creating templates to go along with the custom entries that you've set up. All right, so that wraps up the final lesson in this course. I hope you'll join me in the next video which is gonna quickly recap and summarize everything that you've learned in this course. And then I'll give you a look at what we're going to be going through in the next course. So I'll see you in the final video.