Hero Demo

[00:00:00]
>> So while we're here, let's go ahead and write the picture tag up here at the top. So, where it says hero image goes here around line 28 in your HTML. Let's put in our picture element. So here I am making the choices to which picture will display at which point in time.

[00:00:20]
So here we're gonna say section id=hero And then inside of this, we'll say picture. And inside of that, then we can put all the good stuff. So we start with source set. Image/hero-1200.png, and then media="(min-width: 839px". How did I come up with all this? Mostly, I wrote this webpage and I played around and decided what looked good where, and so forth.

[00:01:19]
So there's no magic bullet as to how this stuff is gonna go. You just kind of have to play around and make some decisions. Here's another one source set, this was gonna be 838.png, and this will have a minimum width of 301 pixels. And then we'll have our default image, Down here at the bottom.

[00:01:51]
Src="img/" hero.300, will be our default image, and then alt will be rainbow hero image banner. Probably come up with a better description for that. Okay, and if we save that, We refresh our page, there's the hero image up there at the top of the page for the wall a wonder, and we can squash that down and you actually will see it jump there.

[00:02:27]
So see how I'm squashing it and then when I get to my breakpoint wherever it was, there it is. Now it just loaded in another image, that's the smaller version of the image. Okay, we have other things going on our navigation is changing and all the rest of it.

[00:02:44]
But one of the things you'll notice as I make that window smaller there, with that picture element, notice that the image itself, like all the other images on the page have that width of 100% set, so that it scales down without those big jumps. And this picture element does not have that, because it has different different code associated with it.

[00:03:05]
Then does the image tag, which is used for displaying everything else. So we can make some more modifications to this in our CSS, to get rid of those big jumps along the way. So if we do that we'll jump into our CSS, I'm just gonna go into the finished style sheet here, and I will show you.

[00:03:31]
Here we go. Some of the hero styles So let's put this in, after the navigation, just to sort of keep our CSS in the order of the things that appear on the page, so I'm around line 124, and my CSS, and I'm gonna add two additional styles here.

[00:03:57]
So to the hero section itself, I'll set a background color, with color 7, which I think is a gold color. Text align of center, max width of 100%, turn off the padding and the margin, and then for the hero image, see how I'm handling this one. So I have a max width of 100%, and I have a max height of 454 pixels, how did I come up with that?

[00:04:23]
Well when we get to the 1200 pixel wide picture, that's 1200 pixels wide, and it's 454 pixels tall. So I've taken that tallest dimension and set that as my max height. We don't really want it to get bigger than that. And then just set the max width accordingly to 100%, so that can scale.

[00:04:43]
So when I save this, and I drop it into a web page, and refresh, there's my background color. And now when I scratch the screen down here, see how much nicer and smoother that is, So much better. Okay, so the key takeaway here is, yes, we're using the responsive images, absolutely.

[00:05:16]
Which are loading in at different points in time, so that we can get smaller file sizes at the appropriate points and potentially with art direction, not in this specific example, but it could happen. And we're combining it with sort of that little hacky thing, that I told you about, to make that transition very, very smooth.

[00:05:35]
Just in case somebody winds up close to the edge or maybe they resize their browser. It won't be a jarring experience as they're looking at that particular hero image.