On this Craft Cms lesson you'll learn about the DRY methodology and how we can apply it using includes.
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!
Hey guys, on this lesson, we're going to take a look at components in Craft. There's three types of ways that you can create a component and repurpose it across your site. The one we're going to take a look at it's called includes. So what I'd like you to do is open up on the work files, the template called cast.twig so you can follow along.
All right. So what we want to do is pull or fetch the image of our cast thumbnail, and we can do that by creating a variable.
Now, what this does is just because we're inside the actual dynamic template of casts. We can actually just use the entry as the object and then the avatar as the field. And then one as how many items we want to pull in this case we just want one.
And the reason why we can do one and all. It's because if we go to the C panel, you notice that when you created the custom field, you have a limit of one or unlimited. So that's why multiple objects can be pulled into this. If we had multiple images.
Now, right now, what I want to do is just create a conditional and say if the avatar exists, so if the image exists or it's been assigned to these field, We want to output the image source, and this is how we pull it using the variable avatar.url, and just like that, we can also pull in the alternative tag from the title, this alternative tag, you can find it directly on the assets itself. So it would open up the actors entry.
We can see that image has additional information that we can change. And in this case, we just want to make that cleaner, right? So Peter Jackson will be now our alternative tag.
Let's go ahead and inspect this template. If we right click on the image itself and open up our inspector tool. We can see the image source is being pulled from the Amazon S3 server.
So this is working really great. If we remember our actual template, our webflow template, we have the background image, the blurred background image is missing. So in order for us to bring that in, we do the same process, but for the background hero. So right here, we have the hero background blur, and all we have to do is replace the URL.
All we got to do is just adding our curly brackets. Avatar.url and just like that we refresh and we should have that background also being pulled. Thanks to that variable that we have set on the very top of the document.
This little snippet of code can become a component similar to how we do that on Figma and webflow. So this little components or little snippets of coats, we need to turn them into includes. And the way we do that is we go over to our folders and we're going to create a new folder and we're going to call it includes or rather _includes.
Inside this folder, we're just going to create a file.
There we go. So now what we want to do is just paste in that little snippet of code. Bring it over to that include, clean it up just a little bit, save it. And the way we include it into this template is by simply using the include quotes the, folder name _includes/actor card.
Let's go and add the link of the actual entry of this actor. So this would be entry.url. So if we refresh this, you'll notice now that under the URL on the browser, it's now directing it to the correct dynamic template. Let's head over to the cast entries. Let's click on that globe icon and it looks like it's working really well.
So the next thing I want to do is simply open up our playground. And I want to find all the components that we want to transform into includes. So for example, the actor's card we have that done already. Now we need to do the same for the movie card and for the reviews card. So I'm going to just simply copy the snippet and then do the same process with includes, create a new file and rename that to _reviews-card.twig, same thing with both the slide show and the movie card.
And after we've done that, we can go to our projects folder, and we're going to notice our templates now have. Those includes.
If we also see our tower, the folder has been updated with a couple of new folders. So it's always important that you have that in mind, whenever you're working. Making sure that all your updates and new files are being fetched and updated through tower. Alright, let's jump to the next lesson so we can create our movies template.
I'll see you there.
Access our premium community including bonus tutorials, project files & weekly resources.UNLIMITED ACCCESS