(re-creation of older C7 idea topic)
Idea
A discussion on the modified Cobalt Image field called AG Picture, lead to the following idea and improvement...
Image upload with (optional) preview and crop feature. Most applicable for single image fields, especially useful for profile avatars and company logos.
Workflow
- select file to upload
- preview image
- crop image interactively (optional)
- save edited image (possible to keep original for further edits?)
Possible solutions & Scripts
Some tutorials and solutions, mostly based on jQuery. There was a project called MooCrop based on MooTools, but it has disappeared. Since Joomla3+ is heading for jQuery, no big lost ;-)
Thanks for listening.
(Edited/Updated - Okt 2013)
J!3.2+ New Template Manager seems to have a CROP/RESIZE for images! Utilize Joomla core functions? Script is jCrop.
(Edited/Updated - FEB 2017)
Related thoughts - Replacements for Mootools powered Uploads
A.) jQuery File Upload
bootstrap style, thumb preview, drag'n drop, but without crop.
Demo & Docs; GitHub project
PS: Looks really nice in frontend, but it seems to consist of a whole bunch of different scripts/plugins. Necessary overhead? Good or Bad?
B.) PLupload
Makers of TinyMCE, also used by DOCman2, Drupal modules etc. PLupload homepage, jQuery Queue Widget example
C.) Bootstrap File Input
"This plugin was initially inspired by... Jasny's File Input plugin. But the plugin has now matured with various additional features and enhancements to be a complete (yet simple) file management tool and solution for web developers."
Homepage with more details; GitHub project; Demos!
D.) DropZone.js
"DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable."
Homepage
Idea
Announcement
Conversation
Praise
Problem
Question
Open
(re-creation of older C7 idea topic)
Idea
A discussion on the modified Cobalt Image field called AG Picture, lead to the following idea and improvement...
Image upload with (optional) preview and crop feature. Most applicable for single image fields, especially useful for profile avatars and company logos.
Workflow
Possible solutions & Scripts
Some tutorials and solutions, mostly based on jQuery. There was a project called MooCrop based on MooTools, but it has disappeared. Since Joomla3+ is heading for jQuery, no big lost ;-)
Jcrop - the jQuery Image Cropping Plugin, versatile, docs & API, comes with J!3.2+)
PHP & jQuery image upload and crop
Thanks for listening.
(Edited/Updated - Okt 2013)
J!3.2+ New Template Manager seems to have a CROP/RESIZE for images! Utilize Joomla core functions? Script is jCrop.
(Edited/Updated - FEB 2017)
Related thoughts - Replacements for Mootools powered Uploads
A.) jQuery File Upload
bootstrap style, thumb preview, drag'n drop, but without crop.
Demo & Docs; GitHub project
PS: Looks really nice in frontend, but it seems to consist of a whole bunch of different scripts/plugins. Necessary overhead? Good or Bad?
B.) PLupload
Makers of TinyMCE, also used by DOCman2, Drupal modules etc. PLupload homepage, jQuery Queue Widget example
C.) Bootstrap File Input
"This plugin was initially inspired by... Jasny's File Input plugin. But the plugin has now matured with various additional features and enhancements to be a complete (yet simple) file management tool and solution for web developers."
Homepage with more details; GitHub project; Demos!
D.) DropZone.js
"DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable."
Homepage