Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Image input - Allow to crop


Hi,

https://preview.keenthemes.com/html/metronic/docs/forms/image-input

Your Image Input component UI is impressive, especially when you support both square & circle styles which is quite suitable for a Avatar uploader. However, there is always a cropper tool in an Avatar uploader because we do not know the aspect / sizes of the image that user will upload unless we accept the distortion. In fact, you can find it on Facebook Avatar Uploader or any other applications.

I see that we have Cropper.js
https://preview.keenthemes.com/html/metronic/docs/general/cropper

Hence, I want to know that are you going to implement a simple cropper feature in Image Input component?

If you have a plan for it, I will wait. On the other hand, could you please add a demo to instruct how to integrate a simple Cropper.js into Image Input so that we can follow up? I appreciate any approach you could do.

Thanks


W
WilinkNet 3 years ago
HTML
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Sean Author 3 years ago

Hi,

We will consider this but at the moment we can't confirm the ETA for it. Usually, user avatars should be displayed as background images with horizontal and vertical centered positions as shown here.

Regards.


W
WilinkNet 3 years ago

Frankly, I love a simple cropper tool like the below for a avatar uploader


It is as similiar as the one in Facebook that is quite familiar with most of the user.

Althought, I aware that Cropper.js & Metronic layout absolutely can do it, the style is my biggest concern which should be compatible with the whole site. Could you please help to supply a comparable example of Cropper.js?

Thanks


user
Nuriddin Kamardinov 2 years ago

Dear WilinkNet.
I need it too now. Have you found an easy solution? It is a challenging to integrate cropper with templates image input.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(