https://github.com/mbarde/volto-image-crop-widget

Volto add-on: Extends Voltos FileWidget to be able to crop images in-place.
https://github.com/mbarde/volto-image-crop-widget

Last synced: 2 months ago
JSON representation

Volto add-on: Extends Voltos FileWidget to be able to crop images in-place.

• Host: GitHub
• URL: https://github.com/mbarde/volto-image-crop-widget
• Owner: mbarde
• Created: 2022-04-28T13:15:49.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-18T11:44:48.000Z (over 1 year ago)
• Last Synced: 2024-07-11T20:49:09.478Z (3 months ago)
• Language: JavaScript
• Size: 16.7 MB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-volto - volto-image-crop-widget - Extends built-in FileWidget to be able to crop images in-place (Addons / Widgets)

README

        
# volto-image-crop-widget

Extends built-in FileWidget of [Volto](https://github.com/plone/volto) to be able to crop images in-place using [react-image-crop](https://www.npmjs.com/package/react-image-crop).

![Demo](https://github.com/mbarde/volto-image-crop-widget/raw/docs/docs/demo.gif)

### Why?

Users do not have to know & use external tools when they want to crop images.

## Features

* Free crop

* Fixed aspect ratio crop

* Adjust brighness

* Flip

## Setup

### Add volto-image-crop-widget to your Volto project

1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone

(for example via `docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.1`)

2. Start Volto frontend

- If you already have a volto project, just update `package.json`:

  ```JSON

  "addons": [

      "@mbarde/volto-image-crop-widget"

  ],

  "dependencies": {

      "@mbarde/volto-image-crop-widget": "*"

  }

  ```

- If not, create one:

  ```

  npm install -g yo @plone/generator-volto

  yo @plone/volto my-volto-project --addon @mbarde/volto-image-crop-widget

  cd my-volto-project

  ```

3. Install new add-ons and restart Volto:

   ```

   yarn

   yarn start

   ```

4. Go to http://localhost:3000

## Configuration

### Enable and define aspect crops:

```Javascript

export default function applyConfig(config) {

  config.settings.image_crop_aspect_ratios = [

    {

      label: '16:9',

      ratio: 16 / 9,

    },

    {

      label: '4:3',

      ratio: 4 / 3,

    },

    {

      label: '1:1',

      ratio: 1,

    },

  ];

  return config;

}

```