pepperstreet VIP
Total posts: 3,837
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: 04 Jul 2024



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

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


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

No Comments? No schedule? :S ;-)


pepperstreet VIP
Total posts: 3,837
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,748
24 Oct 2013 01:26

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


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

Edit:

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


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

Edit:

Added newer jQuery plugin CropPic.


pepperstreet VIP
Total posts: 3,837
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: 295
14 Feb 2015 20:21

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


pepperstreet VIP
Total posts: 3,837
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: 295
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,837
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: 295
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,837
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,748
13 Apr 2016 07:08

This is awesome stuff!


pepperstreet VIP
Total posts: 3,837
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,837
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,748
19 Feb 2017 04:14

Those are nice libraries. Thank you.


Aalupalak
Total posts: 17
15 Dec 2023 14:41

The Cisco 350-801 Exam Questions encompasses a comprehensive evaluation of knowledge and skills related to implementing core Cisco collaboration technologies. It tests proficiency in areas such as infrastructure and design, endpoints, application integration, and more. The exam questions are designed to assess candidates' capabilities in configuring, deploying, and troubleshooting collaboration solutions, ensuring they possess the expertise required to excel in implementing Cisco collaboration technologies effectively.


SophiaSteck
Total posts: 4
27 Dec 2023 16:39

The Instagram Font Generator is a creative tool that allows users to generate unique and eye-catching fonts for their Instagram captions and bio. With 40 different font styles, users can personalize their content and enhance their visual presence on the platform.

Powered by Cobalt