Hi everybody. Let's talk about images. I think we've all been to places, where you've been on a website and particularly if it's not a professionally done website, some of the pictures are way too big or way too small or sometimes you'll see that even just when people send you an email. My mom does this all the time. Hey, look at these pictures, and I'm trying to look at them and I've gotta go scroll, scroll, scroll, scroll because the image is just so big. Since so many web pages now are made up of images, it's really important for us to think about how we can make them responsive. And we're going to talk about two different approaches. One is to write your own code to do this, and the second is to use Bootstrap and some of the built-in Bootstrap classes. In your own code, it's not that hard to make your images responsive. You just want to use fluid measurements. If you set that width to a 100% that means it's going to naturally change as people resize the window. You can also add a little bit of an element to that, however. If you think someones going to be looking at your page on an extra large screen. It's perfectly okay to add in an extra element called max width. This will say, you know what? I want this picture to grow with the screen size, or show up full width of the screen size. Unless, we're in certain situations, in which case, you still want it to be responsive. But you really want it to top off at 750 pixels, maybe because you think the quality of the image will degrade, or you just don't want it to have so much emphasis. In the same way, you can also set a min-width, where if the screen is very small, you don't necessarily be proportional to the screen any more. You really want it to be at least 200 pixels. When you go in and you start setting the width on images, you might be wondering if you should be setting the height as well. In general, you do not, because what's going to happen is it's going to skew. You can't get it exactly right. So usually, you just set the height to auto or leave it along. Many people really like to use the Bootstrap classes with their images, and that's because they provide a number of image classes, some of them really beyond the responsiveness that we normally talk about. So, they do have an image responsive class. There's an image rounded, where it goes in and adds a little bit of border radius to give that image a slight curved look. You can also do image circle, where it will take whatever image you want and only show the circular part. It completely cuts off those corners. And then another one, you'll see quite a bit is img-thumbnail. What this one will do, is give your image the kind of look that is often associated with thumbnails. A little bit of a border, a small size, we'll take a look at those in just a second. But first, lets take a closer look at that img-responsive class. What I've done here is I've taken a quick screenshot of what the inspect element says happened, when the image responsive kicks in. And as you can see, we have display: block, which simply means you can only have one at a time, the max-width: 100%, and the height: auto. This is very similar to the code we were talking about, if you wanted to put it in yourself. Let's look at those other classes as well. So what I have right here is a single image in code pen. There are no classes applied. I went ahead and I put it inside a div. And I'm going to re-size the screen a bit. That you can see my dog stays there, he doesn't shrink, he doesn't do anything like that, so it would be possible for me to go in and do something along the lines of image with 75%. And what that means, is it's going to take its width based on the width of its parent, that div. So if I re-size again. You can see that the picture of Bacon is actually changing. This is great, this is exactly the kind of responsive behavior that we want to see. Let's see how it works, if we use Bootstrap instead. I'm going to go in and get rid of that. Now, one of the things I've done when I created this file, is that I linked it to the Bootstrap CSS, so I've already done that step. So if you're writing this by hand, don't forget to link it in. Now, I can ignore the CSS part and just change the HTML to add different classes. We'll start with image responsive. When I do this one, you can see that now when I re-size it, again, great responsive behavior. Let's see what those other kind of visual ones do for us. We can have image rounded. And, it's probably barely perceptible to you, but you can have this little tiny curving, right here, curved just a little bit. Let's go for image circle, so you can really see when something happens. And as you can see, it really just cuts off part of the pictures, so you can have that circle look. The last one I'm going to do, which we can actually add at the same time actually just do it here, image thumbnail, hit save. It probably is hard to tell on this screen, but a slight border came out along here around this picture, you can't see it, and there is a little bit of padding and as we re-size the screen, you can see it is still responsive. Especially with that little red mark there, you can tell really well. Each one of these Bootstrap classes is really simple to implement. And the reason they're there is because it's something people do all the time, so why go to the hassle of writing your own code, if somebody else has already done it. Well, we can see that there are reasons for doing that. Personally, I would have liked a much thicker border, so you all could have seen it. But in many cases, you're really happy with the defaults. Let's look at one more example. So, let's go ahead and look at this example, where I put together the Thumbnail class, along with some of our Grid classes to give you an idea how this would work. Up here, I have seven pictures of my dog. I just spent sometime berating myself, because I couldn't add the seven pictures. I combine these with the thumbnail class to really have a kind of cool gallery effect. So let me start by showing you the code. It's really simple. Kind of quick. Every single line says this same exact thing. It simply, I give the name of the file, and then I have class column small 6, that means when I'm on a small screen, each picture should take up 6 columns. Column medium four, each one should take up four columns and column large two, which means each one should take up two columns. So if you do the math, that means on a small screen you should see two side by side. On a medium screen, you should see three side by side. And on a large screen, you should see six on each row. That's what was kind of messing me up. I was trying to figure out why this extra picture was off to the side. Well, I actually put it there because I wanted to show that there were one, two, three, four, five, six. All right. So let's look at the small screen. Well, now this is interesting because I'm looking at it and nowhere did I ever say that something should take up all 12 columns. I said it should be six, four, or two so I should always have at least two pictures next to each other, and the question is why on the extra small screen is there only one picture of bacon staring at us. Well, the reason is Bootstrap is always mobile first. So it's always thinking about that extra small screen, even if you're not thinking about it. And by default, if you don't declare a rule for extra small, it's going to default for 12. So that's why on the extra small screen, you get one dog. The small screen you get two in each row. Then you go to three. And then, you pop over to six. That's the way things are going on here. Have some fun with images. Images are always fun. People like to see your pictures. And it's always nice when you can have that extra little bit of style to them. So I hope you'll put your own pictures in and you'll play with your own circle classes, rounded classes, and responsive classes. The important part is to get as much experience and practice as possible.
