Check out a free preview of the full Introduction to Gatsby course:
The "Adding a Hero Image Box" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason uses creates a hero image box for the home page using components and applies styling rules to control its appearance. - https://github.com/FrontendMasters/gatsby-intro

Get Unlimited Access Now

Transcript from the "Adding a Hero Image Box" Lesson

[00:00:00]
>> Jason Lengstorf: So the way that we're gonna add a Hero Box is to start we're just gonna create a new component called Hero. And that is going to,
>> Jason Lengstorf: Live in our Components folder. And as we import React from 'react', queue Enrique Iglesias playing in the background and I import the, wait what am I doing, that's not what I want at all, I wanna be over here.

[00:00:30] So I'm going to,
>> Jason Lengstorf: Import styled is what I wanted. I'm gonna import styled from '@emotions/styled'. And then we're also gonna grab just a handful of things from Gatsby. So we want the link component, we want the graphql template tag, and then we're gonna useStaticQuery in here too,

[00:00:56]
>> Jason Lengstorf: From Gatsby.
>> Jason Lengstorf: And then, let's set up our Hero, which is going to be a react component. We don't know if it's gonna take any props yet, but let's start there. We're going to,
>> Jason Lengstorf: Let's just return to start a div. And so this div that we're going to return is going to contain some text.

[00:01:32] And so what I want to do is I wanna take this copy here on the homepage, that looks a little too much like a blog. So what I wanna do is I wanna lift this out and put a big beautiful image behind it and get us to a point where, it kind of looks like a homepage.

[00:01:49] So we're gonna take this content and move it into its own place. So let's start by just kind of grabbing the things out that we want, so let's rewrite a little bit of copy. We're going to say Frontend Masters + Gatsby and then show a little love so we'll use the hearts HTML entity.

[00:02:12] Then let's add some text, we're gonna say, Hello Minnesota, and we will link to the About page, and we'll say, Learn about me.
>> Jason Lengstorf: And that's gonna set us up to kind of be at least the basics of what we're trying to do here. So let's export default Hero.

[00:02:42]
>> Jason Lengstorf: And then in our layout, we're going to pull this in. So now that we've got a component to us, we can import our Hero. We're going to pull that in from Hero.
>> Jason Lengstorf: And, I would like to drop this where?
>> Jason Lengstorf: No you know what? Let's not use this here, because we only wanna use this on the homepage, so why would we put this on the layout?

[00:03:11] We don't want this on every page. So instead, let's close the layout file altogether, we're not gonna use it. Instead we're gonna go down into Pages and go into Index. And we're going to import our Hero from now it needs to be components/Hero. And then we're gonna use that by just setting it outside of the layout.

[00:03:37] Now the reason that I do this is because, if you remember we told layout to constrain the width of things, but I want this image to be full width. So I'm just gonna drop it right out here, but that means that now I need to put in a fragment to enclose that otherwise react is gonna yell at us.

[00:03:57] So in doing that, now we've got this section up top. We've got our heading up there. That also means that I can drop out this stuff. I'm gonna just keep the blog part.
>> Jason Lengstorf: Okay, getting closer. So now we've got a header section we're gonna read the blog.

[00:04:20] Let's grab an image for this. And so the image that I'm going to grab is an image of Minneapolis. So I'm gonna go to Unsplash, and I'm going to search for Minneapolis,
>> Jason Lengstorf: And let's see, this one looks good. Lets get this one.
>> Jason Lengstorf: And then, we need to be able to access this, so a few things are gonna happen.

[00:04:46] I'm going to just start closing out all the stuff we're not using anymore.
>> Jason Lengstorf: Let's get down to just the Hero and the index. So in my hero, I wanna set this background image on this thing here, so I'm gonna create a new react component. Now I could put this in a different file, but I don't really wanna deal with that so instead I'm going to do a styled ('div') and,

[00:05:22]
>> Jason Lengstorf: Let's just make this background image. And where am I gonna find this, right? So if I want just an image, Gatsby is going to put anything in this static folder, it's gonna make it available, so let's create a new folder, we'll call it Images. I'm going to take this image that we downloaded and I'm gonna drop it right in here and then we'll keep the photographer's name but we're just gonna change this to be mn.

[00:05:59] So that means then I can get images and it was /NicoleHarrington mn.jpeg.
>> Jason Lengstorf: So let's drop this in, we gonna use this image background now, and let's see what happens. I bet it's going to look bad. Yeah, it looks bad so let's make it look better.
>> Jason Lengstorf: So the first thing that we wanna do is we want to make sure that we're actually showing the image.

[00:06:33] So let's set the background position and I looked at this ahead of time and I know what it needs to look like, so it's gonna be 20% offset from the top, and then we're gonna center it horizontally. Then we're gonna set the background size, my background size needs to be cover, and what cover means is the image will be as big as it can be to occupy all available space.

[00:07:01] And that means if it's wider than it is tall, all of that extra height will end up being cut off and hidden. And that is nice because what it means is we're still not there but now at least you can sort of tell it's a photo of a city, so we're getting closer.

[00:07:17] So next I would like to add a text box which is gonna kind of give us the spacing and center this text, because we want this text to be in the middle and lined up with everything else on our blog. So, we're gonna wrap this thing in a text box and the way that we're gonna do that is, we're just gonna do another styled ('div'),

[00:07:43]
>> Jason Lengstorf: And let's set this one to be, I'm gonna give this one a background image of a linear gradient because we want to make sure that there's enough contrast on the text to actually read it. So we're gonna set this to run to the top, we're gonna start it at, let's see ddbbffdd.

[00:08:07] If you haven't seen this before, this is hex with an alpha channel, so I am setting this to be kind of a high opacity. And then it's going to fade to, it's going to start at the 2rem from the bottom and then that is going to fade to a ddbbff00, which is 0 opacity.

[00:08:33]
>> Jason Lengstorf: I'm gonna set this to be display flex, because I want to be able to position the content vertically and horizontally without having to do a bunch of weird, hacky things. I'm gonna set the flex-direction to column because I wanna control it up and down.
>> Jason Lengstorf: I'm also going to set the height to be 100%, and I'm going to justify this content to the bottom of the box by using flex-end.

[00:09:02] We can set some padding on here, so we don't want any top or bottom padding, but we want to use that same setup that we used before to get the right amount of, let's see we're gonna divide by two, that'll give us that 550 or, as wide as it can go.

[00:09:23] And then we will give it a little space at the bottom actually so that we don't have the text just kind of crammed into the bottom like this. So then we're gonna set it to width of 100%.
>> Jason Lengstorf: And then we're gonna style up the the actual components, and so I'm gonna do this using child selectors.

[00:09:47] You could do this by creating styled components for each thing, you could use inline CSS. I just wanted to show some options because we've been using the CSS prop a lot, and I wanted to show that you can in fact, use just you know standard CSS selectors here as well.

[00:10:02] So this is gonna be any H1 inside of a text box is how that's gonna work. We're going to set this to have a little bit of a text shadow so that it shows up 1 pixel ,1 pixel will blur that 3 pixels and then we will set it to be about that color.

[00:10:20] Make the font size a little bit bigger.
>> Jason Lengstorf: About that will look good. And then for the paragraphs and the links, we want to control the color here, so we're gonna make it the darker color to make sure that we get enough contrast, and we're also gonna remove the top margin.

[00:10:39]
>> Jason Lengstorf: And for the the link, we're going to actually override that margin top a little bit. And this is really just me being lazy and not wanting to write the color out twice I could do this by copying this down as well and not having that be a duplicate selector, but again, it's all kind of preference.

[00:11:01] And then I'm going to wrap this whole thing into the, what was it, text box is what I called it, TextBox.
>> Jason Lengstorf: Put this around and let's see what happens. Okay, we're getting closer. It's, we got our gradient here it's getting some color, but we do still have this margin so we're wanna fix that cuz I want it to just sit right on the top.

[00:11:29] So we're just gonna say for the image background why don't you,
>> Jason Lengstorf: Whatever the next element is, take away that top margin, and I also want some height on this so I'm gonna set it to be 50% of the vertical height of the view port. So, hey, that looks all right.

[00:11:52] And this would work for us, this would give us what we want. We can read the text, we've got a link, it takes us to our About page. Cool, I'm happy. I'm not upset about this.