Adds a new field to images to allow them to be cropped. This will give the ability to save as new or overwrite current image.


Repository: https://github.com/webbuilders-group/silverstripe-image-cropper-field

Packagist: http://packagist.org/packages/webbuilders-group/silverstripe-image-cropper-field

Issues: https://github.com/webbuilders-group/silverstripe-image-cropper-field/issues

Authors: DoggersHusky

9 4 4.7K


Readme

Image Cropper Field

Adds the ability to crop images from within the SilverStripe file section.

Requirements

  • SilverStripe 4.4.x

Installation

Installation is supported via composer only

composer require webbuilders-group/silverstripe-image-cropper-field
  • Run dev/build?flush=all to regenerate the manifest

Setup

There is nothing to configure. Once you install and run dev/build?flush=all, you can begin cropping images right away from within the file section of the CMS.

Features and Overview

Image Cropper Field has a wide array of tools that will help any CMS Admin crop their images and limit the need to use external tools like Photoshop.

Overview of Image Cropper Field Overview of Image Cropper Field with aspect dropdown shown Overview of Image Cropper Field with dimension editing shown

The tools:

  • cropper dimensions tool

cropper dimensions tool

  • move tool

move tool

  • cropper tool

cropper tool

  • zoom tools

zoom in zoom out

  • image rotating tools

rotate left rotate right

  • reset tool

reset tool

  • aspect ratio setting tool

reset tool

Image Cropper Field will not overwrite the current image and instead will create a new image. The filename of the new image is determined by the filename of the current image. The new image is saved into the Cropped subfolder. The name of the new image can be changed before you click the Crop Image button.

Crop Preview window

Once it has created the new image, a green alert will be shown along with a link to your new image; However, this link will, currently, not be shown when you are using this field from the file Insert Form.

Overview of Image Cropper Field

Once the link is clicked, you will be taken to your new image.

Overview of Image Cropper Field

More features/tools to come in version 2:

  • image flip tools
  • ability to download your new cropped image before clicking the Crop Image button.

Reporting an issue

When you are reporting an issue, please ensure you specify what version of SilverStripe you are using i.e. 4.4.4. Also, be sure to include any JavaScript or PHP errors you receive.

For PHP errors, please ensure you include the full stack trace. Also, please include your implementation code as well as how you produced the issue. You may also be asked to provide some of the classes to aid in re-producing the issue. Stick with the issue, remember that it was you who saw the issue not the maintainer of the module so it may take a lot of questions to arrive at a fix or answer.

FAQ

Q: I can't find my image after creating it in the file Insert Form. Where is my new image?

A: Your new image will be saved to the subfolder named Cropped. You will have to, currently, refresh the page and open the insert image window again to get the image to show up when cropping from the file Insert Form.

Q: How do I change the folder the image saves too?

A: In this current version, you cannot change where the image is saved too. We will be trying to add it in a future release.

Q: You keep mentioning file Insert Form, where is this form? Do I use it?

A: The file Insert Form can be found when you interact with the Files popup window, so either by clicking on the insert from files button on a WYSIWYG editor or by clicking the browse button/link on an upload field. The image below is the file Insert Form that is referred too.

Overview of Image Cropper Field

Q: Can I use this field on a page or a dataobject?

A: Currently this field is designed only to be used in the file system of the CMS and the file Insert Form. There are plans to allow this field to be used on pages/dataobjects, and it will most likely come in version 2.


Versions

dev-master
2020-50-11 2458920: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-master

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/webpack-5.94.0
2024-50-30 2460553: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/webpack-5.94.0

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4|~5.0
1.2.1
2024-32-15 2460538: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field 1.2.1

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4|~5.0
dev-dependabot/npm_and_yarn/axios-1.7.4
2024-29-15 2460538: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/axios-1.7.4

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4|~5.0
dev-dependabot/npm_and_yarn/follow-redirects-1.15.6
2024-22-16 2460386: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/follow-redirects-1.15.6

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4|~5.0
dev-dependabot/npm_and_yarn/follow-redirects-1.15.4
2024-6-10 2460320: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/follow-redirects-1.15.4

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4|~5.0
dev-dependabot/npm_and_yarn/axios-1.6.0
2023-22-11 2460260: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/axios-1.6.0

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4|~5.0
1.2.0
2023-20-19 2460237: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field 1.2.0

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4|~5.0
dev-dependabot/npm_and_yarn/babel/traverse-7.23.2
2023-11-17 2460235: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/babel/traverse-7.23.2

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/webpack-5.76.0
2023-44-14 2460018: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/webpack-5.76.0

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/json5-1.0.2
2023-16-7 2459952: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/json5-1.0.2

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/loader-utils-1.4.2
2022-32-14 2459898: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/loader-utils-1.4.2

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/terser-5.14.2
2022-55-20 2459781: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/terser-5.14.2

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/minimist-1.2.6
2022-5-1 2459671: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/minimist-1.2.6

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
1.1.0
2022-31-24 2459635: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field 1.1.0

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/path-parse-1.0.7
2021-8-11 2459438: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/path-parse-1.0.7

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/hosted-git-info-2.8.9
2021-39-11 2459346: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/hosted-git-info-2.8.9

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/lodash-4.17.21
2021-10-10 2459345: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/lodash-4.17.21

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/y18n-3.2.2
2021-23-31 2459305: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/y18n-3.2.2

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/elliptic-6.5.4
2021-55-10 2459284: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/elliptic-6.5.4

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/elliptic-6.5.3
2020-13-1 2459063: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/elliptic-6.5.3

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
dev-dependabot/npm_and_yarn/lodash-4.17.19
2020-5-19 2459050: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field dev-dependabot/npm_and_yarn/lodash-4.17.19

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
1.0.0
2020-25-31 2458880: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field 1.0.0

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4
0.9.0
2020-46-30 2458879: UTC
BSD-3-Clause

Install composer require webbuilders-group/silverstripe-image-cropper-field 0.9.0

Manual Install: Download

Requires
  • silverstripe/framework: ~4.4