The New Way to Build! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Learn More

Image input + crop


Hello. Could anyone recommend a practical example or reference of using the Image input plugin with image cropping and resizing? I'm using the HTML version and coding with PHP and an example would be great to continue our development.


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)


You can use a built-in PHP library like Intervention Image Connections NYT to manipulate images in your application.



Hi,

To crop the image it should be uploaded and temporarily saved on the server. You can consider ajax image upload for temporary storing and process it with the image crop component and submit the edited image. Did some research but could not find a solution for editing the user's attached image before posting it. If you have any info on this please let us know.

Regards



Same thing here Lairison,

I posted a comment once on Metronic themeforest, about if Keenthemes could create an example of when you click on KT_Image upload button a crop modal gonna show up to cropt the image, when you finish, that cropped images will be uploded to the KT_image wich gonna be uploaded to server once you click on submit the form.

They said we will consider this.

Here a occasion to remember them again, LoL

Thank you.


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  :(