Image support

[nfoert]

Support the ability to upload images

• Upload a profile picture for the user (With Profile page #42)
• Upload a profile picture to a card

The two profile pictures should be kept separate in order to allow the user to have more control in case they make multiple cards. This will also need to have support for downscaling the image and have a limit on the upload size.

[spline2hg]

hey i want to make this feature, what service are we planning to use to store for the uploaded image, is cloudinary ok?or any other way,i am also interested on working on the profile page ,update me on this i have started with development practices

[nfoert]

Hey @spline2hg! Sure, the issue is all your yours!

I was planning on using the basic django file management which stores files on disk, this would require some kind of disk space to be setup in production.

Do let me know if you have any questions!

[spline2hg]

hey @nfoert i get it so i am storing uploaded images in media directory, and i have created a profile model with one to one field with user model for the profile image ,and how will the interface be , i was thinking of putting the current profile image on /home to the right of "hello username" and my cards and below that a choose file and submit button for updating the profile image , i was also thinking of creating a diff page for updating profile but couldnt get how will that work , whats ur thought about it

[nfoert]

Hey @spline2hg! It sounds like you're making good progress on this.

• Would it be better to instead just have the profile picture as a field on the User model? Do you have a specific ideas on how a Profile model could be beneficial in other cases?
• Part of my intention was that the upload buttons would be inside some kind of /profile page, with Profile page #42, like you suggested. Perhaps this is a UI that needs created first to offer an easier place to upload the images? I'm not super certain on the most organized way to work on both of these issues at once.

@chidoziemanagwu was interested in working on the email system and was also asking about the profile page, as they need a place to add the change password and delete account OTPs. Perhaps I could create a basic profile UI so that both issues could be worked on at once, what are your thoughts?

[spline2hg]

@nfoert the profile model was just to separate the fields , if we add more fields like banner image,age or social link they could go in profile model, it just gives a bit better understanding this way personally, so should i keep the profile model or put it in user model?

And for the interface :

i am planning on making something like this , the change password and delete could either toggle a input box for the email message or take to a different page ,we could work around that , so what are ur thoughts

[nfoert]

@spline2hg

if we add more fields like banner image,age or social link they could go in profile model, it just gives a bit better understanding this way personally, so should i keep the profile model or put it in user model?

That makes sense to me, I think using a profile model would be a good call for now, maybe in future if no other data is used in the profile model it could be migrated to the User model, but for now a Profile model is a good call!

i am planning on making something like this , the change password and delete could either toggle a input box for the email message or take to a different page ,we could work around that , so what are ur thoughts

I think that maybe it could be just a single page instead of two for simplicity, but otherwise I think it's perfect.
There's a wiki page here for the appearence of each of the UI elements, and I'd be happy to help if you have any other questions.

[spline2hg]

@nfoert yeah sure i will continue with profile model

And for the Single Page Layout:
having a unified layout that dynamically switches between viewing and editing modes.

Display Section:
Initially show the user’s profile information, such as username, email, profile image, and bio.
Include an "Edit" button to switch to edit mode.

Edit Section:
Upon clicking the "Edit" button, replace the display section with editable fields (text inputs for username and email, file upload for the profile image).

something like this right ?ig we can use either javascript or django templating right?

and for the styling can i use tailwind?
and currently i have my uni exams so this may take quite some time to finish,thanks

[nfoert]

@spline2hg, this sounds like a good plan! The main issue for the profile page and it's UI is #42.

something like this right ?ig we can use either javascript or django templating right?

Yes this would be perfect, all of the other UI for this has been done in JavaScript already, so I think using JavaScript would be the way to go here. Additionally you can use Alpine.js as well.

and for the styling can i use tailwind?

For styling right now it's just vanilla CSS, I would prefer to stick with vanilla at this moment, I do have CSS classes for many of the UI elements listed here already.

If you'd prefer I could design the UI for this and you could focus on the functionality for uploading the images? I would be happy to collaborate on this with you

[spline2hg]

@nfoert, I will try to implement the features mentioned in issue #42 and will update you soon.

For the other part, I will be using Alpine.js, and I will stick to vanilla CSS. I am currently going through the existing CSS for the theme and the wiki page.

Regarding the image upload functionality, I have implemented it using the profile model and form, which seems okay to me. I'm currently working on the UI, and it will be done soon. We can make changes to the UI after that.

Please let me know if this revision looks good or if you have any other suggestions.

[spline2hg]

@nfoert and can u share your twitter or anything through which we could have fast communication

[nfoert]

@nfoert, I will try to implement the features mentioned in issue #42 and will update you soon.

I have implemented it using the profile model and form, which seems okay to me. I'm currently working on the UI, and it will be done soon.

Okay, sounds good to me! Thanks for working on this. I don't think I have any other suggestions, I'm looking forwards to seeing the finished page.

@nfoert and can u share your twitter or anything through which we could have fast communication

I don't use twitter or anything, I do have a few other social links on my Portfolio, additionally you can message me on discord @nfoert if that works for you

[spline2hg]

Hey @nfoert ,I've completed the profile page and the editing functionality for user profiles. For switching between view and edit mode i was using alpine but i am not very well with js so i couldnt get it working properly so i am using a is_edit var temporary so to say, i will shift it to alpine js afterwards and if needed, does this seems fine?

Below are the screenshots showcasing the implementation:

Profile page:

Edit mode:

On clicking setting button:

i have not implemented the setting features ,its just the frontend

And to go to the profile page i have put it on home page, suggest for any changes :

I welcome any suggestions for changes and improvements. I’m happy to implement these changes

And regarding the PR , i can either create one with the current changes, the code is a bit mess and exception handling is not done or i could work on this and make a pr in like a week or so, so what do u say?

and one more thing i have directly clone the repo and started working on this , i havent forked it to my github account, and now some changes are done to the repo code ,so how should i push my code, would a simple git pull could work? or what should i do, guide me on this a bit. Thanks

[nfoert]

For switching between view and edit mode i was using alpine but i am not very well with js so i couldnt get it working properly

That's fine with me! If you want to you could create a draft PR and I could help to get the alpine.js part working?

Below are the screenshots showcasing the implementation

This looks great! Thanks for working on this
I do think I would like the UI to be more consistent with the rest of the interfaces, how did you create the UI for this page?
I do know that the way the UI is done right now could probably be improved, perhaps migration to some kind of CSS library could be beneficial

And regarding the PR , i can either create one with the current changes, the code is a bit mess and exception handling is not done or i could work on this and make a pr in like a week or so, so what do u say?

I think it could be good to make a draft pull request now, then I'll be able to view the code changes you're making and I could also help out if you need anything
Marking it as a draft PR means I won't merge it until it's finished, it's okay if the code is still in progress

and one more thing i have directly clone the repo and started working on this , i havent forked it to my github account, and now some changes are done to the repo code ,so how should i push my code, would a simple git pull could work? or what should i do, guide me on this a bit. Thanks

I'm not entirely sure the best way to fix this, however I found these few posts which may help you resolve this:
https://stackoverflow.com/questions/33817118/github-how-to-fork-after-cloning
https://gist.github.com/ElectricRCAircraftGuy/8ca9c04924ac11a50d48c2061d28b090

[spline2hg]

That's fine with me! If you want to you could create a draft PR and I could help to get the alpine.js part working?

Okay, i will create a draft PR as soon as possible

This looks great! Thanks for working on this I do think I would like the UI to be more consistent with the rest of the interfaces, how did you create the UI for this page? I do know that the way the UI is done right now could probably be improved, perhaps migration to some kind of CSS library could be beneficial

Yep the ui need more consistentency with the other pages, currently its just plane css, which css library could we use?

I'm not entirely sure the best way to fix this, however I found these few posts which may help you resolve this: https://stackoverflow.com/questions/33817118/github-how-to-fork-after-cloning https://gist.github.com/ElectricRCAircraftGuy/8ca9c04924ac11a50d48c2061d28b090

Okay i will look into it

[nfoert]

Yep the ui need more consistentency with the other pages, currently its just plane css, which css library could we use?

Currently the project does not use any CSS libraries, it's just plan CSS and some custom UI elements which are described here. I am considering implementing some kind of css library, but am unsure if that would be a wise step with the current layout of the project, what do you think?

[spline2hg]

yep , using any library would be great, and i also think theres some design changes also required , if u can afford to look into it,i have some experience with tailwind, we could go with bootstrap, tailwind or anything similar , ur choice

[nfoert]

i have some experience with tailwind, we could go with bootstrap, tailwind or anything similar

I took a look at tailwind and I think it would be a good library to start using. I am a little bit concerned about the process of migrating the existing styles to tailwind. I've created an issue to discuss this implementation further at #84.

[nfoert]

The ability to upload an image for the user's profile picture has now been implemented in #88.

[spline2hg]

Hey @nfoert, do you have any insights on how to implement file size restrictions for image uploads?

[nfoert]

Hey @nfoert, do you have any insights on how to implement file size restrictions for image uploads?

@spline2hg, I'm not entirely sure the best way to implement this. however I did find a StackOverflow article that describes using a custom validator rule on the Form. This might be the proper way to implement something like this