pepperstreet VIP
Total posts: 3,834
28 May 2013 08:03

(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

Last Modified: 19 Feb 2017



pepperstreet VIP
Total posts: 3,834
08 Jul 2013 13:04

Added some links for two popular jQuery powered upload scripts/projects.


pepperstreet VIP
Total posts: 3,834
23 Sep 2013 16:40

No Comments? No schedule? :S ;-)


pepperstreet VIP
Total posts: 3,834
23 Oct 2013 21:35

FYI

J!3.2 New Template Manager seems to have a CROP/RESIZE for images!
Maybe possible to utilize Joomla core functions?


Sergey
Total posts: 13,743
24 Oct 2013 01:26

I think so. If it has one then we can use it too.


pepperstreet VIP
Total posts: 3,834
01 Jun 2014 19:02

Edit:

Updated initial post and text format to new Cobalt forum syntax. Better readability.


pepperstreet VIP
Total posts: 3,834
06 Dec 2014 15:16

Edit:

Added newer jQuery plugin CropPic.


pepperstreet VIP
Total posts: 3,834
14 Feb 2015 01:50

Edit:

Found and added jQuery image plugin called Cropper

Browser support:
Chrome 34+
Firefox 29+
Internet Explorer 8+
Opera 21+
Safari 5.1+


andiamine VIP
Total posts: 289
14 Feb 2015 20:21

i'm workin' on a field called "Image Crop" , will be available soon.


pepperstreet VIP
Total posts: 3,834
14 Feb 2015 20:30

andiamine i'm workin' on a field called "Image Crop" , will be available soon.

Cool stuff! ;)

Are you going to use the Joomla core script jCrop or anything else from my list?


hwdevteam VIP
Total posts: 76
01 Mar 2015 12:12

Awesome - let us know when done if you wish to share it :)

Cheers, Pete


andiamine VIP
Total posts: 289
01 Mar 2015 19:27

pepperstreet Are you going to use the Joomla core script jCrop or anything else from my list? pepperstreet

hi my friend i think i will use CropPic


pepperstreet VIP
Total posts: 3,834
02 Mar 2015 01:56

andiamine hi my friend i think i will use CropPic

May I suggest to consider the very simple jCrop (already used in Joomla core)
or Cropper (seems more compatible and browser-friendly)

Just my two cents... ;) It's your product and decision. Rock on!


andiamine VIP
Total posts: 289
02 Mar 2015 05:25

pepperstreet

andiamine hi my friend i think i will use CropPic

May I suggest to consider the very simple jCrop (already used in Joomla core)

or Cropper (seems more compatible and browser-friendly)

Just my two cents... ;) It's your product and decision. Rock on!

Yes maybe cropper too, i didn't like jCrop ^^


pepperstreet VIP
Total posts: 3,834
23 Mar 2015 17:44

FYI - Aviary image editor now part of Adobe Creative SDK

Recently saw a stunning integration in Craft CMS ;)


Sergey
Total posts: 13,743
13 Apr 2016 07:08

This is awesome stuff!


pepperstreet VIP
Total posts: 3,834
03 May 2016 20:38

Updated initial post with the following file-upload project/script:

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!


pepperstreet VIP
Total posts: 3,834
12 Feb 2017 21:30

Not related to "Image Cropping"… but the following Upload script is one of my favourites.
Maybe interesting for Cobalt uploads in general?!

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


Sergey
Total posts: 13,743
19 Feb 2017 04:14

Those are nice libraries. Thank you.

Powered by Cobalt