On this Craft Cms lesson we take a look at advanced template inheritance using Embeds. You'll learn to filter slideshow items using the Boolean LightSwitch custom field.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Welcome back, on this lesson, we're going to take care of the slideshow, if we remember we have a slideshow twig. so that's an include. I want to make sure we clean it up, so we get rid of the extra stuff. We have some of the controls happening, those don't need to be dynamic. But the actual slide wrapper. So that's something we need to work on.
So I'm going to clean this up quickly here, and we're just going to focus on one because we're going to wrap that on a for loop. All right, so let's go ahead and add in our for loop. Now for this four loop, we're going to use the variable called feature. Let's go ahead and create the variable. So in this case, we have a set featured and we're going to pull in or fetch the entries from the movies.
So in this case, we would have sections and movies. All right. I'ts just going to loop through all of the movies. We're going to get to how we filter that in just a little bit, but let's go ahead and see how we can start changing some of the values in the actual slideshow item. So for example, the categories, what we want to do is use the same idea for the multiple objects that we talked about.
So you would have to wrap that with a one. And we want to go ahead and add the link as well. Anything that's within a multiple objects. We also have to add that extra parameter of one. Right? And so the title, we go ahead and add that one. Now, what I can see here is that we did have something very similar in the movies template.
If you remember on the actual detailed movie, we are sharing some information. That we could probably use also on the slideshow. So, for example, the hero meta, you can see here we have a hero meta as well on the slideshow include, except that we actually use a background image for the hero BG. So what I'm thinking is this hero meta, we should actually have it under an include, so that we can share this exact same snippet of code, both on the movie details and on the slideshow.
So let's go ahead and create a new document. And I'm just going to bring in all the variables that we are using for just specifically that information. So the categories, the score, the rank and all this. And then what we want to do is just call this slide-meta, which is information that lives inside the slideshow.
We can just copy that entire snippet. And we can include it inside our slide made a document. All right, so this looks good. We have the hero meta inside an include, and we're sharing it across the slideshow and our movie details page. Bring in that include inside the slideshow as well. All right. So one thing to note is that right now the slideshow is loading up all the movies.
So imagine how much effort Kraft is doing to pull out all those movies twice, both on the movies grid and on the slideshow. Let's go ahead and limit that to just three items on the top. There we go, so that looks better. And the way we want to do the filter is by simply creating a new custom field.
So we're just going to create a field under the group of movies. We're going to call this field featured, and this is going to be a light switch type of field,
So we have two options here it's a boolean, and what this means is either true or false. In this case, you can have a labeled for on or off. I'm just going to call this yes and no. You go ahead and save that and let's make sure we assign that field into our movies section. We go to our entry types and do the same process of adding that field inside by simply dragging and dropping it in our content tab.
Now, what we want to do is go to a couple of movies. We select maybe Batman and simply turn on this light switch so that we identify this one as true. We can do the same thing for a couple of other options. The ones we have on the slide show. These are the ones we want to feature on the top.
There we go. And that's it. So now the way we want to do this is we need to go into our code and we need to make sure that on the for loop, we have either a conditional, so we're looking for the condition that asks if a specific movie has this custom field that we just created in this case, entry.featured.
If this equals true, then output this snippet of the code. So let's quickly refresh that and we can see it's working pretty well, but we're still missing that background image. All right. So, if we go over to our script, we see that the hero BG does not have any background image. So let's copy that little code from the style, from the cast.twig going to paste that in and replace that with the correct handle.
So, if we remember the handle for media, we have movie cover. Just need to write in here, movie cover, and it's going to pull in that background image. All right. There we go. Looks pretty good. Awesome. Okay. So even though we have these filtered items using the conditional, we're still loading. We're still asking Craft to query all the 49 items in the slideshow.
And we don't want to do that. There's a better way to filter out our featured custom field. And it's simply by adding it directly into our top variable. So we're going to add in featured and we're going to put in the boolean of true so that we get only those three elements. All right. So one thing I do remember is on our webflow, you have these buttons of play movie and then a trailer on the slideshow.
I've currently disabled that temporarily with just some comments. Because I didn't want to show it on the actual movie details page. So the question is how can we show it on the slideshow and not on the movie details page. This is where the embed comes in. It's following the template inheritance idea. So we're going to create a block called extra just like that and put it wherever we think we can add additional code.
And what we want to do is instead of include, we're going to replace that to an embed and we're going to close the tag of end embed. And what we want to do here is adding that block, extra, using the same variable. And we're going to paste in those two buttons. Okay. So what this does is it includes both the slight meta, but we are pushing or outputting new content into it.
So similar to how we're doing with the layout and the block of any other content page. So just like that, you can see here, we have the movies, slideshow having those buttons. And if you go over to the actual actors or cast or the movie details, we don't have those buttons in there. And this is really cool because then it gives us all the freedom in the world to create as many opportunities to extend our code.
All right. So let's jump into the next lesson and take a look at some basic SEO best practices.
Access our premium community including bonus tutorials, project files & weekly resources.UNLIMITED ACCCESS