Hygraph (with Next.js) Tutorial #12 - Adding Image Assets

Key Takeaways

All right then, gang. So, we've nearly finished this little project, but there's one more thing we need to do, and that is to add some image assets so that each post on the homepage can show a thumbnail instead of this backup placeholder that we're seeing right now. Now, we can very easily add assets to a high project by coming to the studio and then heading to the assets page. And when you first come to this page, you're going to see an upload button in the middle of the screen, which we can click on to upload final assets. Now, you can upload various types of asset files, documents, videos, images, etc. But for this series, we'll be sticking to images for the post thumbnails. So, I've already prepped a bunch of these on my desktop. So, I'm just going to shift select all of these and then hit open to batch upload the lot of them. And to do that, we can just click on this upload button right here. So, this is going to take a moment or two, but once it's uploaded all of them, we should see a list of all of those images on this page. Now, currently all of those are draft images, which means they're not published and they're not public. So, if we tried to query these images from the front end, then we wouldn't be able to. But we can make all of these available by bulk selecting the lot like this and then clicking on the publish option round about here. Then we have to confirm this action by clicking on the next publish button in the model that pops up. All right. So now we have a bunch of published image assets and we can go ahead and use them in the content. So then let's head to the content. And the first thing I'm going to do is go to the page content. I know we've got thumbnails to upload to these posts, but I want to show you how we can add it to the rich text content first of all, which is this thing down here. So I could add an image to this by coming anywhere inside it and then clicking on this asset file or icon rather. And then all of our assets appear right here. So what I could do is just choose one of these. And one of them is a banner. It's this one. And then I'm going to click on this purple link icon right here. And now we have that asset embedded inside this content. So I'm going to save and publish that. Like so. And then I'm going to go over to the posts by hitting back and then going to the posts. And this time we're going to add some of the thumbnails to this. So, I'm going to delete that first of all because that is a typo. And then down here, we've got the thumbnail field, right, that we added ages ago, but we've not used yet. But now, we're going to add a thumbnail. And I'm going to select this one right here by clicking on this purple icon. And now we can see that thumbnail. And then we just need to save and publish. Voila. All done. So, what I'm going to do now off screen is I'm going to add all of the images to some of the other posts. Maybe not all of them, but some of them. So we can see those then in the browser when we view this web page. All right. So now I've added thumbnails to every single post and now I want to show those thumbnails on the front end. Now before when we made the query to fetch the pageionated post, we specified that we wanted to get the thumbnail data back, right? And on that thumbnail field, we wanted the URL property. So all we have to do now is add that property to the source of the image component inside the post list component. So let's open that component up which is inside the components folder. And down here where we have the image component, we're going to update the source to be a dynamic value. So let's first of all wrap this in curly braces. And I'm going to keep this thing right here for now. But then we'll use the post.nail property and I'm going to add a question mark after this just in case the thumbnail wasn't added. And if it wasn't, then this is not going to error out if we try to access a property on null. But then we're going to say dot URL to get the URL property at the end if it does exist. Then we're going to use logical or which is a double pipe right here. So now what we're saying is use this thumbnail URL for the image source if that thumbnail URL exists or if it doesn't exist, we're going to fall back to this default placeholder image instead. Now, if we try this at the moment, we're going to get an error. And that's because when we're using remote images for image components in a next application, then by default, those sources are going to be blocked. And we have to manually add a remote pattern to these external images to the next doconfig file. So, let's open that file up. And you can already see I've added a pattern for the placeholder image that we currently use, which is why we don't get an error for that. And now I'm going to add a new one below this to allow images served from our hygiaph CDN to be used. So I'm just going to paste this in right here. Right? And this pattern says allow any image from this kind of URL where the asterisks are wild cards. So this first section could be ABC for example. And this last section could be whatever file path. So long as they're served from this domain, it will be allowed. Okay. Then, so once you've updated this file, you might have to restart the dev server before you preview this in the browser. All right, so look at that. Now we've got all the thumbnails right here. And that looks a lot nicer. If we load more, we should get more thumbnails loaded as well. Now, some of them aren't going to be here because I didn't add thumbnails to every single one, but for the majority of them, we see that thumbnail. Also, we went to the about page before in H High and added an image there. So, let's see if that's working as well. Yep, there it is. Awesome. All right then. So that's pretty much everything. We've now hooked this application up to Higgraph, queried page content, post content, added pageionation, and added image assets. And that was all very easy to do using Higgraph's GraphQL content API. So definitely have a play around with this. See what else you can come up with. And if you'd like more content about Higgraph in the future, please let me know in the comments or on the Net Ninja board. So then my friends, I really really hope you enjoyed this series and you learned something along the way. If you did, please please please don't forget to share, subscribe, and like. That really means a lot. And if you want to access all of my YouTube courses without adverts, also get access to premium courses and early access courses as well, you can do at netinja.dev. You can sign up for Net Ninja Pro, which is just $9 a month and also half price for the first month with this promo code right here. And for that, like I said, you get access to every course without adverts, without YouTube adverts. You also get access to exclusive courses not found anywhere else. You get access to my premium courses on Udemy and also early access to all of my YouTube courses as well. So, the link to this page to sign up is going to be down below. Again, I really hope you enjoyed this series and I'm going to see you in the very next one. Heat. Heat. Heat. Heat.