Context Navigation

← Previous Ticket
Next Ticket →

#62453 new defect (bug)

Cropping of images in WP 6.7 (and 6.8) is broken

Reported by:	axelkratel	Owned by:
Priority:	normal	Milestone:	Awaiting Review
Component:	Media	Version:	6.7.1
Severity:	normal	Keywords:	reporter-feedback
Cc:		Focuses:

Description

When cropping an image, the original crop isn't retained. The selection moves all the way to the left of the image no matter what the user tried to select. It jumps by itself to 0,0 start point when saving. That seems to be because the starting coordinates get filled with 0,0 even though the user doesn't enter anything and even if the user manually moves the cropping rectangle, the starting coordinates don't get updated. This didn't work that way in 6.6.2. Manually changing the starting coordinates leads to all kinds of strange unpredictable behavior.

The cropping is essentially unusable. I can add quicktime screen capture of problem. I did check logs for errors and console for errors, found no errors.

Independent of plugins or theme.

Error in Chrome dev tools says incorrect use for label.

Attachments (4)

6.7.1.png (387.9 KB ) - added by siliconforks 20 months ago.: Cropping in WordPress 6.7.1. Note that the "Starting Coordinates" remain at 0.
6.6.2.png (388.4 KB ) - added by siliconforks 20 months ago.: Cropping in WordPress 6.6.2. Note that the "Starting Coordinates" are automatically updated.
wp6.6_kirinuki.gif (4.6 MB ) - added by macro19007 17 months ago.
wp6.7_kirinuki.gif (4.4 MB ) - added by macro19007 17 months ago.

Change History (19)

#1 @umeshsinghin
20 months ago

Hi Axelkratel,

Could you pls share more details along with a screenshot? I couldn't replicate the issue. Also, kindly share the Chrome version you are using.

#2 @poena
20 months ago

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

WordPress: 6.7
PHP: 8.1.29
Server: nginx/1.16.0
Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
Browser: Chrome 131.0.0.0
OS: Windows 10/11
Theme: Twenty Twenty-Five 1.0
MU Plugins: None activated
Plugins:
- Test Reports 1.2.0

Actual Results

I can not reproduce the bug.

Can you include any more information? What is the image format? Are there any JavaScript errors?

I did not understand what this means: "even though the user doesn't enter anything "
I don't see any input fields to manually change the values. What did you try to update? I mean, during testing, are you changing the CSS transform in the browser console? I am just trying to understand.

#3 @priyankkpatel
20 months ago

I, too tested it with WordPress 6.7 and it is working well.

#4 @desrosj
20 months ago

Component General → Media
Keywords reporter-feedback added

#5 @holafreak
20 months ago

Version 6.7 → 6.7.1

I got the exact same issue on 6.7.1.

#6 @siliconforks
20 months ago

Cropping definitely seems quite glitchy/broken in version 6.7.

Since several people have had trouble reproducing this, here are more detailed steps:

In the admin section, click "Media".
Click on an image. (Upload an image first if you don't have one.)
Click the "Edit Image" button.
Click the "Crop" button.
Click and drag on the drag handle in the top left corner of the image, dragging the mouse somewhere in the middle of the image.
Observe that the fields labeled "Selection" are automatically updated when dragging; however, the fields labeled "Starting Coordinates" are not automatically updated, but remain at zero.

If you try the above steps in WordPress 6.6.2, the "Starting Coordinates" are automatically updated to show the position of the top left corner of the selection.

I'm not sure if that's the only thing wrong with the cropping functionality in 6.7, but it's certainly a regression compared to 6.6.

@siliconforks
20 months ago

Attachment 6.7.1.png added

Cropping in WordPress 6.7.1. Note that the "Starting Coordinates" remain at 0.

@siliconforks
20 months ago

Attachment 6.6.2.png added

Cropping in WordPress 6.6.2. Note that the "Starting Coordinates" are automatically updated.

#7 @webby75
19 months ago

I confirm that I have the exact same issue.
The crop feature works in version 6.6.2, but it no longer works starting from version 6.7.0.

On my side, I encounter the bug when using the "selection" fields and moving the selection area. When I click on "Apply crop" button, the cropped area saved is not the one I selected; it defaults to the top-left corner of the image.

Last edited 19 months ago by webby75 (previous) (diff)

#8 @charlesbrown1x
18 months ago

Sounds frustrating! Maybe look for any script conflicts or browser-related quirks causing the coordinates issue—it's like trying to fix window cleaning serviceshttps://windowinstallationservices.co.uk/ where the tools just don’t behave as expected.

#9 @Three_Star_Dave
18 months ago

Confirming I have the same issue in 6.7.1.

I can work around it by first dragging in the image the crop markers to show the crop area I want, and then manually inputting the starting coordinates (as soon as I enter those fields the crop snaps to the upper left-hand corner, coordinate 0,0), testing and narrowing them down until they move the crop area to the actual location I am looking for.

So that works, but the behavior is clearly incorrect.

@macro19007
17 months ago

Attachment wp6.6_kirinuki.gif added

@macro19007
17 months ago

Attachment wp6.7_kirinuki.gif added

#10 @macro19007
17 months ago

I have confirmed the same phenomenon in version 6.7.

6.6: The coordinates change according to the cropping.

6.7: The coordinates remain at 0 and snap to the top-left corner.

#11 @oaukketan
15 months ago

I've been experiencing the same bug for the past month, ever since I manually upgraded the site to 6.7.x.

I'm going to clone the website and then disable all the plugins to see if one of them is causing the problem.

UPDATE:
I updated WP to 6.8, disabled all plugins and switched to a built-in theme, but problem still exists. I even tried 4 different versions of PHP (8.1.32, 8.2.28, 8.3.20 and 8.4.6) but no dice.

I used Firefox for all my testing.

Last edited 15 months ago by oaukketan (previous) (diff)

#12 @stefwilliams
8 months ago

Summary Cropping of images in WP 6.7 is broken → Cropping of images in WP 6.7 (and 6.8) is broken

Can confirm this issue. In my specific case, I'm trying to insert a precise aspect ratio to then reposition the crop area, but it's the same behaviour: no matter where the final crop area is on screen, as soon as I click Apply, the area reverts to co-ordinates 0,0.

I have a work around for anyone who's getting frustrated by this:

The only way I can get it to work is by clicking 'Apply Crop' but NOT releasing the mouse button and dragging away. This reverts the positioning to 0/0, but doesn't apply it to the final image. At this stage, I can position/resize the crop area again and then 'Apply Crop' works as expected and uses the correct x/y starting position.

Would really appreciate a fix to this though. From the thread above, it seems the bug was introduced in v 6.7.x but I am using 6.8.3 and it's still there.

Last edited 8 months ago by stefwilliams (previous) (diff)

#13 @Eiland
7 weeks ago

This is still an issue in V7.

#14 @J.Kiyama
6 weeks ago

I tested a possible fix for this issue with help from ChatGPT. Could someone review it and consider applying it to Core?

This is the ChatGPT's report:
I confirmed that this issue still occurs in WordPress 7.0.

The crop selection can be moved visually, but the X/Y coordinate fields (#imgedit-start-x-* and #imgedit-start-y-*) are not updated from the image UI. As a result, the crop selection data can become inconsistent and the crop may be applied from the wrong position.

The problem appears to be in wp-admin/js/image-edit.js.

Current behavior:

onSelectChange updates only the selection width and height.
The start X/Y fields are not updated when the selection is moved or resized from the image UI.
The current selection comparison only checks width and height, so moving the crop box without changing its size can be ignored.
setCropSelection() calculates x and y, but does not reflect them back to the visible X/Y coordinate fields.

Tested fix:

In onSelectChange, include x1 and y1 in the comparison.
In onSelectChange, update #imgedit-start-x-* and #imgedit-start-y-* from the current selection.
In onSelectEnd, update the same X/Y fields and call setCropSelection() with the current selection.
In setCropSelection(), after calculating x and y, update the X/Y input fields before saving #imgedit-selection-*.

After applying these changes, the crop result is applied to the correct position and the X/Y coordinate fields are synchronized with the image UI.

Suggested changes in wp-admin/js/image-edit.js:

// Compare not only width and height, but also x1 and y1

oldSel.width == c.width &&

oldSel.height == c.height &&

oldSel.x1 == c.x1 &&

oldSel.y1 == c.y1

// Update X/Y coordinate input fields in onSelectChange

$( '#imgedit-start-x-' + postid ).val(

	Math.max( 0, imageEdit.round( c.x1 / sizer ) )

);

$( '#imgedit-start-y-' + postid ).val(

	Math.max( 0, imageEdit.round( c.y1 / sizer ) )

);

// Synchronize X/Y fields and finalize selection in onSelectEnd

t.currentCropSelection = c;

imageEdit.setCropSelection( postid, c );

// Reflect calculated x/y values back to the X/Y inputs

$( '#imgedit-start-x-' + postid ).val( x );

$( '#imgedit-start-y-' + postid ).val( y );

Last edited 6 weeks ago by J.Kiyama (previous) (diff)

#15 @J.Kiyama
6 weeks ago

I also created a temporary MU-plugin workaround for anyone currently affected by this issue.

This workaround synchronizes the crop X/Y coordinate fields with the current imgAreaSelect selection after the crop UI becomes active.

It is not a perfect fix because there still seems to be an initialization timing issue immediately after opening the image editor, but it improves synchronization once the crop UI is active.

Place this file in:

wp-content/mu-plugins/fix-wp-image-crop-coordinates.php

<?php
/**
 * Plugin Name: Fix WP Image Crop Coordinates
 *
 * Temporary workaround for WordPress image crop coordinate sync bug.
 * Remove if fixed in future WordPress core versions.
 */

add_action( 'admin_print_footer_scripts', function() {
        ?>
        <script>
        jQuery(function($){

                if ( typeof imageEdit === 'undefined' ) {
                        return;
                }

                function syncCropCoords() {
                        var img = $( '[id^="image-preview-"]:visible' ).first();

                        if ( ! img.length || ! img.imgAreaSelect ) {
                                return;
                        }

                        var postid = img.attr( 'id' ).replace( 'image-preview-', '' );
                        var api = img.imgAreaSelect({ instance: true });

                        if ( ! api || ! api.getSelection ) {
                                return;
                        }

                        var c = api.getSelection();

                        if ( ! c || ! c.width || ! c.height ) {
                                return;
                        }

                        var sizer = imageEdit.hold && imageEdit.hold.sizer ? imageEdit.hold.sizer : 1;

                        $( '#imgedit-start-x-' + postid ).val(
                                Math.max( 0, imageEdit.round( c.x1 / sizer ) )
                        );

                        $( '#imgedit-start-y-' + postid ).val(
                                Math.max( 0, imageEdit.round( c.y1 / sizer ) )
                        );
                }

                $( document ).on(
                        'mousemove mouseup touchmove touchend keyup change',
                        '.imgareaselect-selection, .imgareaselect-border1, .imgareaselect-border2, .imgareaselect-border3, .imgareaselect-border4, .imgareaselect-handle, [id^="image-preview-"]',
                        function() {
                                setTimeout( syncCropCoords, 0 );
                        }
                );

                var originalSetCropSelection = imageEdit.setCropSelection;

                imageEdit.setCropSelection = function( postid, c ) {
                        var result = originalSetCropSelection.apply( this, arguments );

                        setTimeout( syncCropCoords, 0 );

                        return result;
                };

        });
        </script>
        <?php
});

Note: See TracTickets for help on using tickets.

Download in other formats:

Make WordPress Core

Context Navigation

#62453 new defect (bug)

Cropping of images in WP 6.7 (and 6.8) is broken

Description

Attachments (4)

Change History (19)

#1 @umeshsinghin 20 months ago

#2 @poena 20 months ago

Reproduction Report

Description

Environment

Actual Results

#3 @priyankkpatel 20 months ago

#4 @desrosj 20 months ago

#5 @holafreak 20 months ago

#6 @siliconforks 20 months ago

@siliconforks 20 months ago

@siliconforks 20 months ago

#7 @webby75 19 months ago

#8 @charlesbrown1x 18 months ago

#9 @Three_Star_Dave 18 months ago

@macro19007 17 months ago

@macro19007 17 months ago

#10 @macro19007 17 months ago

#11 @oaukketan 15 months ago

#12 @stefwilliams 8 months ago

#13 @Eiland 7 weeks ago

#14 @J.Kiyama 6 weeks ago

#15 @J.Kiyama 6 weeks ago

Download in other formats:

#1 @umeshsinghin
20 months ago

#2 @poena
20 months ago

#3 @priyankkpatel
20 months ago

#4 @desrosj
20 months ago

#5 @holafreak
20 months ago

#6 @siliconforks
20 months ago

@siliconforks
20 months ago

@siliconforks
20 months ago

#7 @webby75
19 months ago

#8 @charlesbrown1x
18 months ago

#9 @Three_Star_Dave
18 months ago

@macro19007
17 months ago

@macro19007
17 months ago

#10 @macro19007
17 months ago

#11 @oaukketan
15 months ago

#12 @stefwilliams
8 months ago

#13 @Eiland
7 weeks ago

#14 @J.Kiyama
6 weeks ago

#15 @J.Kiyama
6 weeks ago