Loading video player...
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.
In this Hygraph CMS tutorial, you'll learn how to create a simple blog site by hooking it into a Next.js application and make GraphQL requests. πΏπ Get early access to the full course on NetNinja.dev: https://netninja.dev/p/hygraph-with-next-js-tutorial π₯π Get access to premium courses with Net Ninja Pro: https://netninja.dev/p/net-ninja-pro/#prosignup ππ Course files on GitHub: https://github.com/iamshaunjp/hygraph-with-next ππ Hygraph Docs: https://hygraph.com/docs π§ π Git and GitHub Masterclass: https://netninja.dev/p/git-github-masterclass π§ π Next.js Masterclass: https://netninja.dev/p/next-13-masterclass