On this Craft Cms lesson you'll learn how to pull and display your data with your designs.
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 the first thing we want to do is open up the movies template in our visual studio code. And I want to pull out from there, the actual grid of where the movies are, and if we toggle close some of these, we can see how easy it is to navigate and find these little snippets.
So let's go ahead and click on the actual grid and we're just going to copy all of that and we're going to create a new file. We're going to call it movies.twig, paste that code in here, but following the same idea from previous lessons, we want to extend using the layout that we have created. And we're going to paste that in inside a block content. So let's go ahead and add that in, block content.
Let's go ahead and open up the template on the browser. And just make sure that it works. Yeah. It looks like it's good. Now we can include that slideshow because we created that on a previous lesson. So let's go ahead and do that.
Refresh the page. We should see that nice snippet of code added into our layout. Pretty cool. Right? So let's head over to our movies entries, and I want to show you ways for you to customize the view. We can toggle some of this additional options like the year or the movie genra, and that way we can filter through those options.
Right now, I have some of those entries empty, but the idea here is for you to be able to find those movies based on all the custom fields that you eventually create. Okay, so now what I want to do is replace that snippet of the movie card with the include that we created. So, back here in our media header, I can change this to all movies.
So this is what the information we're going to pull from the database. And for the snippet we'll just swap this out with include '_includes/movie-card'. All right. We don't need to add the .twig at the end, actually now that I remember, you just add that in it's a lot easier, and then boom, we have it working.
Let's go ahead and fetch all the movie entries. The way we do that is by simply creating a variable called entries, and we call the object craft.entries, and we're going to pass in the all attributes or parameter at the very end. So what this does is just going to pull all the entries.
And so we don't want that because we want actually focus on the movies. So for us to do just the movies. We need to add in a parameter called section. Inside the section we add in the quotes movies, which is the handle that we use in craft. And if there's multiple items, we can loop through these items.
And the way we loop through all of these elements is using a function called for, the four loop. So craft has a very simple syntax for that. For entry is the variable, a new variable that we created inside all the entries that we are pulling. I want you to output all of those and boom, just like that, we've just created a listing of all the movies available. So let's quickly open up our movies card. And what I want to do is replace all the values with real data and following the same idea of dynamic routing. We're going to pull in the object model here, called the entry. So that URL is going to take us to that movie.
And then for the image, we want to do the same thing. So let's go ahead and skip that for now and jump to the simple ones, the score. So entry.score. And then for the preview title, it's as simple as entry.title. Okay. So let's refresh and there we go. We have some of the titles happening, the scores are being pulled correctly.
Same idea applies for the image. So let's copy the code that we have created for the cast. So it's just a conditional and we created an avatar variable template. So if we open that up and we scroll to the top, we have that variable. So we just need to bring that over. Copy this. We're going to remove, move it from here and we're going to add it into our actor card.
So right here, this is where we want it. All right. So this variable, we can simply copy and paste it again in our movie card. Simply change that variable to maybe cover. And then instead of adding the avatar, we need to find a handle for the movies cover. But for example, this one would be movie poster. And so that would be the handle we could use.
We can also go into the custom fields and find it there under the handle column. So movie poster with a capital P is what we need to use. So entry is object and then the field movie Poster and just one image. All right. So now all we got to do is under the source, let's use the entry or actually, sorry, the variable cover that URL.
We're going to copy that tag and place it on the source set. We're going to take a look at image transformations in another time. Let's just keep it simple and keep moving. Let's go ahead and refresh our browser to see the changes. We should be able to see the thumbnails loading up correctly. There you go.
The next thing we want to do is create a conditional so that if there is no entries available, then output a message. All right so this is pretty straightforward. We create an if statement of the variable entries and we're going to add the all statement. So if entries exist, output the movie card, if there isn't any entries then I want you to output this little snippet, which is the empty message class.
Let's go ahead and just quickly add some comments so that it makes a lot more sense for us and feature developers looking at our code. Kraft gives us the ability to count the total amount of entries and output them in the front end.
We do that with the variable count and we're going to pull in Craft entries, the same section, so movies, and just before the all we're going to add the count parameter. And so what it does is just going to count through all of the entries available and we can just use that variable and add it in our header.
We can refresh the page and boom, just like that we have a total of 49 entries and we can also limit the amount of entries that we are shown. We can add in the limits at the value, this case 5 and boom, just like that. We have 5 out of 49 entries available. Don't worry about the pagination just yet.
In the next lesson, we want to actually show all the movies related to a specific actor.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS