1 00:00:00,060 --> 00:00:05,190 Seven, eight, all of our jungle cities, so like in the previous two, I showed you how you can walk 2 00:00:05,190 --> 00:00:09,810 with the front part of your application, how you can use Django template engine. 3 00:00:10,260 --> 00:00:14,020 So this tool is going to is going to get interesting. 4 00:00:14,430 --> 00:00:16,880 We are going to work with images on this route. 5 00:00:17,130 --> 00:00:21,030 So I will tell you how you can work with images within Django. 6 00:00:21,390 --> 00:00:23,100 So this is going to be interesting to do. 7 00:00:23,230 --> 00:00:24,590 So let's get started with this. 8 00:00:25,050 --> 00:00:25,510 So. 9 00:00:25,510 --> 00:00:32,450 So first thing I need to do, you need to move to your settings or file side, move the settings file 10 00:00:33,270 --> 00:00:39,930 and inside my settings or my file, what you need to do to define a static model, which is going to 11 00:00:39,930 --> 00:00:48,050 be static and you need to define static file directly is Westernport don't join based directory with 12 00:00:48,060 --> 00:00:48,930 a static folder. 13 00:00:49,320 --> 00:00:57,210 So what I'm actually mentioning that I've made a static folder and here it is an inside my static folder. 14 00:00:57,210 --> 00:01:04,140 I have two images, Django, Pink and White, and I would be using these two images and what I'm going 15 00:01:04,140 --> 00:01:06,360 to show you what you need to do. 16 00:01:07,110 --> 00:01:11,630 So this is the static folder, which I'm referring, which I also showed you into Gascony. 17 00:01:11,820 --> 00:01:18,960 I'm showing here for a better experience for you for and inside my static folder, I have two images. 18 00:01:18,960 --> 00:01:20,540 One is showing one another spider. 19 00:01:21,030 --> 00:01:23,970 So I'm referring to this particular static folder. 20 00:01:24,360 --> 00:01:30,300 And to refer this particular static folder, you need to move your move into a file and you need to 21 00:01:30,300 --> 00:01:32,880 define this heading so this piece of code. 22 00:01:33,420 --> 00:01:39,780 OK, so first I create a road, so I move to my profile and. 23 00:01:41,490 --> 00:01:54,690 I am going to define but my image page, OK, and I'm going to define it, views dot my. 24 00:01:56,730 --> 00:01:58,920 My image page. 25 00:01:59,950 --> 00:02:07,540 And I'll give this a name is equal to my image page. 26 00:02:08,470 --> 00:02:09,820 So this is going to be interesting. 27 00:02:10,340 --> 00:02:16,410 OK, now my image page, I've defined my image page here, OK? 28 00:02:16,510 --> 00:02:20,780 And I'll define a function inside my views, my image, and I've given a name. 29 00:02:20,800 --> 00:02:22,540 Here it is in my image, but also. 30 00:02:23,140 --> 00:02:26,680 So what I'm going to do, I'm going to define a view. 31 00:02:29,230 --> 00:02:30,640 OK, I'll define a view. 32 00:02:30,820 --> 00:02:31,330 Define. 33 00:02:32,760 --> 00:02:42,540 My image page, which takes request as a barometer, good, and it will return and render an estimate 34 00:02:42,540 --> 00:02:49,500 page request and that steam is going to damage page dot FDM. 35 00:02:49,890 --> 00:02:51,040 But this is pretty fine. 36 00:02:51,780 --> 00:02:53,910 OK, so there has been reloaded. 37 00:02:54,160 --> 00:03:01,980 OK, so this looks to find now and segment in particular, I create a new template, I click a new file 38 00:03:03,360 --> 00:03:09,810 image page dot FDM and look at this is fine now. 39 00:03:10,610 --> 00:03:13,290 OK, now to create an image page or e-mail. 40 00:03:13,530 --> 00:03:22,860 What I'm going to do, I'm going to take any of the pages here, OK, and I'll copy this quickly. 41 00:03:23,510 --> 00:03:25,320 OK, now what do you need to do. 42 00:03:26,610 --> 00:03:28,230 I'll define this as. 43 00:03:29,640 --> 00:03:29,870 OK. 44 00:03:29,910 --> 00:03:36,540 Sorry for this, I will define this as you can define any name image. 45 00:03:38,350 --> 00:03:38,830 Page. 46 00:03:39,490 --> 00:03:42,950 OK, so and what do you need to do? 47 00:03:42,990 --> 00:03:45,070 I'll open this text file. 48 00:03:45,250 --> 00:03:49,980 So this is the same text how you can load a static image. 49 00:03:50,380 --> 00:03:55,900 So what you need to define, you need to define both include static inside your template. 50 00:03:55,910 --> 00:04:00,010 So below this line, I'll define boesen load static. 51 00:04:01,970 --> 00:04:11,010 Potent, loud, static, and I refer to this image, OK, I. 52 00:04:13,150 --> 00:04:20,560 Remove this, OK, from here, what I'm going to tell you that this is a bootstrap and here's what you 53 00:04:20,560 --> 00:04:21,240 need to do. 54 00:04:22,000 --> 00:04:23,620 You will learn about images. 55 00:04:23,620 --> 00:04:25,750 So images. 56 00:04:28,680 --> 00:04:34,890 So this is the response class of bootstrap we are going to use, which will help us to make our image 57 00:04:34,890 --> 00:04:35,640 responsive. 58 00:04:36,030 --> 00:04:37,500 So this is going to get interesting. 59 00:04:38,100 --> 00:04:41,430 So what you can do, you can define. 60 00:04:42,600 --> 00:04:48,960 Div class is equal to container container fluid. 61 00:04:49,710 --> 00:04:56,260 OK, and what do you what I'm going to do next, I'll define a rule. 62 00:04:56,770 --> 00:05:00,160 Will we will be learning bootstrapping the upcoming lectures as well. 63 00:05:00,180 --> 00:05:05,240 So I'll give a short idea how you can create a responsive page. 64 00:05:05,310 --> 00:05:06,360 This is going to be interesting. 65 00:05:07,260 --> 00:05:11,770 Class is a rule and inside the rule I have a container then inside of a container. 66 00:05:11,790 --> 00:05:13,560 Then inside I have a column. 67 00:05:14,310 --> 00:05:19,410 This class is going to call me six. 68 00:05:21,030 --> 00:05:29,750 OK, now I'm going to quickly copy this so you can use this glass. 69 00:05:30,210 --> 00:05:39,240 So so this glass image, fluid response to the deficit, the responses siestas, which has been altered 70 00:05:39,240 --> 00:05:45,450 and written inside the bootstrap to make our image responsive on multiple devices and to define the 71 00:05:45,450 --> 00:05:53,130 image, source and user calibrates that both inside the Nagaina, both inside and in segment, both 72 00:05:53,130 --> 00:05:59,280 in time and space, gives static and undefined image name using single code. 73 00:06:00,030 --> 00:06:05,290 So let me define Chango Dot PMG. 74 00:06:05,580 --> 00:06:07,560 So this, this looks pretty fine here. 75 00:06:08,130 --> 00:06:12,060 Jianguo Dot PMG and you can define, you can give any name here. 76 00:06:12,470 --> 00:06:21,480 OK, so I'll just upload the server then restart my server, look at the rest of it and I have no issue 77 00:06:21,480 --> 00:06:29,850 here so I'll go to my local who's running and I'll give my image page. 78 00:06:31,890 --> 00:06:41,690 OK, so this is treatment error, which is current, but let me check my URL or I didn't save this book. 79 00:06:43,320 --> 00:06:45,420 Yes, no, no talking. 80 00:06:47,270 --> 00:06:52,520 Yeah, here you can see so you can see the image has been successfully loaded, so this looks pretty 81 00:06:52,520 --> 00:06:52,800 good. 82 00:06:53,330 --> 00:06:58,080 You can also use in your in your page what you can do. 83 00:06:59,390 --> 00:07:02,050 You can also use bitin or PJI. 84 00:07:07,130 --> 00:07:08,470 So this also works. 85 00:07:08,510 --> 00:07:09,590 So this looks pretty fine. 86 00:07:10,220 --> 00:07:13,930 And now what I'm going to show you, Chango not being. 87 00:07:14,910 --> 00:07:18,530 So I'll move to January 20, and so I'll give you a briefing interview. 88 00:07:19,020 --> 00:07:24,990 So now you're right, click on this and click inspect and when you click on inspect. 89 00:07:26,690 --> 00:07:34,160 So this is a container fluid then, this is a room inside there is a column of white, medium thick 90 00:07:34,170 --> 00:07:38,990 stack on the multiple on the devices, it will have a bit of sticks. 91 00:07:38,990 --> 00:07:40,890 The butcher has a total of 12. 92 00:07:40,940 --> 00:07:42,170 So we're going to learn that. 93 00:07:42,530 --> 00:07:47,450 And this image source is this particular image so we can play with the inspector tools. 94 00:07:47,720 --> 00:07:51,460 What we can do, we can use background is to great. 95 00:07:53,270 --> 00:07:55,490 Let me do the story for this. 96 00:07:56,390 --> 00:07:57,430 Like, this is our room. 97 00:07:57,650 --> 00:07:59,300 So I type background. 98 00:08:02,390 --> 00:08:07,730 Now you can see a rule which was also equal into the container fluid as a barrel. 99 00:08:08,540 --> 00:08:16,640 And what we can do this is a column will align this image in the center and type margin zero or two. 100 00:08:17,120 --> 00:08:17,440 OK. 101 00:08:17,600 --> 00:08:20,590 Now you can see the image has been aligned to the center. 102 00:08:21,050 --> 00:08:23,040 So let me check, OK? 103 00:08:23,090 --> 00:08:30,470 There might be not exactly but might we should but we'll rectify this in the upcoming lecture on how 104 00:08:30,470 --> 00:08:31,550 we can resolve this. 105 00:08:31,970 --> 00:08:39,440 So the point is, when I move to a different devices, since I use image fluid as a class, I move to 106 00:08:39,440 --> 00:08:39,820 Galaxy. 107 00:08:39,840 --> 00:08:44,470 As you can see, that number collapses itself and the image is being responsive. 108 00:08:44,810 --> 00:08:47,370 I can move on X image being responsive. 109 00:08:47,780 --> 00:08:52,880 So this this is going to be very helpful in the responsive device design that iPhone five. 110 00:08:53,480 --> 00:09:01,460 And I close this and the best part is when refresh this page, it's all going so because that was temporary 111 00:09:01,850 --> 00:09:02,970 to make this permanent. 112 00:09:03,260 --> 00:09:10,820 You need to define success in your estimate, which I define as margin zero or two. 113 00:09:11,950 --> 00:09:16,390 OK, so when I go to Spain, refresh now, this is permanent. 114 00:09:16,750 --> 00:09:18,280 So this this is pretty cool. 115 00:09:18,850 --> 00:09:25,430 So in the next tutorial, I'm going to work with the images so they could that really help you? 116 00:09:25,780 --> 00:09:27,240 So, guys, thank you guys. 117 00:09:27,250 --> 00:09:28,060 Thank you so much. 118 00:09:28,060 --> 00:09:30,000 So you can go to a repository. 119 00:09:30,040 --> 00:09:35,560 Have a look at the source code and next door, we're also going to work with the images. 120 00:09:35,560 --> 00:09:39,320 Then we will also cry in the next shooter, how we can work. 121 00:09:39,340 --> 00:09:43,600 First, I will let you know about the bootstrap, how we can work with the bootstrap and using images. 122 00:09:44,170 --> 00:09:50,830 Then we are going to use the if else logic, how we can render multiple images on a single page using 123 00:09:50,940 --> 00:09:51,860 unflooded. 124 00:09:51,900 --> 00:09:54,880 So that's going to be an interesting catch up in the next picture. 125 00:09:54,910 --> 00:09:55,400 Thank you, guys. 126 00:09:55,420 --> 00:09:56,080 Thank you so much.