CSS Grids and Flexbox for Responsive Web Design Code Demo: Responsive Images Application
This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Code Demo: Responsive Images Application" Lesson
>> Jen Kramer: Let's go ahead and see some of those things in action. And I'm gonna start with, let's work on the one big picture problem. So if you go into chapter six, and take a look inside of your Begin folder in chapter six, this is the HTML you're gonna see.
[00:00:20] All right, and if we display this on a web page, you will see this. And I'll make it smaller so we can see the whole thing. It says, I am the original Peace Pie. And here is the original piece pie's dimensions. And it's a 1.6 megabyte file, okay?
[00:00:43] So I'm gonna walk you through how we might go ahead and use the picture tag in order to make this work and load in different images. So here in our HTML what we're gonna do is the following. So rather than putting this in a div tag around this image, we're gonna put this in a picture tag, okay?
[00:01:10] So we're going to have a picture and a /picture. And any of you familiar with the video or audio tags in HTML5? Anyone familiar with those tags?
>> Speaker 2: Some sort of a video tag.
>> Jen Kramer: A little bit with a video tag. It's unfortunate, but true, of course, that using the video tag, you can make video display right on your web page, which is awesome.
[00:01:36] The down side is that some browsers display one video format, and other browsers display different video formats. Not so good. So with the video tag, what you typically do is you list a series of tags called source inside of that video tag. And you can list which appropriate file formats that you have, whatever it happens to be.
[00:01:56] The picture tag is gonna work pretty much the same kind of way. So for the picture tag here, what we'll start with is a source tag that goes inside of that picture tag between the picture and /picture tags. And then we're going to give it an srcset, which is a path to an image.
[00:02:18] If you look inside of your image folder, you'll see that I've given you three formats of the Peace Pie, okay? And the first one we're going to list here is img/peace-pie-original. It's actually just like that, .jpg, and then it's also gonna have a media attribute associated with it.
[00:02:45] And the media attribute is guess what? A media query. So we could say min-width: 1200px, just like that. So in other words, this image isn't going to display unless the screen is at least 1200 pixels wide. Relatively safe, that's probably some kind of desktop which means that they're probably on Wi-Fi, relatively safe thing to do, okay?
[00:03:19] That's the end of the source tag. Once you've got that in place, then we can go ahead and copy that same source tag, and we'll repeat that again. This time we're gonna link to the 500 pixel wide image. So this name is peace-pie-500. So that's a 500 pixel wide image, and I'm gonna say for the minimum width on that will be 800 pixels.
[00:03:52] Now the media queries that I'm using here are all min widths. You can do any kind of media query you want. It can be a min width and a max width. It can be all max widths. Whatever it is that you normally do with media queries, you can do here.
[00:04:07] You can mirror the media queries that you have in your CSS already. Whatever you're using for your breakpoints there, you can mirror those same breakpoints here, make sense, okay? And then the final one of these, and you can have as many of these as you want. Obviously I'm just doing three because it's the magic number.
[00:04:28] So the final one that you have here is gonna be the img/peace-pie-150.jpg, and it's in an image tag as opposed to being in the source tag. So this is kind of your fallback. It's also your mobile version that you're going to display, okay? So if the browser doesn't understand anything but an image tag, it will at least display something here on the page.
[00:04:56] And then this is where you would place your alt tag as well. My amazing peace pie at the appropriate dimension. So that alt tag that you put here is going to apply to the other images that are associated with the source tags, okay? So you only need to put in the one alt tag here.
[00:05:22] And if you go on ahead and save that and refresh your web page, you should see a great, big, huge, giant Peace Pie at giant dimensions. And then as you start to zoom down, hopefully it will switch to something else.
>> Jen Kramer: And maybe it's not.
>> Jen Kramer: Mine did finally there.
[00:05:49] Didn't seem to work here. What did I do? Thin width 800 pixels. img/peace-pie-500.jpeg. If somebody sees what I've done wrong here in my code, let me know. img/peace-pie, that is 500, right? 500, I'll do 500 original.
>> Jen Kramer: Okay, I'm not gonna worry about it for the moment. Because we're gonna add something else here anyway.
[00:06:27] Did it work for any of you? Did you get three images? Okay, so I have some weird something going on in here. Okay, cool, so that works great, obviously, in our perfect world where we only work with the latest version of Firefox and Chrome. In the real world there's obviously other things we got to do.