Cannot crop based on original image after initial crop has been set

Created on 6 July 2021, over 3 years ago
Updated 3 February 2023, almost 2 years ago

Problem/Motivation

Uploading an image to a field and cropping it works fine with the ImageCropWidget field display setting -- however, if you attempt to re-crop based on the original image, you cannot. It forces you to crop based off of the last crop, and leaves a black area to the right of the image. The only way to crop based off the original image is to remove the image entirely and re-select it.

Steps to reproduce

See my screenshots below and the description of them to get an idea of what I'm seeing.

1. Create an image field and create a crop size
2. Apply that crop size to the image field via Form Display Settings
3. Edit a node with this image field
4. Crop the image to be smaller than the original
5. Save
6. Edit the node again
7. Look at your field
8. The crop widget will not show the original image with the crop selection area, it will show you just the cropped section of the image

Here is a description of my screenshots below (bottom image is 3, top image is 1 in the listing below this issue content):
Screenshot 3 - Initial Upload of the image (fine)
Screenshot 2 - Initial Crop of the image (still fine)
Screenshot 1 - After saving the node I am greeted with this crop widget where not only is the pre-cropped area the only section of the image still available, but by default the crop area is set to be an even smaller selection of that pre-cropped area (it's as if it's using the original crop coords I submitted, but applying it to the cropped area of the image)

Proposed resolution

Make the widget show the entire original image with the cropped area selected so that subsequent adjustments to the crop can be made based off the original image, not based off the cropped area of the previous crop applied.

Remaining tasks

N/A

User interface changes

See "Proposed resoultion"

API changes

N/A

Data model changes

N/A

πŸ› Bug report
Status

Active

Version

2.3

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States astolfivincent

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡§πŸ‡·Brazil juamerico

    I had the same issue, and turned out the settings.crop_preview_image_style, on entity_form_display, was set to the same Image Style β†’ value as the image_style on entity_view_display.
    For example:

    core.entity_view_display.node.machine_name.default.yml:

    // some other code...
    content
      image_field:
        settings:
          image_style: your_crop_size //any aspect ratio you're using.
    

    core.entity_form_display.node.machine_name.default.yml:

    // some other code...
    content
      image_field:
        settings:
          crop_preview_image_style: your_crop_size //the same Image Style here.
    

    What fixed it for me was creating a new Image Style β†’ , with scale effect, and setting it on the entity_form_display. Like that:

    core.entity_form_display.node.machine_name.default.yml:

    // some other code...
    content
      image_field:
        settings:
          crop_preview_image_style: scale_effect_crop_image_style //change it to the newly created Image Style.
    

    You don't need to change anything in the entity_view_display.

    I hope this helps other people (:

  • πŸ‡ΊπŸ‡ΈUnited States mariohernandez Los Angeles

    I experienced the same issue and @juamerico's solution ( #5 πŸ› Cannot crop based on original image after initial crop has been set Active ), worked for me.

  • Status changed to Closed: works as designed 8 days ago
  • πŸ‡³πŸ‡±Netherlands eelkeblok Netherlands πŸ‡³πŸ‡±
Production build 0.71.5 2024