FREELessons: 13Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Adding the “Features” Entries and Template

Welcome back to building landing pages with Craft CMS. In this lesson, we're gonna start by getting two entries into our new features panel. That's this entry here and this entry here. And then we're gonna cut up the template that's gonna make them show up in the front end of our site. So we'll head into a dashboard and we'll go into the entries area. Now we're going to create a new entry. We'll hit this drop-down, and we'll choose home panels. And now the first thing that we want to do is make sure that we choose the correct entry types. So by default, this is selected hero panel. We want to use our new entry type feature. And you'll notice there that as soon as we switch the entry type that we're working with, all of the fields that we need to fill in also changed. Now we have the field layout that we created when was setting up our entry type. So let's copy over the information from each of our two entries that we wanna set up. So grab the first one, title, and the body. And then we want to add an asset. So like with the hero image, just look in the images folder of the static HTML template that we're working with. In this case, we want the image named Akita. We'll select that. And now that one is ready to go, so we'll save it. Now we'll add the second one. Select our Feature > Entry Type. And we'll copy the title and the body. We'll add our image. In this case we're looking for lens. And we'll save. All right, so those two entries are added in. Now we can code up the template. So let's go into our template folder. We're going to create a new template. We'll call this one, _featuresPanel. Open that up for editing. Now we're going to need to use some of the same type of code that we did in our hero panel template. So we're gonna shortcut things by just copying all the code from our hero panel template And paste it in here and we don't need the same HTML. So we delete all that and we just quickly set our syntax Craft-Twig, but we are gonna need the same type of for loops. So we need this main for loop to dig into our database and get the entries for the entry type that we want to target. And we are also going to need to grab the image from each one of these entries. So we're gonna use the same type of process to get that image as we did in the last lesson. So now all we need to do is change a couple of bits and pieces here. So instead of clearing the database for entries with the type heroPanel. We're gonna change that to entry type feature and then instead of looking for heroImage. We're gonna look for featureImage. So now we've got some for loops in place, let's start carrying into some HTML from our static template. So the section with the id features, this is the one that we're looking at, bringing HTML over from. So we're gonna start by just grabbing this section with this id. And in this case we're actually gonna wrap whole of our code, our existing code, With the section that has that id, because we only want to repeat the rows that are inside this section. We don't want to repeat the whole section for each individual entry. So now let's grab the code that creates each one of those rows that we see in the template. So what we want is this div with this class zig-zag. So we're just going to grab one those. And we'll paste that here inside our for loop. Just neaten this up a little. And now we wanna replace the static content with dynamic content. So let's start with the title. So inside this h2, we're just gonna pull in the entry title. That's done in just the same way as we did with the hero panel. And then this whole paragraph, that can be removed, and then that can be replaced with entry body. Now we wanna replace the image that's used, and we're going to use our feature image variable. And then we also wanna replace this alt tag so we just replace that with the entry title, again here. Now let's load our features penalty played out via the index template. So we'll just copy this include line that we already have pasted in. And then all we need to do is change the name of template we're including. Now let's see what we've got on the front end. All right, so all good. This is almost done. You can see we've got our images in, our title and our body. So that's almost right except there's one thing that doesn't match the original design. In the original, the first entry has the image on the left and the second has the image on the right. So we're gonna make some changes to our features panel template so that we get the same result. What we want is to have different HTML output every second entry. So if it's the first entry, then we wanna still have this HTML that we have here. But if it's the second entry, then we wanna have some slightly different HTML. Whenever you are iterating in Twig, Twig will automatically track a variable called loop. And that loop will have a property named index. So every time you go through a new iteration, that index is going to increment. So it'll be one the first time, then it would be two, then it would be three, and so on. So the way that we are gonna differentiate between the first and second entries is by checking if loop.index is divisible by 2. The first entry will have a loop.index value of 1. That means it won't be divisible by 2. The second will have a loop.index value of 2, which means that it will be divisible by 2. So let's add that in. So we're gonna say if loop.index is not, and this is where we can use a cool little function that's built into Twig, divisibleby(2). So if loop.index is not divisible by 2, that tells us that we're still on the first entry. So this is the HTML that we wanna use or else, we'll add in an else here. And then we'll just close off our if statement. Then here is where we wanna have our alternate HTML. So on the second one, we want the body to come first. So we'll just copy and paste in this code. Then after that, we want the image to come second. And we just need to make a couple of little tweaks to the classes here. If you look at our original file, the first time we have the image come up, it has only the class col-md-6. But the second time needs add col-md-offset-1. So add that in. Then the text, the first time we have col-md-push-1. The second time we don't have that class. So we remove that, save and now when we go back to our front end, we should see these two swap position. All right, so that is all done. Now that divisible by function is a really handy little thing as is being able to dig into loop.index. So that's just one of many cool little things that you can do with Twig. And that wraps up the creation of our features panel. Now we're ready to move on to the pricing panel. So we'll be going through the same thing as we have so far, setting up all of the back end, then creating the entry in the template. So I'll see you in the next lesson.

Back to the top