Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:13Length:1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.4 Fleshing Out the Home Page

In the last lesson we set up the file structure to power our modular home page and got the functionally required code in place. In this lesson we’ll flesh everything out by adding content to our pages and markup to our templates.

4.4 Fleshing Out the Home Page

Hey, welcome to the last lesson in Up and Running With Grav CMS. In this lesson we are gonna finalize our site by finishing the process of fleshing out our modular Home page, that we got the essentials in place for in the last lesson. So what we're gonna do is go through each of the three modules and finish them off one at a time. So the first one we have in line is the Hero module. So start by opening up the hero template for editing. So for the actual hero template all we need to do is add a couple of wrappers. So we're gonna create a div for the class hero_wrap and inside that we'll create another div for the class hero, and then we're just gonna move that content expression inside those records. Most of what we need to do to finish off the Hero module will be done inside the modular template. The first thing that we wanna do here is fetching image from a Hero module to be used as a background image/page cover image. So we're gonna create a variable, we're gonna say set here_image = here.media.images, and then we're gonna use a filter, we're gonna add the pop symbol and we're gonna say first. Now what this is going to do is it's gonna dig in to the hero page, so the page that represents our module. It's gonna look into the media that is associated with that page. It's gonna find the images that are part of that media, and then it's gonna grab the first of those images. So I'll just show you what that's gonna be fetching via the admin panel. So we're going to the admin panel now and into the Pages section, and then we expand this Home page. We can now see each one of the modules that we set up manually displayed here in the admin panel. Now if we go into the editor for the Hero module and we switch into the content tab, down the bottom here you can see that we have this image associated with this module. So that's the image that is gonna be fetched by the code that we just added to our template. So now what we're gonna do is create a wrapper around our hero.content, and then we're gonna apply that background image to it. So make a new div with the class top_wrap. We'll move our hero.content expression inside that, and then we're gonna add an inline style. So we're gonna say style = background-image:url, and now we wanna output the URL of the hero image we just fetched. Now it's important here not just to use the hero image variable that we've created, because that will actually output the entire markup for an image with the image tag and everything else. We just want the URL, so we're gonna put hero_image.url, and right now with our hero module we've only got this wrap with the background image and then the content from the hero page, but we don't just want that. We also want the top bar that we created earlier with our site title and our menu. So, if we just refer back to our base template, everything that's inside this block here. This whole header element and everything that's inside it, we want that to appear inside our hero unit as well, but the way that we're gonna make that happen is by adding another expression above hero.content, and in that expression we're gonna use the function parent. What that will do is take all of the content that's inside block top in the parent template, and output it where we have this expression. So now that whole header element is gonna be output right here. So we'll refresh and see what we've got so far. So that's showing us part of what we've done, but once again we have a caching issue. So we'll just jump into the Dashboard, clear the cache, and now go back and refresh our page, and there we go now we've got our hero unit. We've got a background image showing up there, we've got the content from the hero markdown page in the center, but we've still got our top bar with our site title and our navigation menu. So that’s the Hero module done, now we can move on to the Intro module. So inside the intro template we're gonna add some more wrappers. So we'll add a div with the class intro_wrap, and inside that a div with the class standard_width, and inside that a div with the class intro, and now we'll move our content expression up inside those wrappers, and in this case that's all we need to do. The Intro module is a fairly straightforward one, so go back into our front end and refresh, clear the cache, and now go back and refresh our page. And there's our nicely formatted intro section. Now we're gonna move into out third module and that is the Featured module, and there's a bit more for us to do with this one than with the other two modules. We'll start with just some basic wrappers for layout and styling. So we'll have one div for the class standard_width, and then another one with the class features, and we'll move our content expression inside those divs. Now this is where we're gonna be doing something a little different from what we've done so far. You might remember earlier in the course I mentioned that you can put all kinds of custom content inside the header section of your markdown files. In the case of our features markdown file we're using the header section to create a list of features with associated icons, so I'll show you what I'm talking about. If we go back into our site files and into the home folder, then into the features module folder, and we open up the features markdown file. Inside the header section here you can see that we've got a list of features. So features here is just a custom property that has been set up just purely for the purposes of this module, and then under features you can see that we have this patent of a -, followed by two properties, header and icon. What we're gonna be doing with this is iterating through this list of features. We'll be outputting the header property as plain text, and then the icon property we'll be using to display an icon from the font awesome custom font that you integrated earlier in the course. So now let's go back to that features template and start outputting this list of features. First we'll need a div with the classes feature_ list and clearfix. Now we're gonna start iterating through that list of features. So we use a for loop, we'll say for features in page.header.features. So whenever you wanna drill down into the header section of any given markdown file you do with page.header, and then you just need to add in the name of the property that you are looking to fetch. So we are adding in features here, because we wanna grab the features property from this markdown file. Then we'll just wrap up our for loop by adding endfor. Okay, now for each feature that we output, we're gonna need a div with the class feature, and we wanna add an icon using the font awesome font library. So we'll add an i element with the classes fa and fa-fw, and then we also need to add a third class that's gonna take the information from our list of features and use that to determine what icon is output. So we're gonna add fa-, and then we're gonna put our curly brackets that allows us to output content. Sorry that's actually meant to be feature, not features, and here we're gonna put feature.icon. So that will fetch the string next to the icon property of the feature that is currently being output. And then finally we just need to output the header text for the current feature. So we're gonna add an h4 element, and then inside that we'll output feature.header. Okay so now we'll jump back over to our site, preemptively this time we're gonna clear the cache. And now if we scroll down there's all about icons with all of our header text for each one of the features that's listed in our features markdown document. And if you remember from our earlier overview of the admin panel, you have the ability to switch into expert mode. So if you're wanting to edit a features list like this, you would switch into expert mode and then directly edit that list of features in the front matter section. So now that's everything that we need to do for our theme, and as far as wrapping up the actual site itself there's just one more tiny thing we need to do. And that is, if you look up at the menu here you would expect to see the home page being the first item in the list, so we're just gonna rectify that. Go into the admin panel, and when you want to change page while in Grav you need to go into the page for the specific page you want to move. You can't actually move them all at once in the same drag and drop list, you can only change the position for the page that you're editing. So we gonna go into the Home page, then we'll go into the Advanced tab and then we'll just drag the Home page up to the top of the list. But before we save that, we're gonna need to go back into the Content tab and just change these defaults that are set here in Order By and Oder drop-down list. This is actually gonna add some extra code into our Home markdown document, and if we don't change these settings it's gonna mess up the order of our modules. So we're gonna set Order By to default, so we'll just defer to the order that we already carried into our markdown document by hand, and then we'll change Order to Ascending. Now we'll save. Go back to the front page and refresh, and now our Home page is the first in our menu, and that's it. So, now that's our complete Grav CMS site up and running. We've got all three different types of pages used, and you've hand-coded everything through the grand ops, you know what every single thing does from zero right up to where you are now. So I hope you'll join me in the final lesson of this course. We'll just do a quick summary and just recap what you've learned, and I'll just give you some links and some suggestions on what type of things you'll probably wanna have a look at next as you continue learning how to build sites with Grav CMS. So I'll see you in the final video.

Back to the top