2.5 Add Featured Images to Blog Entries
A common aspect of many blogging platforms is the ability to add a ”featured image” to each post. In this lesson you’ll learn how to add this functionality to your Craft blog.
1.Introduction1 lesson, 01:13
2.Building Blocks7 lessons, 56:55
3.Taking Templates Further6 lessons, 36:35
4.Conclusion1 lesson, 02:43
2.5 Add Featured Images to Blog Entries
Hey welcome back to build a blog with Craft CMS. In this lesson we're gonna add support for featured images in our entries. Now because we're working with images as usual, we gonna need to set up an asset source. Sorry, we'll jump into our settings. Into assets and we gonna set up a new asset source. This one we'll name featured image. We'll leave the handle as the auto-completed handle there, and now we're gonna need to set up a folder for our images to be put into. So, in our htdocs folder, we'll go into the images folder we created earlier, and set up a new folder named featured. Now we can go ahead and put that path into our file system path field here. [SOUND] And then as we always do the assets we're gonna use our base url variable, and then we'll copy the system path onto the end of it. And hit save. Next up we're gonna need to create a field to hold our featured images. So we'll go into Settings, Fields, add a New Field. And once again, we're gonna call this FeaturedImage. We'll scroll down and we'll set this field type to Assets. And then we'll uncheck all, so that we can specify our featured image source, and we're gonna choose the featured image upload location that we just created. And we're gonna limit the number selectable assets to one, because they can only be one featured image per post. And we'll just switch this to thumbnails to make it a bit easier to see what images you are choosing from, if you're just selecting a featured image from images that you've already uploaded previously. And finally, we'll just add a little instruction, we'll just say, select a featured image. And then we'll save. Now our featured image field is ready, we can add it to our blog entry type. So back into our settings, our sections, and then we're gonna edit our blog entry type. So here's our new featured image field, and we just drag that in and we'll put it above the body. So we'll save that, and now that's ready to go. Now, just as we did with our entry teaser, we're gonna create a partial template file to display our featured image, that way anywhere we wanna put a featured image, all we have to do is include our featured image partial template file. So we'll go into our craft folder, templates, partials. We're gonna create a new template file. And we're gonna call it _featured_image. And now, let's open that up for editing. As usual we'll start by switching on our syntax highlighting. Now, the featured images and not compulsory, the user does not have to upload a featured image. So the first thing that we need to do before we try to output any HTML for our featured image, is check whether or not there is one for the current entry. So we're going to create an if statement, and what we're gonna to do is check if the entry featured image has any length. If it does, that means you have a featured image, and you're right to go on and output your html. So first we'll just end that if statement. And then in here, this is where we're gonna start outputting our actual featured image code. So just as we've done with all the images that we've output so far, the first thing we're gonna do is create a variable to hold our image, and set it to an empty string. So we're gonna say set featuredImage = empty string. Now before we actually start iterating through our entry featured image array, we're gonna create something called an image transform. Now craft is a ability to resize images on the fly. So for example, the content area inside out parts is currently 752 pixels wide. So there's never gonna be any more than that amount of space for an image to take up. So there's no point in having a 1,200 pixel wide image slowing down the loading in the performance of the sign. But you also don't wanna have to manually crop every image that you ever upload to 752 pixels wide. So Craft can actually take care of that resizing process for you. So what we gonna do is set another variable, and we're gonna call it image_transform. And then we gonna set its value by adding a pair of curly braces, and then inside that, we're going to include the parameters of the transform that we want Craft to run. Now the first thing that we're gonna do is specify the mode of transform that we want Craft to apply. There are a few different modes that let you do things like hard crops, and fitting the image, and so on. And I'll include a link bellow this video where you can look at the specifics. Now we're going to go with my mode fit. Now what this is gonna do is take the width that we specify, and just keep the rest of the image in the same aspect ratio. So it's just going to shrink the whole image down to fit the width that we give it. So then the next thing we need to do, is specify that width, and we're going to say with 752. There are also some extra parameters that you can set when you creating a transform, and also I'll include information in the link below this video to that. But for our purposes, these two parameters are going to be sufficient. Next, we're gonna start iterating through our entry featured image array with the for loop. So we're gonna say for asset in entry.featuredImage. And then we'll close our for loop. And then inside our for loop, we're going to change the value of a featured image variable from an empty string to the URL of our transformed image. So we'll say set featured image, and this time rather than using our typical asset.url, we're gonna say asset.getUrl and then in here, we're gonna add the variable that we set up here for an image transform. Now Craft is going to recognize those parameters being passed through to get URL function, and it will automatically resize any image that's uploaded as a featured image down to 752 pixels wide, while it's maintaining the original aspect ratio. So now, all we need to do is create an image element, and then output that featured image variable. And then for the Alt value, we're just going to use the entry title. Now that's our featured image partial complete, and all we have to do is include it into our entry teaser. So we're going to include it above our entry content div, and we're gonna say include. And then we'll just specify the path to our featured image partial. So we'll say partials/_featured_image.html. So that's all that code done, all we need to do now is upload an image as the featured image on one of our posts. So let's go back into the back-end, go into our entries, we'll select a post. Now here is our featured image field, we're gonna upload a file, and I just have a few here that I've downloaded from unsplash.com. And there in their original large file format, but because of our image transform, I don't have to worry about how big they are, because I can to select it, and Craft will handle the transform for me. So I'm gonna select that, now even though that's been uploaded at it's original size, when save this, and we go and check out a front end, just give it a moment to process the transform on its first load, and now there's our featured image. Now if you view this image in a new tab, we can see that it's not a huge image, it's a version of the image that's being cropped down to our 752 pixel width, so that it fits beautifully in our layout. So that is our featured image up and running, and we're almost done with what we want to have included in our entry teaser. But there is one more thing. We know that for each one of our posts, we've allocated the series of categories to that post. So what we need to do, is display a list of those categories at the bottom of the post here. So in the next lesson, we're gonna create another partial that's gonna display our entry categories. I'll see you there.