Image support - Githubissues

nfoert commented 1 week ago

Support the ability to upload images

[ ] Upload a profile picture for the user (With #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 commented 3 days ago

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 commented 2 days ago

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 commented 2 days ago

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 commented 2 days ago

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 #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 commented 2 days ago

@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 commented 1 day ago

@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 commented 1 day ago

@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 commented 1 day ago

@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 commented 7 hours ago

@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 commented 7 hours ago

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

nfoert commented 2 hours ago

@nfoert, I will try to implement the features mentioned in issue https://github.com/nfoert/cardie/issues/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

nfoert / cardie

Image support #46