Add user profile images

[ian-ross]

Allow users to upload and manage an image for their profile (depends on Resources):

• Profile image in top bar
• Profile image upload in user profile page (use an image cropping widget)
• Profile image display, replacement and deletion in user profile
• Profile image display in user management list

FIRST TIME CONTRIBUTORS: Please outline your thoughts on how to develop this before submitting any code changes. Keep in mind the various sizes that might be needed across the platform and make recommendations on how to best handle those.

Sample placements below

Header area next to username:

Member list used in an overview page:

Member permissions page:

[wonderchook]

@dpalomino backlog again :)

[dpalomino]

Included, thanks!

[clash99]

@dpalomino Is this first contributor friendly? I think it would be important for a contributor to outline their thought process before working on any code. Thoughts?

[wonderchook]

I think if they outlined their process it could be.

[clash99]

@wonderchook - cool, thanks! I'll update the description with those details.

[pranjaltale16]

@wonderchook @clash99
Hello, I would like to work on this issue.

In order to add an Image upload option:

1. A new field will be added in User model like 'user_image = models.ImageField()' with all the parameters defined and for image cropper we can use django-image-cropper, also this field will have constraint blank = True so that in case the user doesn't want to provide image a default image will appear
2. Uploaded images will be stored in /cadasta/core/media/s3/uploads directory ("please correct me if I am wrong") and all the files will be included in .gitignore.
3. Once the field is added, I will complete the integration with django-templates in all the required places mentioned above.
4. Image Upload option will be there on Update profile page and we can keep it on SignUp page too.
5. Accordingly, modelForms( for Update Profile) and serializers ( for api ) will also be updated.

I hope this will satisfy all your requirements for the outline. If not please suggest what other details I should incorporate so that I can start working on it.

[pranjaltale16]

Hello,
I checked for the file-upload in resources app and came know about django-buckets.
So, I believe it would be better to use S3FileField instead of models.ImageField for image upload.
I have tried it on my local account and it seems to be working fine.

[bjohare]

Hi @pranjaltale16, thanks for your proposed outline. You should address the requirement that profile images need to be displayed at different sizes at various points in the platform. See guidelines for first time contributors in @ian-ross's original post above. See https://github.com/Cadasta/cadasta-platform/blob/master/cadasta/resources/models.py for possible approaches.

[pranjaltale16]

Hello, @bjohare
For

the requirement that profile images need to be displayed at different sizes at various points in the platform.

I believe it's better to save a single image and apply required dimensions at each place directly in templates / CSS.
If there is something else in order to approach this please explain.

And for /cadasta/resources/models.py I have implemented image upload using S3FileField on my local account and it is working fine.
Is there anything else to look upon?

[bjohare]

@pranjaltale16 according to what you're proposing, we would need to send the full image to the client in cases where we only need to send a thumbnail, for example in the profile section of the top bar and in places where we list users. This is not an acceptable approach.

[pranjaltale16]

@bjohare I thought of two methods to work upon:

1. Generate and save a thumbnail image simultaneously along with the original image(but this needs more space or more storage).
2. While sending the image to templates we can send it after processing it with either PIL library or easy-thumbnails.

The second one would be a better option I suppose.
I took ref from this.
I came up with these two possible solutions, Is there any other way to approach this?

[wonderchook]

@pranjaltale16 it would be better to do all processing when the profile photo is uploaded. What you are suggesting now would work now, but would cause undue load on the server so as traffic to Cadasta increases would be problematic.

[pranjaltale16]

@wonderchook @bjohare
So it would be a better option to continue with point 1 that is

Generate and save a thumbnail image simultaneously along with the original image. ?

[pranjaltale16]

@wonderchook @bjohare
Can you please look at this, is it okay to continue with this or is there anything else to look upon to before start working?

[oliverroick]

@pranjaltale16 Yes, you need to process the image when it's uploaded. We already have functionality to create thumbnails in place for resources. Please have a look at those parts, I'm sure there is code you can re-use. It might need some refactoring though to make it generic.

[bjohare]

@pranjaltale16 have a look at https://github.com/Cadasta/cadasta-platform/blob/master/cadasta/resources/models.py again. We create thumbnails when the resource is uploaded. There is also a thumbnails property which gives access to the thumbnail url. For user profile photos we would need to have multiple versions of the profile image at different sizes but the principle is exactly the same.

[pranjaltale16]

@oliverroick @bjohare
Thanks for the reference, I just went through it and it indeed can be used to create profile thumbnails.
Can I start working on it now?

[bjohare]

@pranjaltale16 please go ahead..

[pranjaltale16]

@bjohare Thanks!

[pranjaltale16]

Hello again,
I have made prior changes with reference to profile image upload.
I have added S3FileField for profile image upload also I added thumbnail function in order to save its thumbnail image.
I have added corresponding photos to header area and the member permissions page but I can't find the dashboard option in overview page, please help me out.

[wonderchook]

Can you point me to the mock up above you are referring to? It might not exist yet.

[clash99]

@pranjaltale16 - The dashboard isn't developed yet. It is still in discussion.

[pranjaltale16]

@clash99 @wonderchook here is the link for the mock-up that I was talking about
I am done with other things, I will make a make a Pull Request then.
Thanks.

[dpalomino]

Backlog id 13.00

[dpalomino]

Dup of #1485. Closing.