Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Images in Bootstrap
0:03 When it comes to images, Bootstrap has a lot of options to work with.
0:07 We'll see that they will into two basic categories.
0:10 First of all, Bootstrap lets us define responsive images.
0:14 And, one of the challenges with images can be, on small screens,
0:19 they can create like huge scroll bars and tweak the design
0:22 to not fit on the page of say a phone, but on a large design,
0:26 if you have a 27 inch screen like I have at my house,
0:30 then you have these little tiny images designed for phones and it looks silly.
0:35 So, how do you set the correct size? That could be a challenge.
0:38 So, with responsive images, you can tell the image to basically
0:41 take the size of the container, and often that container could be a grid cell
0:46 that is like one third of the screen or a quarter of the screen, something like that.
0:51 So we have these responsive images, we also have a couple of ways
0:55 to apply different looking feel without actually changing the images.
0:59 So we can change their shape and style, not in some image editing software
1:03 like Pixelmator or Photoshop or something like that,
1:06 but just apply in CSS and that way if you change your mind,
1:10 you maybe want to circle at one point
1:12 then you would like it to have just a little polaroid border later,
1:16 you can do that and you don't have to actually redesign the image.
1:19 So let's look at these two aspects of images in Bootstrap.
1:25 Let's start with responsive images, so I am going to open this in a browser,
1:33 there is a very large logo and if I zoom it back, you can see that's its size.
1:38 But more importantly, let's have it keep the size and let me see if I can change it,
1:42 nope, it's just too big and now we've got to scroll to it
1:45 and imagine this is a phone it looks like this,
1:49 it's not a super experience looking at this image, right.
1:52 So let's see how we can change this,
1:55 well, we come over here to say this is an image, and it is responsive.
2:00 That's all we have to do.
2:03 Because we are including Bootstrap, it defines its class, img-responsive,
2:09 So now, if I refresh, you can see it fits into this area,
2:13 and as it gets bigger, it sort of fits the full screen.
2:17 Now, it's huge, because all that is on this page, is the image,
2:21 so the image besides a 50 pixel border that I've added on the body itself
2:26 it's just taking the size of the body.
2:29 But, imagine this is just some small part of an overall page,
2:32 we can see this over at training.talkpython.fm, down here.
2:37 So if we make things wider, you can see we have these images here
2:41 but as things get skinnier, you can see that we have these images here,
2:46 these little featured courses,
2:49 those have image responsive style as well as they are in the grid
2:52 so here when they break like this, they fit onto a single row,
2:56 because the grid is too small to be grid-like, as it gets bigger,
2:59 then they break into their various grid cells and now they fit exactly within the grid,
3:06 I've actually set a maximum width so they don't get like ridiculously big
3:09 but they are still responsive.
3:13 The other style is the shapes, so let's look at those.
3:18 So here we have that same image once again,
3:21 and it's just included three times in a grid, each one takes up one,
3:26 there are four columns, so one third of the screen.
3:28 Now, what if we would like this one to be by itself, this one to be rounded,
3:34 this one have a little polaroid thing, so I'll show you those styles here,
3:37 let's start up with the first one to be rounded.
3:43 So if we apply rounded to it, you can see it just takes a little bit of an edge off the corners.
3:48 And, I personally really like that, again,
3:51 you can see I have these are image rounded over here,
3:55 and there it is again, right, super easy, you could set the border radius and so on,
3:59 but image rounded lets you put the idea of rounded images,
4:04 rounded edges on the image, but then tweak that with CSS on what exactly that means.
4:10 Now over here, very common thing is to have a circle,
4:13 maybe we have one on this page, let's see,
4:16 if I go to about, I think I do, yeah, there,
4:20 so there is a picture of me and that's actually a square picture
4:23 but it has the image circle style applied to it.
4:28 So if we actually view this image, you can see it's square,
4:31 I didn't edit that, make it round in Photoshop or something,
4:34 I just applied the style to it, so let's do do that over here.
4:38 Let's make this one a circle.
4:41 Now, circle is not quite the right word, circle implies equal radius all the way around,
4:49 what that really should be called is oval but there you go,
4:54 we have a perfect circle because it's a square image if the image was
4:58 twice as long as it's wide you would get kind of an oval thing;
5:01 so just be aware, really the images you are going to apply the circle style to
5:04 have to be basically square.
5:07 But this I really like the circle style, I don't know why it just seems a little class here,
5:12 it lets you focusing on as long as it's in the center
5:17 whatever is the real subject of the image.
5:20 In this case it's the logo not the sunbeamy things around the outside.
5:25 And finally, the last one is going to be a little bit hard to see
5:28 but you can use the img-thumbnail style, let's wrap this around,
5:36 and this gives you kind of a little polaroid effect,
5:39 this one I've used before but I use this much one less often, this one,
5:43 these two are my go-to styles from Bootstrap.
5:46 So for responsive images, you can see we can set the class img-responsive.
5:53 And as our screen goes from wide to skinny,
5:56 you can see that the image basically adjusts to however much space it has,
6:00 in this case, like I said, it's taking the full screen, which is kind of ridiculous
6:04 you would never really do that
6:06 but it makes perfect sense in one of these grid cells or something like that as we saw it.
6:10 Also notice that we are applying two styles,
6:13 the shape style and the responsive style together.
6:16 So img-circle to make it circular, to give it a shape
6:20 and then img-responsive to give it its size,
6:23 so you can combine these without any problems.
6:26 We also saw we have the three image styles we have rounded, circle, and thumbnail.
6:32 So we can set just img-rounded, img-circle and img-thumbnail,
6:37 and I also applied img-responsive because this is in a grid
6:41 and I want these three elements to take up basically however much room they have
6:44 within their grid cell, which is more or less a third of the screen.
6:47 So before you reach for Photoshop or Pixelmator or some sort of actual editing tool,
6:52 of course you need to trim up your images and so on,
6:55 but before you overdo it trying to create circles, and rounded edges and whatnot,
7:00 be sure to leverage these Bootstrap styles
7:03 so most of the design of your image can actually be done in CSS.