On this Craft Cms lesson you'll learn everything about dynamic templates, related entries and basic math operators.
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!
All right. So I want to start cleaning up our structure. So our cast template or our actors template, we're going to just rename that, add an underscore because we don't want it to be visible to the public. We're going to create a folder called. Channels.
We then just drag and move our cast template inside the channels folder. So if we refresh, of course, the cast template won't work. We need to go into the Craft settings and inside sections. Over at the settings, we make sure that the template that we want to use is channels underscore cast. So that's the new structure that we want to use once we refresh that it should be working fine.
Then what I'd like to do is open up our detailed movie template from our webflow. And we're going to try to identify the fields that we're going to need. Right away. I can see the components, maybe the plot summary, that's just the description we have already. And the reviews and cast members. These are already in our craft as includes.
One thing I want to make sure we have in our Craft is the movie cover and that movie cover it's something we will use for the slideshow. Right now, we have created the volume for the movie poster, but not for the cover. So let's go ahead and do that. Let's go ahead and create a new field.
We're going to put this field under the group movies, going to call it movie cover. And for the field type, we're going to select assets and we make sure that the source is under movies and for the sub folder.
We can use one of these variables in this case, the slug of the movie, and then a forward slash once we save that, we need to assign that again to our section of our movies. So go into our entry type. And over here, we can start adding and dragging and dropping those fields. One cool thing is that we can create tabs.
So I'm going to create a tab called media and that way it'll be easier as the editor to find all the photos for that particular movie. So just drop in movie poster and movie cover under that same tab. Maybe drag the movie genre and push it all the way to the top. All right. Let's click safe and let's jump into the actual movie entry.
And you can see here, movie genre is on the top. We can choose multiple of these options, let's add them in there.
All right. You can see here, the tab is enabled. So now we can add in our movie cover, I'm just going to download the same one we have in our webflow. So I can save that into my desktop. And there we go. We just uploaded that under the sub folder of the joker. So it's a little bit better and a little bit more organized I feel than webflow, where just, everything is all in one same folder, it's a little confusing. All right. Just like that. We uploaded the movie cover for the Joker entry. Let's go ahead and preview. And there we go. Nice.
Now what we want to do is open up our movies detailed page, and I want to toggle out all the excess that we don't need, make sure that we select the wrapper and the hero player from the Zeus wrapper. And we're going to create a new file, similar to how we did with the cast. This channel or template file is going to live under channels because this is where the movie details will live. So right away, we want to extend the layout.
We want to paste in the code. So the first thing I'm doing here is just pasting this in. We're going to wrap everything under the block content, just like we do with everything else.
Now, if we wanted to click on any of these movie covers, it'll take us to the wrong template because the routing is incorrect. So let's jump over to the sections and fix this. Under the movie section right now, it's routing to the movies template, which is not what we want. We want to route it to the channels movie, which is the one we just create it because that's where we're going to display additional details of that movie. All right. So it looks like it's working, the routing it's now taking us to the correct template. Let's go ahead and add some of those categories. If we grabbed the category handle, which I think it's click on the categories and then handle this movie genre, we can start adding that into our template.
Right. So. The multiple objects will always behave the same way. Right now I'm calling in the handle for the categories, which is movie genre. And this is what you're going to see if we're not limiting the values or data into a single entry. And this is happening because when you add a custom field of a category, it's always going to allow you to select multiple options.
So if we open up this movie and click on movie genre. We can choose as many genres as we'd like. And so, when we go into the front end and we're trying to just output one single value, we need to add that into our parameters.
We're going to create a variable called categories, entry. the category, in this instance would be movie genre, which is the handle. And then we just finish it off with an all or one, depending on how many we want to show. If we do all, that's fine. We can use that and we can place that in here by using a four loop.
So we want to loop over all the categories, related to this movie, right? So we're creating the genre which is just the variable that will be used inside the tag. Right here, all we have to do is add in genre.title, which is a title of that category. Let's make sure we have the URL as well on the link since these are links to templates.
There we go and just like that we have displayed all our categories using a for loop. All right. So we want to do the same thing for all the other values. So the plot summary is going to be entry summary.
For the include of the poster. We want to just add in our, include our component movie card that will automatically be updated. We make sure that everything here looks good.
So there we go. We just loaded that card for the extra details we can replace that with the year. All right now, for the score, we might want to take a different approach.
We need to create a conditional, we're going to create a variable called score, and we're just going to call and bring in the score from the entry. And because there's three types of results, you have the low, the medium, and then the high score. We need to create three types of conditions. And we're going to use operators, simple math operators.
This is what I'm going to do. I'm going to do an if condition, if the score or whatever the score is in the movie is larger or equal to nine. Then I want to use the media score high snippet, right. So I can just copy that little snippet, paste it in there, and then I can add an else. So else if so if the score is less than, or in this case, you know, 9.
And then a measure between nine and eight, we would be like this, we just add an end between that. So, if the score is less than nine and the score is larger than eight, then output the medium snippet. So we copy this over and paste it in. Pretty straightforward. And finally, for the low score, we can finish it off with the final condition of: else if the score is less than eight, then show me the low score snippet. We just need to add in the variable score underneath and replacing those static numbers.
And just like that, we created a conditional using operators. So if we refresh this we'll see now we only see one value, which is 9. And so it's going to use the class wrapper "high", but there's a problem with this. There's an easier way we could create the same solution and because we're using class names to determine the difference between the type of visual we want to see for high, medium, or low, all we really need to do is set a variable that identifies the rank and that rank can be the name of the class.
Okay. So let's just do that same thing copy it over, replace the snippet and have the rank, the preview, which is the middle. And then this third rank would be low. Notice now that it's just a variable and all of that information is at the top of the document. What that does it's just going to clean up our code even more.
We don't need all those ifs anymore down below. All we get to do is replace this with the variable rank and that's it. As I refreshed I saw this little issue and it was related to the ranked variable. So the problem here is that I was missing the equal sign over here, so that the score is larger or equal to eight.
So if we go ahead and refresh it should work fine. There we go.
Let's go ahead and try this out with a live preview. When you go over to your craft, inside you'll see a preview button. You can actually see live what you change on the left side. So if you start changing the score to a seven, you're going to see now that the condition that we created is using the low score visual.
All right. And you can just play around with the title. And the summary and you're going to be able to see those updates in real time. So Craft doesn't have the ability for you to edit directly on the front end as of yet, but I'm pretty sure they're working on something close to that, but for now this live preview works like a charm.
The next thing I want to do is add in the related actors in our movie detail page. So our template has that already. If we toggle close the Zeus wrapper, we'll see that right below as it section on its own called select section related. So pretty much just copy that, paste it over to our movie.twig.
And we're just going to make sure that we understand the tab system. So the tabs are these little toggles that I'm closing and opening up. The first tab is going to contain our actors. And the second is going to contain our reviews. Notice that these also use the same card component. I'm going to just include our actor card component into our related tab and the same goes for the reviews.
So let's go ahead and add in the related actors variable. Pulls all the entries from the section cast, but it relates them to the current entry. We're going to make sure that the include for the card is wrapped inside a for loop so that we can display or output all the related actors of that particular movie.
All right. So let's just go ahead and refresh the page and boom, we got related cast members in our tab system. All right. So finally, I want to just go and quickly show you guys that I'm repeating the same process that we did for the clip trailer. Just replaced some of those variables, using the tag of clip.url and I'm using that all through the hero player.
So once you've uploaded your clip, You assign it to the movie,
we can refresh the page and boom. We have a really cool trailer happening completely from Craft CMS. For that little icon I'm just going to make sure that we transform or turn it into a link. We can do that by changing the div of that icon as an "a href" and simply fetch the entry URL for the trailer.
It takes us to the trailer of the movie outside. So it doesn't really matter how you do it. You can do it on a pop-up or a light box. As long as you get the idea or the concept that craft enables you to use these tags. And apply them throughout your template however you want, you can come up with some really customized applications.
All right, guys, this is it for this lesson this one was probably the longest one. I hope you're excited with what you have learned so far and I'll see you on the next class.
Access our premium community including bonus tutorials, project files & weekly resources.UNLIMITED ACCCESS