title
Python Django Tutorial: Full-Featured Web App Part 9 - Update User Profile

description
In this Python Django Tutorial, we will be finishing our user profile page. The final page will allow users to update their information and also add a new profile picture. We will also learn how to resize this image when it is uploaded to save space on our web server. Let's get started... The code for this series can be found at: https://github.com/CoreyMSchafer/code_snippets/tree/master/Django_Blog ✅ Support My Channel Through Patreon: https://www.patreon.com/coreyms ✅ Become a Channel Member: https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g/join ✅ One-Time Contribution Through PayPal: https://goo.gl/649HFY ✅ Cryptocurrency Donations: Bitcoin Wallet - 3MPH8oY2EAgbLVy7RBMinwcBntggi7qeG3 Ethereum Wallet - 0x151649418616068fB46C3598083817101d3bCD33 Litecoin Wallet - MPvEBY5fxGkmPQgocfJbxP6EmTo5UUXMot ✅ Corey's Public Amazon Wishlist http://a.co/inIyro1 ✅ Equipment I Use and Books I Recommend: https://www.amazon.com/shop/coreyschafer ▶️ You Can Find Me On: My Website - http://coreyms.com/ My Second Channel - https://www.youtube.com/c/coreymschafer Facebook - https://www.facebook.com/CoreyMSchafer Twitter - https://twitter.com/CoreyMSchafer Instagram - https://www.instagram.com/coreymschafer/ #Python #Django

detail
{'title': 'Python Django Tutorial: Full-Featured Web App Part 9 - Update User Profile', 'heatmap': [{'end': 167.795, 'start': 138.332, 'weight': 0.953}, {'end': 252.633, 'start': 201.977, 'weight': 0.815}, {'end': 337.228, 'start': 313.016, 'weight': 0.715}, {'end': 1164.081, 'start': 1125.538, 'weight': 0.874}, {'end': 1507.973, 'start': 1486.196, 'weight': 0.749}], 'summary': 'Tutorial covers updating user profile information, implementing image resizing to avoid large file storage, creating user and profile update forms, debugging form field issues, populating form fields with user data, handling post requests, validating form data, saving user information, and displaying user images on the homepage for website performance optimization.', 'chapters': [{'end': 127.429, 'segs': [{'end': 30.178, 'src': 'embed', 'start': 0.229, 'weight': 0, 'content': [{'end': 1.23, 'text': "Hey there, how's it going everybody?", 'start': 0.229, 'duration': 1.001}, {'end': 2.051, 'text': 'In this video,', 'start': 1.551, 'duration': 0.5}, {'end': 10.399, 'text': "we'll be finishing up our user profile page and making it so that users can update their information from this page and also upload a new profile picture.", 'start': 2.051, 'duration': 8.348}, {'end': 15.645, 'text': "We're also going to set this up so that our images are automatically resized when we upload them,", 'start': 10.74, 'duration': 4.905}, {'end': 23.893, 'text': "so that we don't have extremely large images on our file system when we're only displaying these small little 200 pixel images here on the profile.", 'start': 15.645, 'duration': 8.248}, {'end': 25.434, 'text': "So let's go ahead and get started.", 'start': 24.233, 'duration': 1.201}, {'end': 30.178, 'text': "So in order to update our user and profile, we're going to need to create some forms.", 'start': 25.734, 'duration': 4.444}], 'summary': 'Tutorial on finishing user profile page, enabling info updates and image uploads.', 'duration': 29.949, 'max_score': 0.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw229.jpg'}, {'end': 105.956, 'src': 'embed', 'start': 60.139, 'weight': 1, 'content': [{'end': 70.184, 'text': 'and a model form allows us to create a form that will work with a specific database model and in this case we want a form that will update our user model.', 'start': 60.139, 'duration': 10.045}, {'end': 71.865, 'text': "so let's create this.", 'start': 70.184, 'duration': 1.681}, {'end': 84.114, 'text': "so on a new line down here I'm going to create a new class and I'm going to call this user update form And I'm going to inherit from forms.modelForm.", 'start': 71.865, 'duration': 12.249}, {'end': 93.804, 'text': "And within this class, this is going to be very similar to our user register form, except we're not going to use the password and password to here.", 'start': 84.855, 'duration': 8.949}, {'end': 97.408, 'text': 'So we only want to update the username and the email.', 'start': 94.405, 'duration': 3.003}, {'end': 100.752, 'text': "So I'm just going to copy this user register form here.", 'start': 97.789, 'duration': 2.963}, {'end': 105.956, 'text': 'and paste this in and get rid of the password one and password two.', 'start': 101.272, 'duration': 4.684}], 'summary': 'Creating a user update form to update username and email in a database model.', 'duration': 45.817, 'max_score': 60.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw60139.jpg'}], 'start': 0.229, 'title': 'User profile update and image resizing', 'summary': 'Covers the process of updating user profile information and implementing image resizing to avoid large file storage. it focuses on using model forms for user and profile update, specifically updating the username and email.', 'chapters': [{'end': 127.429, 'start': 0.229, 'title': 'User profile update and image resizing', 'summary': 'Covers the process of updating user profile information and implementing image resizing to avoid large file storage, using model forms to create forms for user and profile update, specifically focusing on updating the username and email.', 'duration': 127.2, 'highlights': ['The chapter focuses on updating the user profile page and enabling users to update their information and upload a new profile picture, along with implementing automatic resizing of images upon upload.', 'Model forms are utilized to create a form for updating the user model, specifically focusing on updating the username and email, while excluding the password fields for now.', 'The user update form is created using the model form, allowing the form to work with the specific database model to update the user information, specifying the fields for username and email.']}], 'duration': 127.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw229.jpg', 'highlights': ['Enabling users to update profile information and upload profile picture with automatic image resizing.', 'Utilizing model forms to create a form for updating the user model, focusing on username and email.', 'Creating user update form using model form to work with database model for username and email.']}, {'end': 473.078, 'segs': [{'end': 252.633, 'src': 'heatmap', 'start': 138.332, 'weight': 0, 'content': [{'end': 142.973, 'text': "But since we'll be working with the profile model, we first need to import that.", 'start': 138.332, 'duration': 4.641}, {'end': 147.435, 'text': "So here at the top, I'm going to say from dot models.", 'start': 143.314, 'duration': 4.121}, {'end': 154.682, 'text': 'import profile and now we can create that profile form.', 'start': 148.095, 'duration': 6.587}, {'end': 167.795, 'text': "so I'm going to call this class profile update form and I'm going to inherit from that forms dot model form and now we don't want to add any additional fields here,", 'start': 154.682, 'duration': 13.113}, {'end': 179.601, 'text': 'so we can just jump straight into that class meta and within that class meta we can say that the model that we want to work with is profile and the fields that we want to work with.', 'start': 167.795, 'duration': 11.806}, {'end': 184.424, 'text': "this is still going to be a list, but it's only going to be a list of one value and it's going to be image.", 'start': 179.601, 'duration': 4.823}, {'end': 192.448, 'text': 'okay. so now we have two forms here a user update form and a profile update form, and the user form will allow us to update our username and email,', 'start': 184.424, 'duration': 8.024}, {'end': 195.731, 'text': 'And the profile form will allow us to update our image.', 'start': 192.908, 'duration': 2.823}, {'end': 201.657, 'text': "But whenever we actually put this on the template, it's going to look like just one form.", 'start': 196.071, 'duration': 5.586}, {'end': 208.263, 'text': "Okay, so with those forms created, let's open up our views so that we can add these forms to our profile view.", 'start': 201.977, 'duration': 6.286}, {'end': 212.788, 'text': "So I'm going to open up our user app views here.", 'start': 209.004, 'duration': 3.784}, {'end': 217.354, 'text': "Now, first, let's add the forms that we just created.", 'start': 213.468, 'duration': 3.886}, {'end': 218.395, 'text': "So let's import these.", 'start': 217.414, 'duration': 0.981}, {'end': 224.243, 'text': "So we'll import these from the forms module and we're already importing this user register form.", 'start': 218.736, 'duration': 5.507}, {'end': 228.309, 'text': 'So now we can just add on the user update form.', 'start': 224.624, 'duration': 3.685}, {'end': 232.113, 'text': 'and the profile update form.', 'start': 229.029, 'duration': 3.084}, {'end': 238.019, 'text': "And now down here within our profile, let's create instances of these.", 'start': 232.573, 'duration': 5.446}, {'end': 246.488, 'text': "So for our user update form, I'll just call this you underscore form and set that to a user update form.", 'start': 238.419, 'duration': 8.069}, {'end': 249.311, 'text': 'And let me fix the spacing there.', 'start': 247.169, 'duration': 2.142}, {'end': 252.633, 'text': 'And we just want to instantiate that as empty for now.', 'start': 249.751, 'duration': 2.882}], 'summary': 'Creating and adding user and profile update forms to the views.', 'duration': 80.063, 'max_score': 138.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw138332.jpg'}, {'end': 350.533, 'src': 'heatmap', 'start': 313.016, 'weight': 0.715, 'content': [{'end': 316.098, 'text': "so I'm going to open up the register route.", 'start': 313.016, 'duration': 3.082}, {'end': 323.083, 'text': "so within our users templates I'm going to open up register.html and i'm just going to grab this form section here.", 'start': 316.098, 'duration': 6.985}, {'end': 327.725, 'text': 'so from the opening form tag to the closing form tag, i will copy that.', 'start': 323.083, 'duration': 4.642}, {'end': 332.366, 'text': 'and now, within our profile template, so profile.html.', 'start': 327.725, 'duration': 4.641}, {'end': 337.228, 'text': 'i have a comment here that says this is where i want to drop my form.', 'start': 332.366, 'duration': 4.862}, {'end': 350.533, 'text': "so i'm just going to drop the form right there and then fix the indentations there and save that and remember from that video that we are using these crispy forms applications to print these forms out.", 'start': 337.228, 'duration': 13.305}], 'summary': 'Adding a registration form from register.html to profile.html.', 'duration': 37.517, 'max_score': 313.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw313016.jpg'}, {'end': 447.267, 'src': 'embed', 'start': 377.951, 'weight': 2, 'content': [{'end': 386.297, 'text': "but we're going to put the fields for both of these forms into a single HTML form so that the user sees it as one.", 'start': 377.951, 'duration': 8.346}, {'end': 388.218, 'text': "So let's see what this looks like.", 'start': 386.697, 'duration': 1.521}, {'end': 395.183, 'text': "So I'm going to change this form to contain both of our user form and our profile form fields.", 'start': 388.558, 'duration': 6.625}, {'end': 399.644, 'text': "So I'm just going to copy this section here and just put it in twice.", 'start': 395.623, 'duration': 4.021}, {'end': 404.485, 'text': 'And this first one here will be our U underscore form for our user form.', 'start': 400.084, 'duration': 4.401}, {'end': 409.366, 'text': 'And the P underscore form will be the fields for our profile form.', 'start': 405.105, 'duration': 4.261}, {'end': 414.247, 'text': "And now I'll also change a couple of other things with this form to make it specific to our profile page.", 'start': 409.706, 'duration': 4.541}, {'end': 419.368, 'text': 'So for example, our legend here says join today because that was our register template.', 'start': 414.567, 'duration': 4.801}, {'end': 423.289, 'text': 'But now we want this to say something like profile info.', 'start': 419.688, 'duration': 3.601}, {'end': 429.093, 'text': "and down here with the submit button it says sign up, but now we're going to be updating our profile.", 'start': 423.829, 'duration': 5.264}, {'end': 432.876, 'text': "so let's change this to say update and save that.", 'start': 429.093, 'duration': 3.783}, {'end': 441.123, 'text': 'okay, and one really important thing that I forget to do sometimes that always throws me off is to add a special encoding type to our form.', 'start': 432.876, 'duration': 8.247}, {'end': 447.267, 'text': 'now we have to do this in order for our form to pass our image data for our profile picture properly.', 'start': 441.123, 'duration': 6.144}], 'summary': 'Combining user and profile form fields into one html form, updating form labels and encoding type for profile page.', 'duration': 69.316, 'max_score': 377.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw377951.jpg'}], 'start': 127.769, 'title': 'Creating user and profile update forms', 'summary': 'Covers creating user and profile update forms, enabling updates to username, email, and image, importing the profile model, creating form instances, and modifying a profile form in django, including adding multiple form fields and setting encoding type to multipart/form-data.', 'chapters': [{'end': 299.965, 'start': 127.769, 'title': 'Creating user and profile update forms', 'summary': 'Covers creating user and profile update forms, with the user form enabling updates to username and email, and the profile form enabling updates to the image. it also involves importing the profile model, creating instances of the forms, and passing them into the template context.', 'duration': 172.196, 'highlights': ['The chapter covers creating user and profile update forms, with the user form enabling updates to username and email, and the profile form enabling updates to the image.', 'It involves importing the profile model and creating a class called profile update form, inheriting from forms.modelForm, and specifying the model and fields to work with, such as image.', 'The process includes adding the user and profile update forms to the views, creating instances of these forms, and passing them into the template context using a dictionary.']}, {'end': 473.078, 'start': 299.965, 'title': 'Update profile form in django', 'summary': 'Covers the process of updating and modifying a profile form in django, including adding multiple form fields, changing form legends and submit button texts, and setting the encoding type to multipart/form-data for proper image data submission.', 'duration': 173.113, 'highlights': ['Adding multiple form fields for user and profile information', 'Changing form legends and submit button texts', 'Setting the encoding type to multipart/form-data for image data submission']}], 'duration': 345.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw127769.jpg', 'highlights': ['The chapter covers creating user and profile update forms, with the user form enabling updates to username and email, and the profile form enabling updates to the image.', 'Involves importing the profile model and creating a class called profile update form, inheriting from forms.modelForm, and specifying the model and fields to work with, such as image.', 'Adding multiple form fields for user and profile information', 'The process includes adding the user and profile update forms to the views, creating instances of these forms, and passing them into the template context using a dictionary.', 'Setting the encoding type to multipart/form-data for image data submission', 'Changing form legends and submit button texts']}, {'end': 1041.839, 'segs': [{'end': 501.535, 'src': 'embed', 'start': 473.178, 'weight': 4, 'content': [{'end': 475.6, 'text': 'And that can be something that is kind of hard to debug.', 'start': 473.178, 'duration': 2.422}, {'end': 482.365, 'text': "Okay, so with those changes made, let's see what this looks like in our browser to make sure that this is working so far.", 'start': 476.38, 'duration': 5.985}, {'end': 486.988, 'text': "So I'm going to save all of those files and open up our terminal here.", 'start': 482.725, 'duration': 4.263}, {'end': 492.331, 'text': 'And it looks like we have an issue with one of our forms.', 'start': 487.408, 'duration': 4.923}, {'end': 496.194, 'text': "Now it's saying that we don't have a fields attribute for one of our model forms.", 'start': 492.631, 'duration': 3.563}, {'end': 499.235, 'text': "Now, I don't think that is true.", 'start': 496.554, 'duration': 2.681}, {'end': 501.535, 'text': 'Okay, so I misspelled fields here.', 'start': 499.415, 'duration': 2.12}], 'summary': 'Debugging code, fixing form issue, misspelled fields attribute.', 'duration': 28.357, 'max_score': 473.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw473178.jpg'}, {'end': 590.925, 'src': 'embed', 'start': 560.394, 'weight': 3, 'content': [{'end': 566.416, 'text': "So first of all, let's populate these regular forms with the current information of the logged in user.", 'start': 560.394, 'duration': 6.022}, {'end': 568.396, 'text': 'And this is really easy to do.', 'start': 566.816, 'duration': 1.58}, {'end': 575.198, 'text': 'So remember, these are model forms that are expecting to be working on a specific model object.', 'start': 568.756, 'duration': 6.442}, {'end': 581.581, 'text': 'So we can populate the fields of the form just by passing in an instance of the object that it expects.', 'start': 575.658, 'duration': 5.923}, {'end': 590.925, 'text': "So for the user update form, that will be an instance of a user and the profile update form, that'll be an instance of a profile.", 'start': 582.021, 'duration': 8.904}], 'summary': 'Populate model forms with current user information.', 'duration': 30.531, 'max_score': 560.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw560394.jpg'}, {'end': 676.471, 'src': 'embed', 'start': 649.016, 'weight': 1, 'content': [{'end': 656.258, 'text': "So we'll say if the request.method is equal to a post, then we'll go ahead and create some forms.", 'start': 649.016, 'duration': 7.242}, {'end': 663.261, 'text': "And if it is not, then let's also grab another thing of forms here for now.", 'start': 656.739, 'duration': 6.522}, {'end': 672.347, 'text': 'Okay, so within our post conditional, this is what will be run when we submit our form and possibly pass in new data.', 'start': 663.541, 'duration': 8.806}, {'end': 676.471, 'text': 'so we want to pass in the post data into our forms.', 'start': 672.347, 'duration': 4.124}], 'summary': 'Creating forms based on request method, post data passed in.', 'duration': 27.455, 'max_score': 649.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw649016.jpg'}, {'end': 825.243, 'src': 'embed', 'start': 802.01, 'weight': 2, 'content': [{'end': 809.354, 'text': "so once our form information is updated, then let's give some feedback to our user, letting them know that they've updated their profile,", 'start': 802.01, 'duration': 7.344}, {'end': 813.436, 'text': "and then we'll also redirect them back to the profile page.", 'start': 809.354, 'duration': 4.082}, {'end': 815.937, 'text': 'so again, this is very similar to our register route.', 'start': 813.436, 'duration': 2.501}, {'end': 820.42, 'text': "so I'm going to copy from here because we already have a success message and a redirect up here.", 'start': 815.937, 'duration': 4.483}, {'end': 825.243, 'text': "So I'm going to copy those and within this is valid conditional.", 'start': 820.86, 'duration': 4.383}], 'summary': 'Update user profile with feedback and redirect.', 'duration': 23.233, 'max_score': 802.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw802010.jpg'}, {'end': 1041.839, 'src': 'embed', 'start': 1017.535, 'weight': 0, 'content': [{'end': 1025.664, 'text': "So there's no use in having a huge 4000 pixel image that just gets scaled down to 125 pixels.", 'start': 1017.535, 'duration': 8.129}, {'end': 1034.814, 'text': 'It takes up a lot of space on the file system and it also caused your website to run slow because it has to send that large image to the browser every time.', 'start': 1026.064, 'duration': 8.75}, {'end': 1041.839, 'text': "so, for example, we can see that this image is really large, and it's actually larger than what i think it's showing up here in the browser,", 'start': 1035.114, 'duration': 6.725}], 'summary': 'Large images slow website, optimize for faster loading', 'duration': 24.304, 'max_score': 1017.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1017535.jpg'}], 'start': 473.178, 'title': 'Debugging form issues and profile update process', 'summary': 'Covers debugging form field issues, correcting misspelled attributes, populating form fields with user data, profile update process, handling post requests, validating form data, saving user information, providing feedback, and implementing image file resizing for website performance optimization.', 'chapters': [{'end': 626.791, 'start': 473.178, 'title': 'Debugging form issues and populating form fields', 'summary': 'Discusses debugging issues with form fields, correcting field attribute misspelling, and populating form fields with current user information in a web development context.', 'duration': 153.613, 'highlights': ['Debugging form issues and correcting field attribute misspelling', 'Populating form fields with current user information']}, {'end': 1041.839, 'start': 627.111, 'title': 'Profile update process', 'summary': 'Discusses the process of updating user profiles, including handling post requests, validating form data, saving user information, providing user feedback, and implementing image file resizing to optimize website performance.', 'duration': 414.728, 'highlights': ['Implementing the post request handling and form data validation process', 'Providing user feedback and redirecting after profile update', 'Resizing images for optimal website performance']}], 'duration': 568.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw473178.jpg', 'highlights': ['Resizing images for optimal website performance', 'Implementing the post request handling and form data validation process', 'Providing user feedback and redirecting after profile update', 'Populating form fields with current user information', 'Debugging form issues and correcting field attribute misspelling']}, {'end': 1553.935, 'segs': [{'end': 1073.754, 'src': 'embed', 'start': 1041.839, 'weight': 2, 'content': [{'end': 1045.042, 'text': "because it's scaled down a little bit, just so it can fit.", 'start': 1041.839, 'duration': 3.203}, {'end': 1050.769, 'text': "so to resize images when we upload them, we're going to use a package called pillow, and if you remember,", 'start': 1045.042, 'duration': 5.727}, {'end': 1058.096, 'text': 'we actually already installed pillow when we first used the image field in our profile model, because it needs that for the back end.', 'start': 1050.769, 'duration': 7.327}, {'end': 1064.464, 'text': "So in order to resize this image, we're going to override the save method of our profile model.", 'start': 1058.497, 'duration': 5.967}, {'end': 1066.507, 'text': "So let's open up that model.", 'start': 1064.825, 'duration': 1.682}, {'end': 1073.754, 'text': "So, within our project, let's go to our users app and open up our models,", 'start': 1066.667, 'duration': 7.087}], 'summary': 'Using pillow package to resize images for profile model.', 'duration': 31.915, 'max_score': 1041.839, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1041839.jpg'}, {'end': 1120.357, 'src': 'embed', 'start': 1093.661, 'weight': 3, 'content': [{'end': 1099.925, 'text': "It's a method that already exists in our parent class, but we're creating our own so that we can add some functionality.", 'start': 1093.661, 'duration': 6.264}, {'end': 1107.251, 'text': "So first things first, I'm actually going to run the save method of our parent class and we can do this with super.", 'start': 1100.306, 'duration': 6.945}, {'end': 1112.954, 'text': 'So if we want to run the save method of our parent class, we can say super and then dot save.', 'start': 1107.551, 'duration': 5.403}, {'end': 1120.357, 'text': 'So that parent classes save method would have been run when we saved an instance of this profile anyways.', 'start': 1113.855, 'duration': 6.502}], 'summary': "Creating a custom method to add functionality by calling the parent class's save method using super.", 'duration': 26.696, 'max_score': 1093.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1093661.jpg'}, {'end': 1164.081, 'src': 'heatmap', 'start': 1125.538, 'weight': 0.874, 'content': [{'end': 1129.239, 'text': "But now we're going to grab the image that it saved and resize it.", 'start': 1125.538, 'duration': 3.701}, {'end': 1133.5, 'text': "So to do this, we're going to need to import that pillow library.", 'start': 1129.599, 'duration': 3.901}, {'end': 1143.222, 'text': 'So within our imports, we will come up here and say from PIL and we specifically want to import image from that library.', 'start': 1133.84, 'duration': 9.382}, {'end': 1146.985, 'text': 'So now come back down here in our save method.', 'start': 1143.602, 'duration': 3.383}, {'end': 1150.789, 'text': "And now let's open the image for the instance that we're saving.", 'start': 1147.406, 'duration': 3.383}, {'end': 1158.355, 'text': 'Now, if any of this class stuff is confusing to you, then I do have a series on working with classes in Python that you might be interested in.', 'start': 1151.169, 'duration': 7.186}, {'end': 1164.081, 'text': 'And in that series, I go over classes and instances and what the self variable is and everything like that.', 'start': 1158.616, 'duration': 5.465}], 'summary': 'Using the pillow library, we resize the saved image in python.', 'duration': 38.543, 'max_score': 1125.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1125538.jpg'}, {'end': 1158.355, 'src': 'embed', 'start': 1133.84, 'weight': 4, 'content': [{'end': 1143.222, 'text': 'So within our imports, we will come up here and say from PIL and we specifically want to import image from that library.', 'start': 1133.84, 'duration': 9.382}, {'end': 1146.985, 'text': 'So now come back down here in our save method.', 'start': 1143.602, 'duration': 3.383}, {'end': 1150.789, 'text': "And now let's open the image for the instance that we're saving.", 'start': 1147.406, 'duration': 3.383}, {'end': 1158.355, 'text': 'Now, if any of this class stuff is confusing to you, then I do have a series on working with classes in Python that you might be interested in.', 'start': 1151.169, 'duration': 7.186}], 'summary': 'Import image from pil library and open image in save method.', 'duration': 24.515, 'max_score': 1133.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1133840.jpg'}, {'end': 1240.458, 'src': 'embed', 'start': 1206.171, 'weight': 0, 'content': [{'end': 1208.812, 'text': "So let's resize it somewhere closer to that.", 'start': 1206.171, 'duration': 2.641}, {'end': 1213.514, 'text': "So I think I'll choose around 300 pixels, since that's still a small image,", 'start': 1209.112, 'duration': 4.402}, {'end': 1217.835, 'text': "but it still gives us some flexibility to display larger images in the future if we'd like.", 'start': 1213.514, 'duration': 4.321}, {'end': 1222.477, 'text': "And if images are larger than this, then they'll be sized down.", 'start': 1218.815, 'duration': 3.662}, {'end': 1228.3, 'text': "So first let's check if this current image is more than 300 pixels.", 'start': 1222.857, 'duration': 5.443}, {'end': 1240.458, 'text': 'So we can say if img.height dot height is greater than 300 or if the IMG dot width is greater than 300.', 'start': 1228.58, 'duration': 11.878}], 'summary': 'Images will be resized to 300 pixels for flexibility and display.', 'duration': 34.287, 'max_score': 1206.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1206171.jpg'}, {'end': 1312.373, 'src': 'embed', 'start': 1285.467, 'weight': 5, 'content': [{'end': 1291.032, 'text': 'now i should say that i found a lot of different ways to resize images like this when i looked online.', 'start': 1285.467, 'duration': 5.565}, {'end': 1294.956, 'text': 'some of them were a lot more complicated than what i wanted to show you here.', 'start': 1291.032, 'duration': 3.924}, {'end': 1297.598, 'text': 'but there are probably some trade-offs also.', 'start': 1294.956, 'duration': 2.642}, {'end': 1304.984, 'text': "but really i just wanted to show you an example of what it's like to override the save method of a model and i think that this is a good example.", 'start': 1297.598, 'duration': 7.386}, {'end': 1308.688, 'text': 'but if you are working on a larger project where efficiency is really important,', 'start': 1304.984, 'duration': 3.704}, {'end': 1312.373, 'text': 'then there are some additional ways in which you can do something like this also.', 'start': 1309.048, 'duration': 3.325}], 'summary': 'Override model save method to resize images efficiently in larger projects.', 'duration': 26.906, 'max_score': 1285.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1285467.jpg'}, {'end': 1526.125, 'src': 'heatmap', 'start': 1486.196, 'weight': 1, 'content': [{'end': 1492.943, 'text': "And then one of my own custom classes here, I'm going to put this as article dash image and save this.", 'start': 1486.196, 'duration': 6.747}, {'end': 1500.708, 'text': "So now with that in place, Let's save everything and open this up in our browser and see if these changes took effect.", 'start': 1493.463, 'duration': 7.245}, {'end': 1503.31, 'text': 'So open up our homepage and reload this.', 'start': 1501.029, 'duration': 2.281}, {'end': 1507.973, 'text': "And now we can see that the author's image is popping up beside their post.", 'start': 1503.73, 'duration': 4.243}, {'end': 1510.715, 'text': "And I think that's a nice way to kind of spice up the homepage there.", 'start': 1507.993, 'duration': 2.722}, {'end': 1513.316, 'text': 'Okay, so I think that is going to do it for this video.', 'start': 1511.155, 'duration': 2.161}, {'end': 1519.701, 'text': 'We now have a way for a user to update their profile information and they can also update their profile pictures.', 'start': 1513.757, 'duration': 5.944}, {'end': 1526.125, 'text': "Now in the next video, we'll create a page where different users can create posts that will then get added to the homepage here.", 'start': 1520.041, 'duration': 6.084}], 'summary': "Implemented feature to display author's image beside post, enabling profile and picture updates for users.", 'duration': 39.929, 'max_score': 1486.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1486196.jpg'}], 'start': 1041.839, 'title': 'Resizing images and displaying user images', 'summary': 'Discusses using the pillow package to resize images, overriding the save method in the profile model, importing the pil library for image manipulation, resizing images to 300 pixels, overriding the save method of a model, and displaying user images on the homepage, potentially saving space and speeding up the website, with the approach being suitable for the current application.', 'chapters': [{'end': 1178.575, 'start': 1041.839, 'title': 'Resizing images with pillow package', 'summary': 'Discusses using the pillow package to resize images when uploading them, overriding the save method in the profile model, and importing the pil library for image manipulation.', 'duration': 136.736, 'highlights': ["To resize images when uploading them, we're going to use a package called pillow, which we already installed when we first used the image field in our profile model.", "We're going to override the save method of our profile model by creating our own save method and using the super() function to run the save method of our parent class.", 'We need to import the PIL library and specifically import the image module for image manipulation within our save method.']}, {'end': 1553.935, 'start': 1178.575, 'title': 'Resizing images and displaying user images', 'summary': 'Explains how to resize images to 300 pixels, override the save method of a model, and display user images on the homepage, potentially saving space and speeding up the website, with the approach being suitable for the current application.', 'duration': 375.36, 'highlights': ['The chapter demonstrates how to resize images to 300 pixels, potentially saving space and speeding up the website, with flexibility for displaying larger images in the future.', 'The explanation includes overriding the save method of a model to automatically resize and save images, showcasing a practical example.', 'The chapter also covers displaying user images on the homepage, enhancing the visual appeal and user experience of the website.']}], 'duration': 512.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/CQ90L5jfldw/pics/CQ90L5jfldw1041839.jpg', 'highlights': ['The chapter demonstrates how to resize images to 300 pixels, potentially saving space and speeding up the website, with flexibility for displaying larger images in the future.', 'The chapter also covers displaying user images on the homepage, enhancing the visual appeal and user experience of the website.', "To resize images when uploading them, we're going to use a package called pillow, which we already installed when we first used the image field in our profile model.", "We're going to override the save method of our profile model by creating our own save method and using the super() function to run the save method of our parent class.", 'We need to import the PIL library and specifically import the image module for image manipulation within our save method.', 'The explanation includes overriding the save method of a model to automatically resize and save images, showcasing a practical example.']}], 'highlights': ['Enabling users to update profile information and upload profile picture with automatic image resizing.', 'Creating user and profile update forms, with the user form enabling updates to username and email, and the profile form enabling updates to the image.', 'Resizing images for optimal website performance', 'The chapter demonstrates how to resize images to 300 pixels, potentially saving space and speeding up the website, with flexibility for displaying larger images in the future.', 'Implementing the post request handling and form data validation process']}