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.