Skip to content

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

Notifications You must be signed in to change notification settings

mbarde/volto-image-crop-widget

Repository files navigation

volto-image-crop-widget

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

Demo

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)

  1. 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
    
  1. Install new add-ons and restart Volto:

    yarn
    yarn start
    
  2. 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;
}

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published