This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Adding Images to MDX Posts" Lesson
[00:00:00]
>> Jason Lengstorf: The first thing that we wanna do is we want to kind of look at what this might require. And so I'm going to go back to Unsplash, we've got one here. And I'm gonna just type hello world. So what I'm doing is I just wanna get a couple images that we can throw into our blog.
[00:00:20] So I'm gonna download a couple these.
>> Jason Lengstorf: And then let's maybe look at another one. This looks good, let's grab that one.
>> Jason Lengstorf: And so we've got these two images, that'll be the end of our adventures with Unsplash.
>> Jason Lengstorf: And so in my post, I want to use these images.
[00:00:45] And so I'm gonna create a new folder,
>> Jason Lengstorf: Inside of each,
>> Jason Lengstorf: Post, and again, the benefit of this is that it allows us to keep the images where we're going to use them. So if I'm trying to figure out where the images are for this post, I don't want to have to go up to this images folder.
[00:01:11] And on a sufficiently large site, this might be hundreds of images if it was everything from every post. So that gets a little unwieldy. So instead, we wanna use this stuff here. And I am gonna rename these a little bit. We'll keep the author's name, but we will change up the descriptions so that we actually know what we're looking for.
[00:01:29] And so that I don't have to type random hashes. Lets go in here and lets say I want my image to be images and jon-tyson-hola.jpg. And then in another post, I wanna do the same thing. I'm gonna add an image to my frontmatter. And I want this to be images/pablo-gentile-hello.jpg.
[00:02:03] I believe that's JPEG, yes. So now we've got our two posts, and they've got images specified. And I wanna show you something that is really fun about this. Which is that, without having to do anything, Gatsby's going to make our lives easier. And the way that it will do that,
[00:02:26]
>> Jason Lengstorf: Is I'm going to come out here, look into my,
>> Jason Lengstorf: Collapse, we're gonna just write up a new query. And the query that I'm gonna write is gonna be for allMdx. And I'm going to get my nodes, my frontmatter. And then I wanna get, I need to refresh, wanna get my image.
[00:02:47] And then in my image, I'm gonna get childImageSharp. And then in here, I'm gonna get the fluid size. And then I'm gonna get the srcSet.
>> Jason Lengstorf: And now, without me changing anything, no new config or anything, because Gatsby recognized in that frontmatter that we were pointing to a local image, the transformer knows to make those transformations and give us the optimized version of that file.
[00:03:14] So we don't have to do anything, we just get to use it. So now we can go into our, let's see, where where do we wanna start? Yeah, let's go into our post-preview. And we're going to install one dependency, which is gatsby-image. And what gatsby-image does is the same thing as gatsby-background-image but for regular images.
[00:03:41]
>> Jason Lengstorf: And so once we get this, we can jump into our post-preview.
>> Jason Lengstorf: And we're going to import Image from 'gatsby-image'. And then down here, I want to add in this image. And so we're gonna link the image.
>> Jason Lengstorf: So we'll just go to post.slug, like we do anyways.
[00:04:09] And then I'm going to add a little bit of CSS here.
>> Jason Lengstorf: And that CSS is going to be just to make sure that the images kinda look right. So we're gonna do margin 1rem, rem 0 0, and we'll make the link 100 pixels wide. And inside, I'm going to add the image.
[00:04:42]
>> Jason Lengstorf: And then we need to get this fluid from somewhere, I don't know where that's gonna come from. But then we also need to set just a couple styles. And this is just kind of to override a few things that we want, we don't want extra margin here.
[00:05:00] So everything inside of this image, we're going to give it a margin-top of 0. And then we also need to add an alt tag, because we always want that, an alt tag. In this case, because it's a post image, we're gonna use the title as the alt tag.
[00:05:16] Ideally, that is not how you would do it. You would actually write an alt tag for every image, and you could do that by adding it here as an image alt or something. I didn't wanna get too deep into the weeds, cuz I know that I'm already making you write a bunch of CSS and stuff.
[00:05:31] So [LAUGH] just know you should be writing custom alt for every image, it's very helpful.