Banner Demo

[00:00:00]
>> We're gonna write two additional pieces of code for that homepage that we've been building where we've the now the header with the navigation bar in it. We have the mission we have the collections, we have the footer. Now we're going to add to that two more elements.

[00:00:15]
We're gonna add a hero banner across the top of the page, and we're going to add a featured poster or something that is a very large image and so let's walk through how we might go about doing that. Given that we've seen the performance of this banner across our various browser's and so forth.

[00:00:36]
I'm going to write some code to set this up as a picture for this hero banner at the top of the webpage. And then for that featured image, we're gonna use source set and sizes. And we'll get started with that using the responsive image breakpoints generator which is that responsive breakpoints.com.

[00:00:58]
So free resource, and as you'll see here on the screen, you can upload a file, and then you can set what resolution you want for that particular file image? And how many sizes? And how many final images you want generated? Because you can get into the ridiculous very easily with this as we've seen, so where I'm going to do first is I'm going to set my resolution from let's say 300 is probably good when you actually type the numbers in.

[00:01:29]
300 to let's say 1200, resolution because we have a max with a resolution on there of 1200 on our webpage. 300 is probably about as small as a mobile device will need. We can do a sidestep here let's just say 25 or so k per image you can make that smaller if you want and then for the maximum number of images let's just do three we don't need to go crazy here.

[00:01:57]
So just give me three final images then we can choose our image and which is gonna select bind from my desktop. It's in folder number six, chapter six, the responsive images. And if you take a look right there in that chapter six folder, you'll see an image here called too-cool.jpg.

[00:02:19]
And that's the one we wanna go ahead and say open it will upload and then it will spit out here here's the image that I gave it. And here is the bit of code that it wrote for me it generated three images have different sizes and it has also given me down here the responsive design code that I need.

[00:02:42]
So remember that of course those file names we could change and you need to be aware of the path to those images. Because that may not be the path for your particular webpage, but it has very nicely written out exactly the sizes piece. It wrote out the source set piece for you, and so forth.

[00:03:01]
It also writes out the way this might look with a picture tag, leveraging sizes and source set. I'm less impressed with that particular a little bit of code. So I'm gonna write my own picture code in just a moment for the other image that we're going to do.

[00:03:18]
So this little bit of HTML here, you can copy that. You can also download the images right here. Here's the button, download images. And when you click that, it'll just download a zip file with all the images in it. And I already of course have already put that in the folder for you in the distribution of the files.

[00:03:41]
So let's just take a look back then here we are in folder number six the responsive images, we can look in the begin folder and look in the image folder here. Make sure nope I don't have those images. I have them in the end folder. Yeah okay, I'm just gonna copy these images from my end folder, drop them into my beginning images folder here.

[00:04:14]
There's three hero images in addition to cool images. Okay, and now I'm going to open up index.html. And then I'm going to scroll down here. So just after the opening header for this web page, just before the start of mission, so we're around line 27 to 28 inside of the HTML.

[00:04:40]
This is where we're gonna to put our hero image. Hero image goes here. And then if you keep on scrolling past the collection, actually before the collections just after the mission, so around line 37, 38 that's where we're going to put the two cool images. So here let's just go ahead and put in the code.

[00:05:08]
We're going to start with another section. And this one will have an idea featured. And inside of this of course, we're going to put in our h2 with a featured print. Okay, and then after that, where I am decided I'm gonna keep using my figure notation here, even though there's just one picture.

[00:05:38]
Let's just keep using setting this up as a figure. So you can actually just sort of copy existing figure bit of HTML here. It's all the same. But here oops, Here we're gonna make a few modifications to that HTML. So here for image source. Let's just change all of this.

[00:06:21]
So you can copy and paste in the code that you had from that website. My code is slightly different here, so I'm just gonna type this in. So this is image sizes. Equals and a min width of 300 pixels. Display it at 33.3 viewport widths otherwise display it on 100, viewport widths and then SORSA.

[00:06:53]
Equals, and then there is a whole bunch of these. So, image, actually a four here in my example, too cool. Where is that now I'm not finding it. 300 wide image to cool yep.
>> Is there a platform agnostic API for auto generating these image sizes that you could recommend?

[00:07:38]
>> Not off the top of my head, but that wouldn't surprise me if there was one.
>> I believe I've heard a lot of people use Cloudinary.
>> Yeah. Okay, Cloudinary. Yeah, and in fact, they sponsor responsive breakpoints, so that would be a good one. 1058 and finally image, too-cool 1200.jpg, 1200 wide.

[00:08:28]
And then the source will be img/too-cool-1200. And then we can put in an alt tag. Remember that your alt tags should be descriptive of what people would not get from that image if they were unable to see it. So in other words, if we just said featured print, we're not telling a screen reader anything that they wouldn't already see.

[00:08:55]
So a better description here would be something like close up of woman in sunglasses, showing eyes, nose and fingers over mouth. So that is something that you would not get from that image if you were not able to see it so that is a better alt description. And then they did the name of this is too cool for school So, that's what our figure might wind up looking like I'm gonna switch this from color seven to color six up here on line 40.

[00:09:36]
So that we have a different color banner around it that looks really nice. And if you save that in theory when we put it in the browser there we go so there's our featured print and it's too cool for school these are not numbered. So as you shrink the window down you will not know if it's switched to different pictures, but you'll notice that along the way.

[00:10:00]
We have some other issues that pop up here that are coming from other styles that we've set up here in the style sheet that earlier we said. When you got down to a smaller dimension like this, we had that object position property and we set it to -150 to show more of the bottom of the image.

[00:10:21]
We don't need that here for this peach featured print. So that's a little piece of CSS that we need to adjust. Probably for mobile devices, but otherwise it looks pretty good. Okay, we may want to fiddle around with Too Cool for School here as well, maybe we want a little taller or something.

[00:10:40]
It's part of the process. How much of that picture we're going to wind up showing here on the page.