Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "Using External Images" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason demonstrates how to add image queries to a page using GraphQL, and Cloudinary.

Get Unlimited Access Now

Transcript from the "Using External Images" Lesson

[00:00:00]
>> Jason Lengstorf: Now that we have access to the cloudinary assets, let's jump into the pages. And I wanna pull up an image on this page. So I'm going to get GraphQL out of gatsby. And then I also wanna get image from gatsby-image. And because this is a page component, I'm just going to use a page query.

[00:00:32] So I can export a constant, I'll call it query, use graphql. We could also do this with a static query. It's kind of a preference thing at this point because we know what the image is gonna be. And I'm gonna set up a query, and I'm gonna alias file to image.

[00:00:50] So what I'm doing is I'm gonna start with maybe I'll start over here so it's a little easier to see. I'm gonna set up a file query and the file that I wanna use, I want to match the name. And I want the name to equal the grounding.

[00:01:08] And then inside of this, I want to get the childCloudinaryAsset, fluid. And then there's a a kind of convenience pattern that we're gonna use that I'll show you in a second. But this is a little unwieldy, and it's not super clear what I'm getting. So I'm gonna alias these.

[00:01:28] Change the name of this one to image, and this one to Cloudinary. And you'll see here it's file childCloudinaryAsset. When I've aliased them, it's the same data. But now the object comes back with a little more. It's a little more descriptive about how we're using it. So it's a little easier to reason about.

[00:01:46] So I'm gonna do image. Actually, I can just copy this out.
>> Jason Lengstorf: Don't need a name. So I'm gonna get rid of that. And then it doesn't work in graphical. But when you're working in Gatsby, some of the transformer plugins will export what's called a GraphQL fragment, which is kind of a convenience way.

[00:02:07] To wrap up all of the image file or the image fields that you need into a simplified fragment. So, the way that this works is we can type in cloudinaryassetfluid and it will just expand into all the fields. So instead of having to go in here and say, I want the aspect ratio, the base 64, the sizes, the source, and the source set, I can instead just use that fragment and it'll expand to all of those fields for us.

[00:02:37] It's just for convenience, not necessarily required. We could do it the long way if we wanted. So once we've written that query, it's gonna get injected as a data prop. And then I am going to add an image field, so this is the Gatsby image component and we're just gonna stick the fluid that we got into it, so data image cloudinary fluid and as an alt tag for people using screen readers, we're gonna say it's a Negroni, I always put a period at the end of my alt tags.

[00:03:14] I read once from somebody who's using a screen reader that that adds a pause, instead of just like slamming into the next word. I have never verified this myself, but I've just always done it. If somebody who uses the screen reader wants to correct me, please find me on Twitter and let me know of that's not the right way to do things.

[00:03:35] So with this, I don't think we need to restart, I think it'll just work. So I'm gonna save it, we've got our query, our query is coming in his data, we're using it in our Gatsby image prop, and if I look at the homepage, there we go great.

[00:03:51] But this is too big. Like I don't want this to bury my whole screen. So instead I'm gonna add some transformations. I wanna make the aspect ratio a little more narrow. So to do that, I can just jump in to this fluid tag and I can say, add some transformations, and the transformations that I want is I want an aspect ratio of let's say 18 by 9.

[00:04:17] So kind of narrow, but I think that's good. We want the crop to be fill instead of squashing. And then because this, actually let me show you how this looks before I do it.
>> Jason Lengstorf: So, this is the default crop, it just kind of, right? But Cloudinary will do this thing where it'll focus on the subject of an image, which is kind of nice.

[00:04:42] So, check this out, if I run g. Where is it, g auto and I tell it to focus on the subject. G is short for gravity which is like where the image is focused. So I have got g auto and I'm focusing on the subject and then I can come back here.

[00:05:02] And it doesn't change much but it just nudges it a little bit. It's way more obvious if you've got pictures of people because it will pull their faces into focus. Again really cool API we're not really doing too much with it today but it's a nice way to shortcut a lot of hassle in your art direction on your photos.

[00:05:23] So now that we've got this, I want to do this one more time. And I want to pull it into the the history page and let's use a different one. So I'm gonna grab this. Let's get graphql out of gatsby and then let's get image out of getsby image.

[00:05:43] So this one, I wanna use this Negroni-naff, so I'm just gonna grab that one. And this one, I don't need any transformation, so I'm just gonna get rid of them. And then down here, we've got our data and I can just go right over the index We can copy that straight out.

[00:06:08]
>> Jason Lengstorf: So now when I click through the history, we've got an image. So this is a, well I was zoomed way in, that's why it was so big. [LAUGH] So now we've got a kind of a a simple site with good looking assets that aren't taking up a ton of space on the computer.

[00:06:28] And we can see if we look at the elements at the the source that what Gatsby image is generating. So this is the full rapper and inside of it, we get a placeholder that occupies the aspect ratio size of the image to keep the content from jumping before the image loads.

[00:06:46] So that's a really nice thing to have. Then it has a base 64 encoded, small version of the image. So that we can do this fade in. And this is a technique that was popularized by medium. It's called the blur up technique. And what it means is you take a version of the image that's like 30 pixels wide, and then you just blow it up and the browser to be helpful because it knows that a 30 pixel wide shown in 650 pixels is gonna look like garbage.

[00:07:17] Adds a blur. So we don't have to do anything special. We just say like hey, show this tiny image really big in the browsers like that's a bad idea. You shouldn't do that. Let me help. Then, once it's in the viewport, which in this case, it's always in the viewport cuz it loads at the top.

[00:07:32] Gatsby will load the full size image in a non blocking way so the page will render and then it goes to get images. When the full size images loaded, it fades in. So if you're on a slower connection, you'll see that this drastically increases the speed of loading the page and doesn't take away from the quality or the beauty of the images.

[00:07:53] So, with that, I think we can save our work, and then we'll move on to the next thing.