Gatsby Tutorial #17 - Featured Images

Key Takeaways

or rather gang so now we have our projects listed on this project page but at the minute there's no images for each one so now we know how to use the image components using gatsby image and those other image plugins what i'd like to do is add an image for each of these so a thumbnail and then later on when we click through to one of these pages it's going to show a featured image a bigger image for that project as well so what i want to do is place some more images inside this folder and i'm just going to drag these in like so so we have a thumbs folder that's going to be a thumbnail for each of those projects that we're going to show on this page and then we also have a featured folder that contains a featured image for each project and we'll show those on the details pages for each project later when we click on these now if you want these images you can get them from my github repo over here you just need to select lesson 17 then go into the source folder then into images and they're all here so if you go to the root gatsby tutorial you can just download a zip file right here and grab all of those images all right so let's get rid of that now and let's start to use these images inside our projects so the first step is to go to our project markdown files and add in some more front matter properties so i want one property which is going to be for the thumbnail and one for the featured image so this is going to be a path relative to this file to the image that we want to use so in the case of the thumbnail we need to come up a directory outside of this projects folder then into images then we want to go into the thumbs folder this thing right here and then the file that we want is going to be coffee so coffee.png so forward slash coffee.png so that is going to be our thumbnail for this page right here we also though want a featured image which is going to be for the details page so i'm going to say featured img and that's going to be upper level into images then into featured and then we want coffee hyphen banner.png so that's what this one is called right here all right then so i'm just going to do the same thing right here for each one of these different projects so i'm going to speed this up so you don't have to watch me write all of these out from scratch [Music] all right then so now we've added in all of those different properties to our different projects we can go ahead and start to use them and we're going to start to do that on the project index page right here so the first thing i want to do now is test all of this out in graphical to see if we can get that image for each of our projects so i'm going to grab all of our current query for this page i'm going to go to graphical and i'm going to paste this in right here all right so currently we're grabbing all the projects and from the front matter we're grabbing the slog the stack and the title now if we scroll down here to see where we're getting the front matter we also now have this something right here so i could grab that thumb now when gatsby sees this and it sees the value of that to be a reference to a file if we take a look at this it's a reference to an image file it turns it into a file node and we can use the child image sharp on a file node so if you think of this as a file node if we go into the thumb we should see now child image sharp and that's the plugin we're going to use on images so it turns this into a file node so we can reference this file right here and our image plugins can work its magic on it and we can get those properties back using child image sharp and use them in the image component to show those images so i'm going to open up child image sharp like this and i'm going to go with fluid and to begin with i'm just going to go with source so let's select that right here and i'm going to play this and let's see what we get yeah we get the source for those images so what i'll do is grab all of this again and copy it and i'm going to go back to the project index page let me open that and i'm going to replace all of this with the new query now remember we don't just want the source i only use the source so we could play around with it in graphical in fact what we want is to use that fragment much like we did inside the index page this thing right here inside fluid gatsby image sharp fluid and remember this thing gets us a whole series of different properties that the image component is going to use to display that image so let me copy this thing gatsby image sharp fluid and paste it inside here all right then so now we should have access to all of this stuff inside our projects component and we can use it to output an image for each individual project now before we do that i'm just going to go over to the browser because we log out the data i want to see all of this new stuff right here in the data to make sure it's working so let me come over to the browser i'm going to inspect and go to the console open up this object and we can see the projects the nodes let's go into one of these we can see the front matter which is what we need to go into and now we see another property called thumb so once we go into front matter we need to go into thumb then into child image sharp and then fluid and this is the thing we pass in to the image component all right so remember we go into front matter on the project then we go into the thumb then into child image sharp then into fluid okay so let's try passing this into the image components first of all i'm going to import the image components so import image from gatsby hyphen image this one here okay and i want to place the image above the h3 so let's do this here image and close it off then we want to use the fluid prop because this will be a fluid image and we want to take the current project which we pass through to the map method so we take that first of all and then remember we want to go into the front matter then the thumb property which we have now then child image sharp and then finally fluid so that is the thing we pass in to the image right here so hopefully now we're going to get that image for each of those different projects now if i close this and open up over here we can see all of those images on this page awesome so that's all working now if i go home and then go to portfolio project yep still all works and by the way you might have noticed when we went to home then we see the image blur for a split second before it comes in now it's not doing now but if i refresh you might see it again yep it blurs for a split second and then comes in and i think it does the same thing for those yes it does and that's another way that gatsby is optimizing our images because it might take a split second or half a second for the images to download and in that time gatsby shows a really low resolution blurry image which downloads pretty instantly because the file size is so small and it shows that as a placeholder so that users know an image is there while the image loads so that's another way that it optimizes the images for us but anyway now we have images for each one of these things right here a thumbnail image for each one the next thing we want to do is move on to create a page for each of these individual projects so that when we click on one of these we're going to get a page a details page for that project and to do that we're going to have to create a project details template file