Content Modeling Images

[00:00:00]
>> Scott Moss: So how about we start thinking about some more different scenarios that are interesting and but also quite common when it comes to developing a content model for a website. For instance, this one right here, this logo wall, it's images, it's scrolling, it's moving. There's some organization to it as far as the sizing, the width, and stuff like that.

[00:00:25]
So what we can do is we can create, let's create some shapes, some content models to represent this, and let's pull those down and make those dynamics. So our sales team can get on the website and add a new logo when they close a deal, right? So let's do that.

[00:00:41]
So what we wanna do is, first, I like to go into the website, the code, to see what is actually needed to render one of these, and that way I know what to put on the content model, right? So I'm gonna go look in the code. And I think that is gonna be in a component called clients.

[00:01:02]
Yes, that's in a component called clients. Yes. This is the problem I thought we were gonna run into with the hero, but we're actually gonna run into it here. So clients, here's that turbo effect thing that's going crazy. This one's interesting. So it's basically literally pulling in each one of these logos.

[00:01:22]
Each one of these is a company logo. And it's not iterating over, it was just hard code and then one for one. They all have different widths and heights and things like that. And we want this to be dynamic. We want people to be able to put whatever they want versus hardcoding it like this because otherwise the sales team is gonna contact you.

[00:01:45]
They're gonna slack you when they get a new deal, and they're gonna say, go put that logo on the page, and then they're gonna send you a blurry JPEG for the logo, and then you're just not gonna wanna do it, right? So the whole point is so that they can do it.

[00:02:00]
But there's some inconsistencies here that we need to figure out. Luckily for us, the Next.js image tag is pretty smart and it's thought a lot of this. The other problem, though, is that we're in a client component. We're in a client component, how do we get the data for a server side query, because you can't do that here.

[00:02:17]
So we just get the data client side and just use a fact or what should we do here? Well, the answer is actually simpler than what you might imagine. Just wrap this function in a server component and have that component get the data and pass it to it.

[00:02:34]
And that's exactly what we're gonna do. So let's model the data first, then we'll come back and we'll do that. So as far as the data modeling go, let's see what we need. We need the URL, we need an alternate tag, we need the width, we need the height.

[00:02:47]
Is there any name associated with these? I don't see a name. I think that's it. So if that's the case, I know for instance, most CMSs already have a built-in content model for assets. Assets are just like a built-in mode, and they usually cover at least these three things for sure.

[00:03:05]
So we don't really need to go make a custom model type for this if there isn't any more needed, okay? I don't know if Contentful lets you add an alternate tag or not, we'll see, but for the most part we should be able for free to just to add some assets and get away with that.

[00:03:22]
So, let's go try, so I'm gonna go back to Contentful.
>> Scott Moss: And at the top, you'll see Media. You can click that, you click Add assets, Multiple assets. So here I'm gonna go to Code I'm gonna go to I think this is inside of courses, I'm gonna go in there, I'm gonna go to headless-next.

[00:03:48]
And then inside of here, there should be a public folder. Inside that public folder should be an image folder, images. And here we go, we have all of the images for this app. The ones that we want are gonna be the SVGs that say customer. There are a bunch of other customers, like customer background and like some customer PNGs, but the ones for that logo wall are customer, I'm sorry, are the client SVG, okay?

[00:04:18]
Now I'm lost, let's go see.
>> Student: It's client.
>> Scott Moss: It's client. Yeah, yeah, you're right, it's client SVG. So what I can do, at least on the Mac, is I can just start here and I can go to where I wanna end and hit Shift and it'll just select them all.

[00:04:33]
I don't know how you do that on Windows.
>> Student: Same.
>> Scott Moss: It's the same? Okay, cool. So I'm just gonna select all those, all the clients that have SVG and I'm just gonna open up. And voila, we have all our logos. I'm gonna hit Upload.
>> Scott Moss: And it's processing.

[00:04:59]
It's updating, there we go. We now have logos. They are here. But like I said, they're treated like, it's literally a built-in content model. This is what I did when I built the CMS, we just made a content model called assets or media that was already there. And that's basically what this is.

[00:05:20]
They have their own fields, right? But they're not published, so let's publish them. I'm gonna go here. Look, you can do mass stuff here, why didn't it show me on the other one? It's crazy.
>> Student: Can't delete all your content.
>> Scott Moss: But you can delete your media though.

[00:05:35]
Yeah, there we go. I'm gonna hit Publish, that's gonna publish all of these hopefully, it does. There we go. So now we have that. And then you know what I'm gonna do. I wanna query these in the Graph QL Apollo studio so I can see what the query is, copy it and then bring it in so I can grab it, right?

[00:05:55]
So that's what I'm gonna do. And this solves a lot of problems for us because now we don't have to read the documentation, right? If we were using reset or something, we don't have to read the documentation on how to actually query that. But because this thing has built-in documentation, we just go in here and play around with it.

[00:06:08]
So I'm gonna go all the way back. There's an asset thing here, I'm gonna click that. There we go and I'm gonna say, this is getting an asset by an ID. We don't want that one, we want asset collection. That's the one that we want. So asset collection, and I'm gonna say where, and I'm pretty sure, let's see they all have a just file name or is this title?

[00:06:42]
>> Scott Moss: I guess that's file name and title. I don't know. But we can filter by that. So I can say, I want all the ones whose title contains clients. So I'm gonna select that. And what fields do I want from these items? I want the width, I want the URL.

[00:07:05]
I'll take the title, that'd be the alt tag. And I'll get the height. And that's it. So then here are my variables title_contains, I'll put clients
>> Scott Moss: And now I'll run this. And there we go. We got all over.
>> Scott Moss: So if it works here, it's gonna work in our app.

[00:07:30]
It's the same thing. So I'm just gonna copy this. Now that I have that. I'm gonna go back to our queries. And I'm gonna say exports, const get.
>> Scott Moss: ContentForLogoWall, or whatever you wanna call it.
>> Scott Moss: Query.
>> Scott Moss: Yes, that's got to be this.
>> Scott Moss: There we go.

[00:08:05]
There's my query. I'm gonna copy the insides of this query, and I'm gonna go make a type. So I'm gonna go to my types, I'm gonna make a logo wall query type.
>> Scott Moss: Paste that in we don't need these arguments. We'll talk about arguments in a little bit.

[00:08:35]
That's an object type. This is an array of objects and this is a pretty sure this is a number. This is a string. This is a string. And this is a number.
>> Scott Moss: There we go, LogoWallQuery. So I'm gonna take this, go to our queries, and let's make the queries.

[00:09:03]
So I'll say data = weight. What is it called? ContentGqlFetcher. So contentGqlFetcher, pass in our query here. Pass in our logo wall query that I import from types. But we do have to satisfy this constraint we'll get an error Graph QL because we're saying that this operation quick little Graph QL thing.

[00:09:32]
This is just saying, I'm declaring a variable called where, whose type is it Graph ql type and I'm passing it into this function who wants an argument called where, who is that variable. So I just need to pass in a variables that has this. So I'll say variables, there is a where.

[00:09:52]
In fact, I'm just gonna go copy what we had here. It's literally the same thing.
>> Scott Moss: And it's that. It's just variables, where, title contains, client. Cool, so we got that. Next thing I'll do my check, if not data, throw an error.
>> Scott Moss: Otherwise, return the data. I don't really care about the error.

[00:10:20]
It's just if I don't do that, the type will always be data or undefined everywhere, and I don't wanna deal with that inside of JSX.