1 00:00:00,360 --> 00:00:06,210 92 and we're going to work with images, so this is going to be very interesting to try and do a real 2 00:00:06,210 --> 00:00:06,750 quick one. 3 00:00:07,260 --> 00:00:15,960 So so I will tell you that in this tool, I have already find a part with my image page three and already 4 00:00:15,960 --> 00:00:16,770 defined a function. 5 00:00:16,770 --> 00:00:20,370 And we thought we were fine and already to find an next page. 6 00:00:20,610 --> 00:00:23,240 So I would directly operate on this. 7 00:00:23,250 --> 00:00:26,500 So you can check out the code on the GitHub repository as well. 8 00:00:26,850 --> 00:00:32,580 So what we are going to do here, you can see here, you can see my this is my Usdaw profile and I've 9 00:00:32,580 --> 00:00:33,630 already found my image. 10 00:00:33,630 --> 00:00:36,250 Page two, page three, page four. 11 00:00:36,510 --> 00:00:41,130 So what we are going to do, we are going to start a local server, which is already started. 12 00:00:41,600 --> 00:00:46,590 And inside my local server, I would move to this, my image, page three. 13 00:00:47,070 --> 00:00:49,940 So I'll show you some interesting fact about this. 14 00:00:50,310 --> 00:00:51,840 So this is our image page. 15 00:00:52,260 --> 00:00:56,750 And here you can see that I've defined a rule, OK? 16 00:00:56,850 --> 00:00:58,230 I have defined a rule. 17 00:00:58,750 --> 00:01:02,430 And above that, I define a condition of fluid with the heading image. 18 00:01:02,430 --> 00:01:09,870 Page three and inside the room there are full columns of vict medium three each. 19 00:01:10,470 --> 00:01:17,320 So here you can see three plus three plus three plus three is equal. 20 00:01:17,880 --> 00:01:22,210 And this satisfies our basic requirement of the bootstrap column query. 21 00:01:22,470 --> 00:01:25,220 So here it shows 12 columns. 22 00:01:25,530 --> 00:01:31,580 So you can see three three three three is 12. 23 00:01:31,830 --> 00:01:35,730 And as soon as I press control shift, I you can see. 24 00:01:38,100 --> 00:01:44,990 You can see, OK, and here you can see that this is the source code electronically, right? 25 00:01:45,030 --> 00:01:46,300 Click and click, inspect. 26 00:01:46,380 --> 00:01:52,950 Yeah, it is rule gotten rid of three three, three, three. 27 00:01:52,950 --> 00:01:54,230 And this one medium device. 28 00:01:54,240 --> 00:02:02,040 As soon I click on Galaxy S5, it will all collapse and will move up to a scroll wheel and this will 29 00:02:02,040 --> 00:02:03,450 bring this force of nature. 30 00:02:03,720 --> 00:02:10,670 OK, let me move to the image page for this is we are going to be very interesting here. 31 00:02:10,680 --> 00:02:12,240 You can see the key difference. 32 00:02:13,080 --> 00:02:19,260 You need to observe a key difference here, that here I had to find a medium tree and I had to find 33 00:02:19,260 --> 00:02:25,470 a glass inside the bootstrap, which was defined in the grid system, as well as show you and the grid 34 00:02:25,470 --> 00:02:26,000 system here. 35 00:02:26,020 --> 00:02:31,170 Here it is, the source model, Esam Hamdi, LG Excel. 36 00:02:31,650 --> 00:02:39,910 When I have not defined any class, whether it is medium and some small excel extra large, I have. 37 00:02:39,960 --> 00:02:45,860 Or you can see I have defined medium in this my image page three to our estimate. 38 00:02:46,260 --> 00:02:51,330 But now when I move to my image page, fold or estimate, I have not defined any class. 39 00:02:51,360 --> 00:02:52,650 So here you can see the gap. 40 00:02:53,070 --> 00:02:55,970 So there I have no defined any class here. 41 00:02:56,190 --> 00:02:59,330 So you're going to have a review for it. 42 00:02:59,640 --> 00:03:05,250 So this is called M the three and this is only called for. 43 00:03:05,610 --> 00:03:07,200 You can make it as three as well. 44 00:03:07,230 --> 00:03:09,150 This is called for or. 45 00:03:09,150 --> 00:03:19,110 OK, so when aid for the for the school is twelve and now when I move to my image page four. 46 00:03:19,720 --> 00:03:22,290 OK, this is the image page for. 47 00:03:26,220 --> 00:03:29,520 Here you can see this or I'll click on Inspect. 48 00:03:30,990 --> 00:03:31,400 OK. 49 00:03:32,170 --> 00:03:33,450 OK, I'll show you one thing. 50 00:03:33,480 --> 00:03:38,370 This is rule four four four, OK? 51 00:03:38,820 --> 00:03:44,840 But I told you that I have not defined any class here, whether it is a medium, small, extra large. 52 00:03:45,420 --> 00:03:54,510 No, when I move to Galaxy S5 and you can see the magic, not you here, it also stays as four, four 53 00:03:54,900 --> 00:03:55,580 and four. 54 00:03:55,830 --> 00:03:58,220 So this visit up to 12. 55 00:03:58,650 --> 00:04:07,680 And this was the difference I wanted to show you in my image page four that here I have not defined 56 00:04:07,710 --> 00:04:09,090 like this is page three. 57 00:04:09,390 --> 00:04:12,270 I have not defined any class here in this. 58 00:04:12,690 --> 00:04:16,770 I have defined a class in image page road and I have defined a class. 59 00:04:17,130 --> 00:04:18,660 But image forward, forward. 60 00:04:19,230 --> 00:04:20,790 I have not defined any class. 61 00:04:21,150 --> 00:04:29,820 And when I move to my image page for what this is for, plus Oprah for the cartoon, I move to a smaller 62 00:04:29,820 --> 00:04:30,330 device. 63 00:04:30,480 --> 00:04:31,650 It still remains. 64 00:04:32,340 --> 00:04:34,650 It still remains for four four. 65 00:04:34,650 --> 00:04:35,910 It does not collapse. 66 00:04:36,160 --> 00:04:42,690 So this is that for every device you want the structure, then you don't define a class, then it must 67 00:04:43,020 --> 00:04:45,640 automatically maintain this structure. 68 00:04:46,040 --> 00:04:50,190 OK, now we are going to do one thing, one small exercise. 69 00:04:50,490 --> 00:04:52,680 Oh, this is going to be quick. 70 00:04:52,920 --> 00:04:55,680 OK, I'll define my image. 71 00:04:55,680 --> 00:04:57,300 Page five. 72 00:04:59,020 --> 00:05:01,770 OK, I'll be quick with this image. 73 00:05:01,770 --> 00:05:02,520 Page five. 74 00:05:05,980 --> 00:05:14,440 OK, now I'll move to my template, OK, I'll move to my template, this is my template and quickly 75 00:05:14,440 --> 00:05:18,580 copied this, pasted it here. 76 00:05:21,070 --> 00:05:32,890 Image page five XHTML, this is Image Page five a.m. I'll quickly wrap up this content. 77 00:05:34,330 --> 00:05:42,820 Inside the room, I'm only OK and I'm only left with the rule inside what used to be my file. 78 00:05:46,720 --> 00:05:51,460 OK, now inside my Vittori file, I'll define my image. 79 00:05:51,460 --> 00:05:52,350 Page five. 80 00:05:52,720 --> 00:05:53,440 Copy this. 81 00:05:59,420 --> 00:06:11,650 On here, you can see and this is going to be fine, and this is for OK and this is going to be fine 82 00:06:12,140 --> 00:06:13,660 and I change the heading here. 83 00:06:14,390 --> 00:06:18,020 So this here you can see this is the benefit of using template engine. 84 00:06:18,020 --> 00:06:20,200 You can quickly define the template. 85 00:06:20,810 --> 00:06:22,640 OK, now I'll move to five. 86 00:06:23,450 --> 00:06:24,550 We can now this looks fine. 87 00:06:24,560 --> 00:06:26,270 This is this is an empty page. 88 00:06:26,630 --> 00:06:37,460 OK, but now inside my profile, I will be taking a string parameter with the image name. 89 00:06:39,680 --> 00:06:48,290 OK, I'll be taking a string parameter with the image, name, image, name and inside may be the file. 90 00:06:50,060 --> 00:06:54,530 You know, if you have any doubt regarding how you take perimeter inside, you are and you can refer 91 00:06:54,530 --> 00:06:57,200 to my previous total so image name. 92 00:06:59,480 --> 00:07:01,170 He's going to be my new barometer. 93 00:07:01,760 --> 00:07:02,160 OK? 94 00:07:02,930 --> 00:07:09,190 And what I'm going to do it, I'll define every image name will take this Paramatta image name. 95 00:07:10,160 --> 00:07:17,070 Let me define this as my image, my image name, OK, and. 96 00:07:19,450 --> 00:07:25,060 If OK and I perform another operation, my image. 97 00:07:26,760 --> 00:07:31,150 Named this is a simple python python function. 98 00:07:31,170 --> 00:07:32,970 I'm using my image name. 99 00:07:34,740 --> 00:07:36,500 Got her first. 100 00:07:36,530 --> 00:07:49,200 What I do is I'm going to typecast this as a string barometer and I use my image to name law and I'll 101 00:07:49,800 --> 00:07:54,210 print this, my image name like this is pretty fine. 102 00:07:54,930 --> 00:07:56,280 OK, this looks pretty fine. 103 00:07:56,520 --> 00:08:01,500 OK, now I'll move to my image page five and I'll type Django. 104 00:08:04,280 --> 00:08:12,440 OK, so here you can see I have great vintage anger on my local machine and what I'm going to do, I'm 105 00:08:12,440 --> 00:08:14,270 going to define a dictionary. 106 00:08:15,760 --> 00:08:18,430 But before this, well, maybe what we can do. 107 00:08:18,910 --> 00:08:22,690 OK, I take a variable. 108 00:08:24,410 --> 00:08:36,050 There and I'll give it a default value, we can do one thing if my image and name is equal to Chango 109 00:08:37,970 --> 00:08:41,810 done by executive crew, 110 00:08:45,130 --> 00:08:50,570 I my image name is equal to. 111 00:08:51,680 --> 00:08:52,430 Five ton 112 00:08:55,520 --> 00:08:56,080 were. 113 00:08:58,200 --> 00:09:10,310 Is it good to find out where you can do that or maybe you can do one thing, where is for us? 114 00:09:10,920 --> 00:09:14,810 I know what I'm going to do. 115 00:09:14,820 --> 00:09:23,220 I'm going to create my dictionary, my dictionary, and I'll pass the bar as well. 116 00:09:24,610 --> 00:09:30,500 OK, now context is equal to my dictionary. 117 00:09:31,830 --> 00:09:32,310 Look at this. 118 00:09:32,310 --> 00:09:33,420 Looks pretty fine till here. 119 00:09:33,570 --> 00:09:34,680 And I'll say this. 120 00:09:35,070 --> 00:09:36,990 So my server is running. 121 00:09:37,570 --> 00:09:44,490 OK, now when I move to my image page five dot html. 122 00:09:45,660 --> 00:09:53,070 So what I'm going to do is I'll quickly copy the image syntax here or what I'm going to try to do, 123 00:09:53,070 --> 00:09:58,140 I assure you that this is a are you can copy this. 124 00:10:04,040 --> 00:10:10,340 OK, OK, this is fine, and I'll be fine as well. 125 00:10:12,470 --> 00:10:16,190 OK, for your convenience, you can visit us for me 12. 126 00:10:17,420 --> 00:10:23,090 And another one, but before this I type 127 00:10:26,540 --> 00:10:33,260 person, if Baraa I use this blog as. 128 00:10:36,370 --> 00:10:36,940 Else 129 00:10:40,120 --> 00:10:41,320 I'll use this blog. 130 00:10:43,070 --> 00:10:57,020 And I'll end this with an F person, and if OK, this looks pretty fine and I have confidence 131 00:10:59,870 --> 00:11:01,100 and quickly paste it here. 132 00:11:01,490 --> 00:11:04,460 OK, folks, I need to check my back in part. 133 00:11:04,490 --> 00:11:05,120 What was it? 134 00:11:07,100 --> 00:11:09,380 I look at my profile. 135 00:11:09,620 --> 00:11:14,120 If that is true, then I need to be true. 136 00:11:14,120 --> 00:11:17,110 Then I need to get to image if that is a good false. 137 00:11:17,120 --> 00:11:18,510 I need to get a python image. 138 00:11:18,980 --> 00:11:20,660 OK, so this is fine. 139 00:11:20,690 --> 00:11:26,140 And this would be fighting a python not being OK. 140 00:11:26,150 --> 00:11:29,370 So this looks pretty fine and looks interesting as well. 141 00:11:30,530 --> 00:11:36,230 OK, now I would like Chango, so here you can see I got the image. 142 00:11:38,230 --> 00:11:49,120 And Python, yeah, I got a python image, so this was pretty fine and what I'm going to show you that 143 00:11:49,570 --> 00:11:50,440 this is a magic. 144 00:11:50,440 --> 00:11:55,600 I want to tell you that I can render two images on a single round. 145 00:11:55,600 --> 00:11:58,360 Maybe I'll type Django with a capital letters. 146 00:12:00,040 --> 00:12:09,110 OK, here it is, come because I can use the functions law, I'll move to my Twitter file and I'll close 147 00:12:09,110 --> 00:12:12,510 other things and open my file. 148 00:12:13,350 --> 00:12:21,170 OK, I had used the law function if my name is Django Writers Guild rule as it's false. 149 00:12:21,790 --> 00:12:30,050 OK, so maybe when I type Biton with capital letters, I'll get this. 150 00:12:30,230 --> 00:12:31,610 So this looks pretty awesome. 151 00:12:31,910 --> 00:12:40,370 You can maybe I can do also type this as Capital D, smaller Django and Capital G and small Django. 152 00:12:40,430 --> 00:12:41,560 This also works with. 153 00:12:41,570 --> 00:12:42,130 This is great. 154 00:12:42,590 --> 00:12:44,930 So here I told you that it's simple. 155 00:12:44,930 --> 00:12:50,300 Back in logic you can render multiple images on your front, an application so that I'll catch a catch 156 00:12:50,300 --> 00:12:51,350 up on the next picture. 157 00:12:51,500 --> 00:12:52,270 Thank you, guys. 158 00:12:52,370 --> 00:12:54,380 And once again, welcome to Programming Knowledge.