1 00:00:00,180 --> 00:00:05,340 The predicted schedule, we were working with images, so in this video, we are also going to continue 2 00:00:05,340 --> 00:00:11,490 working with images and I will tell you how you can show images on the front end part of your application 3 00:00:11,700 --> 00:00:12,370 and observe. 4 00:00:12,930 --> 00:00:15,120 So today we are going to work with images. 5 00:00:15,360 --> 00:00:19,230 So in the future to show you how to show an image. 6 00:00:19,230 --> 00:00:24,060 And I applied some bootstrap classes to show that image on the page. 7 00:00:24,570 --> 00:00:29,900 So today, before we start, we are going to basically have an overview of the bootstrap group system. 8 00:00:30,480 --> 00:00:37,560 So and this group system, I will show you that there are some predefined classes with extra small, 9 00:00:37,560 --> 00:00:42,750 small, medium, large and extra large and see the same text for them. 10 00:00:43,020 --> 00:00:43,390 Call. 11 00:00:43,440 --> 00:00:50,010 Some call me, call LG and call Excel for respective classes and for extra extras. 12 00:00:50,310 --> 00:00:54,780 We only need to we don't need to define anything with the practical implementation. 13 00:00:54,780 --> 00:00:58,110 Will get to know one thing you need to observe in this. 14 00:00:58,470 --> 00:01:03,870 That bootstrap container has a column of total 12 columns. 15 00:01:04,110 --> 00:01:08,490 So what you need to do, you can define columns either in the multiple. 16 00:01:08,910 --> 00:01:16,380 You need to define them in the multiple of 12, like you can define, for an example, a column of it 17 00:01:16,380 --> 00:01:21,390 for that again, for then again for all, then six and against six. 18 00:01:21,560 --> 00:01:24,030 Focus, focus, focus for is a recall. 19 00:01:24,180 --> 00:01:26,340 And again, six plus six is equal to 12. 20 00:01:26,340 --> 00:01:27,530 Also of you. 21 00:01:27,570 --> 00:01:34,230 If you want to define any other issue, you can define a column of the ten and the next to the two plus 22 00:01:34,230 --> 00:01:35,130 two is equal to. 23 00:01:36,660 --> 00:01:44,070 And this way you can define a column of 12 columns by defining them and giving a proportion with your 24 00:01:44,370 --> 00:01:48,390 desire what you want to give to your front in application. 25 00:01:48,420 --> 00:01:53,180 So this is a syntax how you can make columns plus rules. 26 00:01:53,190 --> 00:01:55,200 So we will have some idea. 27 00:01:55,440 --> 00:01:58,510 This was what I was explaining that it got rid of. 28 00:01:58,510 --> 00:02:03,250 The column is equal to what you can do do like it has been mentioned. 29 00:02:03,250 --> 00:02:06,830 The first is of column eight and another is of column four. 30 00:02:06,960 --> 00:02:10,860 So this was total about 12 and this was a total betrayal. 31 00:02:11,370 --> 00:02:17,550 And this will help you and will up and just you to help have responsive design of the application. 32 00:02:17,940 --> 00:02:24,410 Like in the previous article I showed you how you can render an image using bootstrap and help it with 33 00:02:24,480 --> 00:02:28,860 how you can render an image with Django and then with the help of bootstrap classes, how you can make 34 00:02:28,860 --> 00:02:29,660 it responsive. 35 00:02:30,210 --> 00:02:32,370 So let's get started with distribution. 36 00:02:33,060 --> 00:02:39,720 So I would tell you first I would go to my RESCORED editor, then I would run myself over with the command 37 00:02:39,720 --> 00:02:48,770 python, manage dot be white run server. 38 00:02:49,920 --> 00:02:57,960 So this would start the summer on my local machine and what we can do till the time I can show you one 39 00:02:57,960 --> 00:02:58,290 thing. 40 00:02:58,650 --> 00:03:05,000 So this is our template, which we had made it yesterday, so I would move to the local server. 41 00:03:05,490 --> 00:03:09,100 So what, you can do it. 42 00:03:10,170 --> 00:03:12,120 So this is my local server. 43 00:03:12,300 --> 00:03:18,720 So I would move around with the name I had defined in the schedule. 44 00:03:18,720 --> 00:03:26,490 So I would good move to my file and my image page I had defined so I would move to that route. 45 00:03:27,090 --> 00:03:29,990 My image page. 46 00:03:30,900 --> 00:03:37,970 OK, you can see an image had been already uploaded on this route and on this page. 47 00:03:38,250 --> 00:03:44,280 So basically I showed you how you can see the responsive design, you can press control shift, i.e., 48 00:03:44,670 --> 00:03:48,470 or you can write, click and go to inspect. 49 00:03:48,480 --> 00:03:50,910 So this will lead you to come developer tools. 50 00:03:51,210 --> 00:03:57,660 And from here you can see the response of the design of our application like iPhone X display and iPhone 51 00:03:57,660 --> 00:04:01,340 six, then pixel to excel. 52 00:04:01,350 --> 00:04:04,970 Then it's fine to show the responsive design. 53 00:04:05,250 --> 00:04:12,180 So one thing you notice as to when I was on on a big screen, the nav bar used to add expanded view. 54 00:04:12,480 --> 00:04:18,000 But as soon as I move to a small screen so you can see the number had been collapsed. 55 00:04:18,150 --> 00:04:19,980 So this is a beautiful natural bootstrap. 56 00:04:19,980 --> 00:04:23,160 So this would help you in designing your front end application. 57 00:04:23,550 --> 00:04:31,980 So today, what I'm going to do, I'm going to define apart my image. 58 00:04:32,310 --> 00:04:33,900 Page two. 59 00:04:34,770 --> 00:04:39,090 And in the short profile, I also define views toward my image. 60 00:04:40,700 --> 00:04:48,680 Page two with the name is A to my image, page two. 61 00:04:49,250 --> 00:04:50,710 OK, so this looks pretty fine. 62 00:04:51,200 --> 00:04:57,310 So inside my file I'll define I quickly copied 63 00:05:01,280 --> 00:05:03,590 and pasted here and one changes. 64 00:05:03,590 --> 00:05:10,190 I need to make my image page two and it will have a image page to an estimate as well. 65 00:05:10,490 --> 00:05:15,310 So inside my template, I need to define image page to that e-mail. 66 00:05:15,890 --> 00:05:18,060 OK, I will move to my template folder. 67 00:05:18,440 --> 00:05:19,010 OK, so. 68 00:05:19,970 --> 00:05:27,560 So this is my image and I'll quickly copy this control pasted here. 69 00:05:28,610 --> 00:05:29,750 Image page two. 70 00:05:30,410 --> 00:05:31,780 OK, this looks pretty fine. 71 00:05:32,420 --> 00:05:37,430 OK, so in the time what I do, I remove this code 72 00:05:42,140 --> 00:05:46,760 and I'll see it as my image. 73 00:05:49,770 --> 00:05:52,890 Page do dot estimate. 74 00:05:53,930 --> 00:05:58,070 This was pretty wild, and I will move to my image page to. 75 00:06:02,220 --> 00:06:11,250 It is my image page to that estimate does not exist or I made a mistake here, so I read it as an image 76 00:06:11,250 --> 00:06:11,700 page. 77 00:06:13,140 --> 00:06:15,330 Do sorry for the error. 78 00:06:16,680 --> 00:06:19,090 Now, I'll quickly refresh this page here. 79 00:06:19,530 --> 00:06:20,840 This is image page two. 80 00:06:21,180 --> 00:06:24,490 So what I'm going to show you the beautiful nature of most of it. 81 00:06:24,990 --> 00:06:28,520 So this is a container fluid, which you always mention. 82 00:06:28,800 --> 00:06:35,610 Then inside this container, I have a rule then now I'm telling my bootstrap to divide this rule into 83 00:06:35,610 --> 00:06:38,430 two columns of glass 84 00:06:40,980 --> 00:06:47,100 and the glass is a good call and sticks. 85 00:06:49,050 --> 00:06:57,150 And I'm also defining another column of which book, as I told you, the bootstrap will have six plus 86 00:06:57,150 --> 00:06:59,280 six as well as a column weight. 87 00:06:59,580 --> 00:07:01,660 So I'll also define another column. 88 00:07:01,660 --> 00:07:08,250 Div Plus is a good call and six. 89 00:07:09,330 --> 00:07:10,560 And this what? 90 00:07:10,890 --> 00:07:12,210 Not this you can see. 91 00:07:12,270 --> 00:07:18,330 Now I have a column of two six six six with each and this would sum up well. 92 00:07:18,810 --> 00:07:25,080 Now I told you yesterday that this is the syntax you are going to use because I told you that I have 93 00:07:25,080 --> 00:07:26,280 a static folder inside. 94 00:07:26,280 --> 00:07:27,490 There are there are two images. 95 00:07:27,490 --> 00:07:34,140 So in order to look at images from the static folder, possible defined, both include static and then 96 00:07:34,260 --> 00:07:40,980 you need to define the syntax, the person static and static with the image, name and person again 97 00:07:40,980 --> 00:07:41,880 with the calibrates. 98 00:07:42,240 --> 00:07:43,860 So I'll quickly copy this. 99 00:07:43,860 --> 00:07:47,940 And this image through it is an bootstrap class which helps you to make a responsive page. 100 00:07:48,450 --> 00:07:58,590 Look, in this first line, I would I would put this image, OK, so this is the image I'm going to 101 00:07:58,590 --> 00:07:59,190 put. 102 00:07:59,490 --> 00:08:09,140 And one shortcut you can see, I can replicate and click on my document with HTML language features. 103 00:08:09,140 --> 00:08:10,020 So what will it do? 104 00:08:10,020 --> 00:08:15,270 It will format my source code and it will help you to better maintain the indentation of the code. 105 00:08:15,570 --> 00:08:18,390 And in the next, I'll copy this. 106 00:08:18,960 --> 00:08:24,740 So since I'm showing you a demo, we had done this in the previous to how to load and image. 107 00:08:25,170 --> 00:08:29,820 So let me give another image that might not PNG. 108 00:08:30,260 --> 00:08:35,670 I'll give this a name as a python, not PNG. 109 00:08:36,120 --> 00:08:46,020 And I will move to my page and and refresh this page so you can see now I'll quickly I'll click inspect 110 00:08:46,110 --> 00:08:47,180 and I'll show you. 111 00:08:48,600 --> 00:08:49,470 Let me do this. 112 00:08:51,120 --> 00:08:56,010 OK, so you can see here have expansion view. 113 00:08:56,520 --> 00:08:58,160 This is my rule all OK. 114 00:08:58,200 --> 00:09:04,740 This is not this will really help you to have a clear understanding, understanding how bootstrap works. 115 00:09:05,010 --> 00:09:07,820 This is my container and this is my number. 116 00:09:07,830 --> 00:09:11,130 OK, this is a no, this is the container. 117 00:09:11,550 --> 00:09:13,710 I go inside a rule to disarm. 118 00:09:13,710 --> 00:09:19,590 I wrote the column of the six you can the left portion is the column of six. 119 00:09:20,130 --> 00:09:21,420 Then this is the image. 120 00:09:21,420 --> 00:09:25,220 OK, ok, this is the column of six. 121 00:09:25,230 --> 00:09:27,990 OK, and then I move to the second column over six. 122 00:09:27,990 --> 00:09:33,380 Here it is that this was the second column on the six and this is the first column of six. 123 00:09:33,810 --> 00:09:34,890 First second. 124 00:09:35,280 --> 00:09:36,870 And that was the image. 125 00:09:37,140 --> 00:09:41,560 But now as soon I change my display, I move to a Galaxy S5. 126 00:09:42,150 --> 00:09:42,870 See the magic. 127 00:09:42,870 --> 00:09:49,220 Yeah, it automatic collapses the image and it can help you to make much design much responsive. 128 00:09:49,530 --> 00:09:57,630 So you need to inspect element in order to learn about this that this is again, call me six six with 129 00:09:57,630 --> 00:10:00,660 and this is six oh, call me six in another. 130 00:10:00,960 --> 00:10:06,000 So we are going to continue with this in the next lecture as well. 131 00:10:06,030 --> 00:10:11,610 I'll tell you how you can render images and how what will be the responsive design of our application. 132 00:10:12,000 --> 00:10:15,960 So let's catch you up in the next lecture. 133 00:10:16,020 --> 00:10:16,830 So thank you, guys. 134 00:10:16,830 --> 00:10:17,640 Thank you so much. 135 00:10:17,640 --> 00:10:18,960 And thank you, guys.