Styling Images

[00:00:00]
>> Now that we've got this ability the images are here and they're actually being like pulled in and and everything is what we want. I wanna start showing these on the site, so Gatsby has multiple ways that we can make this happen. The first one that I wanna do is I just wanna show this Corgi image which is here, we've got this Corgi image.

[00:00:23]
Now I wanna show this on the homepage in a little circle, right, so to make that happen, we're gonna have to write some CSS, and that's okay because we know how to write CSS. So I want to get into my index .js. And I'm going to, well actually, what let's just write the styles first because we know we're gonna do.

[00:00:44]
So I'm gonna go in and create a new sculpt thing I'm gonna call this index.module.CSS. So we're gonna use a CSS module for this, and I want to have support for an image wrapper class. And inside of this I'm gonna use display flex will use align items center and justify content center.

[00:01:10]
Cuz I just want this thing to be, whatever area it uses, I want the image to be in the center of it. Then inside of my image wrapper, I wanna target the Gatsby image wrapper. So Gatsby by default is gonna add markup to show the placeholders and things like that.

[00:01:33]
We'll look at this in a second, but I just happened to know that it adds a data attribute. And the reason I'm using the data attribute is that I don't want this to be a mashed up by CSS modules. I wanna target the actual element in here, not a class name that will get messed up on me.

[00:01:55]
So then, we're going to set a border of three picks solid, and I'm gonna use the black color. And then I wanna set the border radius to 50%. And I think that should do it, so let's save that then I'm gonna import this in here. We're gonna get the image wrapper now, a note here.

[00:02:24]
Do you see how I'm camel casing image wrapper here? But I wrote it as kebab case here, that's convenience, because I really don't like writing Camel case in CSS It feels weird to me. I equally don't wanna have to do like a race election to get a named kebab case class out of here, so it just handles that, convert kebab case into camel case for me, so that I don't have to worry about it.

[00:02:58]
Then once I've got my style, I'm gonna be able to do and I'm unable to pull in an image. So what I wanna do is I'm actually just gonna use the simplest possible form of this, which is what's called static image. And static image is what I would urge you to try to use most of the time.

[00:03:17]
As long as you know the name of the file, you are probably gonna be happier if you use static image because it's just simpler. It works just like a regular old image and to show how that actually works, let's get into our layout, and I'm gonna just add a div.

[00:03:34]
We'll give it a class name, image wrapper. And inside of it, I'm gonna use a static image, and this right off the gate is exactly like an image tag. So I wanna go up a level to images and then I wanna get this Ivana La photo. And for my alt, it's a Corgi sitting on a bed with red paper hearts all over it, and it looks on unused.

[00:04:11]
Right, so that's a descriptive alt text for anybody who's using an assistive device. But then what I can do is I can actually go a little bit further with this. So I wanna tell Gatsby that for the placeholder, I'm gonna use the dominant color. So whatever the dominant color in this image is I want that to be what the placeholder is.

[00:04:30]
I'm also gonna set the width, I want the width of it to be 300 pixels and I also want the height to be 300 pixels. So rather than me having to go and restyle this stuff on my own, I can tell Gatsby like, hey, take this image and just make it a 300 pixels square.

[00:04:46]
And look at that, it automatically did all of that resizing for us and if I reload the page here. You can see how that kind of loads in pretty quick, so let me actually build this because, well, let's do two things. First, let's look at what Gatsby just built for us, so here is the image wrapper div that I added.

[00:05:11]
Everything inside of this, is a Gatsby image, so let me edit as HTML. And now that's too hard to read, so let's let's break it out like this. So we have a Gatsby image wrapper, that's where this data Gatsby image wrapper comes from, that's what I targeted, so that we can style it with the border.

[00:05:30]
And then we have our placeholder, which is just empty, it's a transparent box to kind of hold the space. Then we've got a, sorry, this is the placeholder, and the placeholder is empty according to this, then we use a picture tag. So the picture starts with image WebP, so if the browser hits image WebP and it understands what that is, it will use this source.

[00:06:08]
If it does not understand image WebP, it will then fall back to the original image, which is the JPEG. So it is effectively saying us, like show this placeholder and then that transitions out to zero and you can kind of see this happen here, where it fades out.

[00:06:32]
And then the image fades in, that's Gatsby saying like wait until the full image is loaded and then faded in on top. Then we have this picture that will optimize for the smallest file size and fall back to a bigger file size if the browser doesn't support it.

[00:06:49]
And then we have no script, so if the image or if JavaScript is disabled, we will still get our images loaded. So it's not like we're saying by using this Gatsby approach, we lose the ability to display images without JavaScript. So there's a fallback that will just show these images and still it's responsive, so we just won't get placeholders, that's the main difference.

[00:07:16]
And finally, the script here that causes Is the element once it loads to swap out. So Gatsby does a lot under the hood, there's a lot going on that we don't have to care about or think about, that just makes our lives easier, right, that's pretty nice.