@mbarde/volto-image-crop-widget

volto-image-crop-widget

Extends built-in FileWidget of Volto to be able to crop images in-place using react-image-crop.

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 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:

  "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:

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;
}