Create object containing different sizes values

- [Instructor] The last piece of our responsive images puzzle is the sizes attribute. If you're not familiar with the sizes attribute already, here's a two minute primer. The sizes attribute allows us to tell the browser how wide an image is depending on the width of the full viewport. So for example, this top image, the showcase image, will always be the full width of the viewport, so 100 vw. The images down here that I've labeled the reason images on the other hand, right now they're about 372 pixels wide and they'll stay that width for all wider screens.

But if I reduce the width of the screen down to below 800 pixels, all of the sudden they become full-width. So, using the sizes attribute, you can tell the browser 'Hey, if the viewport is narrower than 800 pixels, then this image will be full width. If it's any wider than 800 pixels, the image will never be wider than 372 pixels.' Then we can do the same for the feature images, whose width will be max 558 pixels, and the story images at the very bottom whose width will be a max of 670 pixels.

If you want to know more about responsive images, sizes, sources, and everything else, go check out my course responsive images. To generate the sizes attribute for each of our images, we first need to know what type of image we are displaying. That's why I've added this data type attribute. Here I've marked all my showcase images with showcase, all my reason images with reason, feature images with feature, and story images with story. That makes it easy for me to apply the correct sizes attribute to the correct image.

We've already captured this information in the let called type, this captures the data type for each of the images. At the very top of my document I'm now going to create an object and have each of the properties of that object map to these different sizes. Showcase, reason, feature, and story, and then the value of each of the properties will be the actual size's attribute. This will make it really easy to apply it later on. So I'll set up a constant, call it sizes, and inside sizes I'll set up the properties.

So first showcase, and for showcase the sizes attribute will just be 100 vw. For reason, the sizes attribute will have a media query max width 799 pixels, that means as long as the width is narrower than 800 pixels then the width of the image will be 100 vw, full width, otherwise it'll be 372 pixels.

Then we have feature. And feature starts exactly the same, so I'll just copy this out. And then change the last value, which is 558, and finally we have story. And here we end up at 670. Now we just have to grab our type datatype and use it to pull out the correct property from our sizes object.

Now remember previously in the course where we talked about dot versus bracket notation? This is an example of where that kicks in. So let's say I set up a lets named sizes and I want to assign to it the sizes and then the property that matches the attribute that we have here. The problem is I captured that attribute in the type lets and if I say dot type, then we're looking for a property inside sizes named type.

That's not what we're looking for. So instead, I'll wrap type in square brackets. This will allow type to be filled in with the actual data type from the image, and in return we get the actual sizes attribute. Now we can test that by console logging out sizes, save script.js, go back in the browser, and here you see now each of my images has both the source set attribute and my sizes attribute, and if I scrolled up you'll see the sizes attributes are different depending on what type of image it is.

That means all my pieces are in place and the only thing left to do is stitch everything together. That's next.