New component proposal

Hello everyone, I was thinking about a component that could be interesting to integrate natively into FW7.
Most apps, when you need to authenticate, also allow you to edit your profile information including your profile pic.

Editing the profile image is always quite delicate and always includes a step where you have to resize or crop the image. Natively on FW7 there is nothing ready to be able to crop an image.

In my case I use (on other frameworks or projects) Cropper.js (fengyuanchen.github.io) that is quite good.
Using cropper.js with Fw7 is a bit annoying, especially when you have to open modals to crop, choose aspect ratio and see previews. The result is always way off from the pixel perfect style that Fw7 has with the MD and iOS theme.

@nolimits4web
Would it be difficult for you to integrate such stuff perfectly integrated with the FW7 UI? But especially would you be interested in doing it?

I think that a developer needs is:

  • A way to pass an image to the FW7 cropper
  • A way to customize the cropper with parameters
  • an output image that the developer can pass to an external api.

This could be a really cool component to have in the framework.

4 Likes

Good idea!

Some time ago I was using this lib GitHub - Foliotek/Croppie: A Javascript Image Cropper, worked pretty well with F7. I don’t think it is worth including similar lib to the core, as it could be pretty large I guess, and anyway as I see now there is no well maintained library of such kind. But I will think about it, maybe will do some example template for Framework7 utilizing such library wrapped and styled with F7 styles

Yes indeed adding libraries outside the core would be very heavy and not very useful.
Is it so difficult to write a feature like this from scratch to in order to be integrated into F7?

However a well integrated example in f7, tutorial style, could be a nice solution to decrease your workload.

Is there any news for any examples or implementation of something similar inside the FW7 core? Img cropper with Fw7 would be great @nolimits4web

Hopefully I will do it this month (within couple of weeks)

4 Likes

u awesome :sunglasses: we look forward to it :smiling_face_with_three_hearts:

1 Like

Here it goes Avatar Picker | UI Initiative

3 Likes

hi nolimits4web please can you help me to integrate croppie into my android project ? can you show me the way ? i ve try many many times unseccesfully

Would be fine:

  • access routes data from everywhere (view and not)
  • popup card-stype backdrop (see image)