WEBVTT 00:05.660 --> 00:12.080 In this video we're going to build the feature which will allow our users to update their profile picture. 00:12.470 --> 00:18.950 So to update the profile picture you need to go to the profile page click on that picture and then select 00:18.980 --> 00:20.170 a new one. 00:20.180 --> 00:25.280 So if I select another picture then submit 00:28.560 --> 00:32.980 OK then I can see that my profile picture has been updated. 00:33.120 --> 00:38.830 OK so first of all what are we going to need to have is a picture inside the navigation bar. 00:39.060 --> 00:47.130 This picture can be clicked on and we can see a model where we can place a form to upload our picture. 00:47.130 --> 00:47.560 OK. 00:47.820 --> 00:51.500 So I'm going to need to go to the profile. 00:51.500 --> 00:56.930 Those PSP file and update the navigation bar right there. 00:57.450 --> 01:05.360 So just before the username we're going to add another list item which will contain our picture 01:14.450 --> 01:25.320 inside the link going to place a div to start where we're going to place a generic picture for now and 01:25.320 --> 01:34.880 then we're going to come back later ok to write a code which will choose the right picture for our user. 01:35.220 --> 01:38.890 OK so for now I'm going to create a div inside. 01:38.940 --> 01:51.820 I'm going to place an image. 01:51.830 --> 01:57.840 OK so now we can give this image a source of abuse. 02:00.380 --> 02:04.330 Go into the location of the generic generic picture. 02:04.670 --> 02:06.930 So let's get a generic picture. 02:06.940 --> 02:10.290 So I've already downloaded one from pixellated. 02:10.310 --> 02:12.200 You can download any picture you like. 02:12.290 --> 02:14.540 OK you call this empty those BDK. 02:14.750 --> 02:22.530 So we're going to need to go to my 5 TB and then upload those pictures to the server. 02:24.700 --> 02:31.450 So I'm going to create a new folder I'm going to call his profile picture 02:34.560 --> 02:39.170 and that's where I get to where to place this picture. 02:43.950 --> 02:44.880 All right. 02:45.650 --> 02:57.300 So the source now is going to be a profile picture for MT doats. 03:03.760 --> 03:04.600 OK. 03:07.050 --> 03:11.550 So we're going to give this image a class is used later 03:14.720 --> 03:16.120 some sign into the picture. 03:16.370 --> 03:17.080 OK. 03:19.350 --> 03:24.400 So save this goes to the profile page 03:34.700 --> 03:35.480 OK. 03:39.620 --> 03:40.180 OK. 03:40.260 --> 03:44.650 So going to need to add some signage to a picture because it's too big. 03:44.900 --> 03:49.310 So I'm going to select the picture using the preview class 04:02.030 --> 04:10.220 give it a height of 20 pixel and also a 04:13.100 --> 04:15.270 this go for a radius 04:19.350 --> 04:21.990 of what a radius of 50 percent 04:25.730 --> 04:32.330 save it and refresh OK that looks better right now when we click on the picture. 04:32.330 --> 04:35.270 We want to open a model. 04:35.390 --> 04:35.870 OK. 04:36.020 --> 04:41.210 So first we're going to go to the containing div picture 04:45.370 --> 04:51.150 and add a couple of days of abuse. 04:51.230 --> 05:02.000 So we're going to need a data to go OK which will say to model and a data targets which is going to 05:02.000 --> 05:06.380 be the I.D. of the model in question. 05:06.380 --> 05:16.090 So let's say let's the ID of the model which will be creating in a bit is this picture. 05:16.460 --> 05:17.480 OK. 05:19.680 --> 05:20.940 So scroll down 05:24.250 --> 05:26.530 and copy one of these forms 05:31.540 --> 05:32.420 and create 05:36.910 --> 05:38.870 a new one to date. 05:38.890 --> 05:42.090 Oh picture. 05:42.790 --> 05:46.070 OK so the idea of the form is going to be update. 05:47.970 --> 05:50.740 Tearful OK. 05:50.850 --> 05:55.060 The I.D. of the model is going to be update. 05:55.080 --> 05:55.410 Picture 06:00.740 --> 06:02.440 updates everything in sight. 06:03.540 --> 06:13.540 So you want to write upload a picture said of it using the name the error message 06:18.090 --> 06:27.210 is going to be called updates big to message. 06:27.370 --> 06:28.130 All right. 06:35.120 --> 06:38.720 So going to be US creates a new form 06:43.300 --> 06:45.460 you input. 06:45.750 --> 06:55.020 So actually we still need a form group so we're going to use the previous code and just change the label 06:55.710 --> 07:01.950 to our picture and that's going to be the ID 07:04.720 --> 07:07.880 of the inputs inside the label. 07:07.930 --> 07:10.060 We can write selects a picture 07:14.030 --> 07:22.190 OK and then the inputs is going to be in inputs of type file because we want to upload a file. 07:22.190 --> 07:22.550 So 07:29.790 --> 07:32.910 just delete all that and just write type 07:35.820 --> 07:37.610 file. 07:38.970 --> 07:39.510 OK. 07:39.660 --> 07:43.130 And the name of these inputs. 07:43.200 --> 07:55.370 Go for picture and the ID is going to be picture. 07:55.500 --> 07:56.240 All right. 07:56.240 --> 07:59.920 So let's save and 08:02.750 --> 08:03.350 refresh 08:06.050 --> 08:07.970 OK so we can see our model. 08:08.120 --> 08:10.560 We want to show a picture right there. 08:10.800 --> 08:22.380 So there's the picture right before these inputs so we're going to places inside. 08:23.400 --> 08:28.770 And then we're going to have an image. 08:28.890 --> 08:35.920 And for now let's just give it a source similar to the one we used in the navigation bar. 08:36.250 --> 08:37.380 That's going to be profile 08:40.880 --> 08:42.200 picture. 08:42.510 --> 08:45.160 Always nice to see those Bangi. 08:45.670 --> 08:51.020 OK so again we're going to do that temporarily using the generic picture either later on we're going 08:51.020 --> 08:56.430 to come back here and write some code to pick up the right picture. 08:56.490 --> 09:01.760 So it's refresh and take a look. 09:01.960 --> 09:02.230 OK. 09:02.250 --> 09:10.050 We're going to need some styling to this picture so let's give it a glance. 09:16.170 --> 09:17.290 Review to 09:28.800 --> 09:34.570 OK so let's go for a highlights or two for now. 09:34.760 --> 09:35.220 OK. 09:36.140 --> 09:41.520 And let's say even though I see how it looks 09:46.660 --> 09:47.380 OK. 09:48.020 --> 09:55.200 Let's go for a max width of 100 percent to make sure 10:00.340 --> 10:04.490 we guess the raise with that 10:07.400 --> 10:08.600 OK that's better. 10:08.600 --> 10:12.400 OK so we are setting a maximum width of 1 percent. 10:12.410 --> 10:24.850 And finally we want to have a broader radius of 50 percent of Iran to 10:33.380 --> 10:39.590 so we can see the effects of the abort radius clearly here we are going to see in a better way with 10:39.590 --> 10:41.240 rectangular pictures. 10:41.600 --> 10:44.180 OK. 10:44.180 --> 10:44.490 All right. 10:44.490 --> 10:49.910 In the next video we're going to rise just gives code which will submit the form using AJAX.