This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Styling Post Images" Lesson
[00:00:00]
>> Jason Lengstorf: The way that I want this to look is I wanna show the preview to the left and the text, like the title and excerpt and link, to the right of that image. So if I come in here, I want the image to live here. And that means that I'm gonna use Flexbox again.
[00:00:15] So I'm gonna put the image here, and then I wanna div that will contain all of this text so that I can put that to the right of it without having to do floats or anything weird like that. So we can come up here to the article and I'm going to set the display to flex and then I'm just gonna override this knowing what I am about to do and how that's gonna affect things, I'm just gonna get rid of that margin.
[00:00:46] And then here I want a div.
>> Jason Lengstorf: I'm gonna to wrap that around the whole thing, and I think that's everything we needed. Let's take a look.
>> Jason Lengstorf: Nope, it doesn't like, yes. Because we haven't actually pulled in our source yet. So we need to actually get that.
[00:01:11] And to do that, we're gonna go into our posts, and we just need to add in the image. So I'm gonna get the image, I'm gonna get the childImageSharp and get the fluid, and then I want the Gatsby Image Sharp Fluid_with Webp, okay? Let me just verify that I didn't typo any of that, good.
[00:01:41] Yeah, let's play with some settings too, like let's resize this image and stuff. Let's make it square, so we're going to make our images a 100 pixel by 100 pixel square thumbnail. And then I want to change the colors on it too. So now I'm going to make it a duo tone image, and I want the shadow to be this color, let's call it, yeah.
[00:02:08] 663399, and then I'm going to set the highlight to be this DDBBFF.
>> Jason Lengstorf: So I've got my fluid call and I'm able to just kind of set some things on here, what I want it to look like,and upon doing that, that's going to give me back this image.
[00:02:32] And then I just need to come back down here and, let's also name this. I'm gonna alias this to sharp because it's just easier to type. So then I need to grab the image out. And here we go for a matter image, right? So now we've got our post, whenever we do the static query, we're also going to get image data back for the post, which means that in the post preview now I have,
[00:03:04]
>> Jason Lengstorf: Post image sharp fluid. Because again, I did, discket becomes the post and then we set it to post ImageSharpFluid, so when I drop this in here, I'm gonna have to stop and restart the server, cuz we just changed the Graph 2.0 query. And let me fix that warning real quick, because we stopped using link in index, and I just don't want that to be, we're not using that anymore, so we can drop that out.
[00:03:39] So now when we go to our post preview. When we reload. Okay that's closer but that's definitely not right. Like this is kind of a big mess. So let's figure out what I did wrong and I'll tell you I set this to be 100% as opposed to 100 pixels, so there we go.
[00:04:02] So by setting this to 100 pixels, now we have these kind of dual tone images set up that are displayed here. And again, like we didn't have to do any image processing, we didn't have to add a whole bunch of extra stuff, we just use Gatsby's built-in performance optimizations to load these images in a way that is better for performance.
[00:04:25] And if we look at the sizes on these, these images are, they're not huge. But you can see, too, what we're actually setting out, we've got the sizes, the source that gets set up to everything from 25 pixels wide all the way up to 4, 032 pixels wide, cuz apparently, that's how big the original is.
[00:04:52] We have a fallback source. We have our alt set, and then it does some kind of art direction stuff with the picture and all those good things. And what that means is like that's how we get the web [INAUDIBLE] All this is just being done under the hood for you.
[00:05:06] That's what Gatsby Images is built to do. And if we look at the size, these images are 2 kilobytes as opposed to being whatever, however many megabytes they were as originals. Plus we go to do some cool art direction and kinda make it sort of matchy matchy with our header, which is really cool.