Crop media - NaN error at specific &image-editor URL

[NoseGraze]

The problem can be reproduced using ​this code that's taken from ​this codex article (forgive the ugliness).

• Install that plugin. It adds a meta box to the Edit Post page with a link that triggers the wp.media frame.
• Click on the link to open the media frame.
• When inside the frame, click on an image.
• Click "Edit Image".
• This takes you to this URL in a new tab: ​http://localhost/wp/wp-admin/post.php?post=1706&action=edit&image-editor
• Entering a value in "Scale Image" results in the other value being "NaN" (see screenshot).

Or, with no plugins activated, directly visit any "Edit Media" page using this URL format: ​http://localhost/wp/wp-admin/post.php?post=1706&action=edit&image-editor and try to crop the image. (My point being that using wp.media directs you to that URL.)

This problem can be "fixed" by clicking "Cancel" on the image edit, then clicking "Edit Image" again, but that shouldn't be necessary. :P

[lucrus]

This same bug is present in WP 4.7 beta2 without any plugins installed.

[seodevrobin]

Bug still exist in public WP 4.7 and many people has complained regarding this problem

[adamsilverstein]

@NoseGraze Thanks for the bug report.

I had a little trouble reproducing at first (the code/plugin link was broken) - I finally got it by adding the 'image-editor" string to the url of an image edit screen and I assume that url pattern is what following the codex code gets you. I'm going to dig in to see if I can find out why these fields aren't properly initialized.

Here is a screenshot showing the bug.

[NoseGraze]

Sorry about that @adamsilverstein. Not sure why the code got removed. But yes, ultimately the code in the Codex helps you create a simple media frame. When opened, the right-hand side has this:

When clicking "Edit Image", it opens that URL you checked in a new tab ( wp-admin/post.php?post=25460&action=edit&image-editor ). And that's when it breaks.

Whereas if you click "Edit Image" in the "Set Featured Image" modal, it doesn't open in a new tab. It opens the "Edit Image" pane directly in the modal.

[adamsilverstein]

@NoseGraze thanks for the details. I tracked this down to a failure to properly initialize the editor JavaScript code, can you try my patch to see if that fixes your issue?

In 38138.diff​:
Ensure the media edit has run init when directly loading the media edit screen.

When the media edit screen is loaded directly via a url such as /wp-admin/post.php?post={post_id}&action=edit&image-editor the JavaScript fails to execute the init function, breaking certain featured that require setup including cropping. Adds a check in imgLoaded that explicitly checks for the hold.sizer required for the cropper. Calls init explicitly if this is undefined.

[NoseGraze]

That fix works perfectly - thank you!

[joemcgill]

Looks good to me. Thanks @adamsilverstein and @NoseGraze.

[adamsilverstein]

In 40020:

Media: ensure JavaScript initialized when media edit screen is loaded directly.

Fix a JavaScript error when the media edit screen is loaded directly via a url such as /wp-admin/post.php?post={post_id}&action=edit&image-editor. Add a check in imgLoaded for this.hold.sizer which is set up during initialization and required for the cropping tool. Call init if this is undefined.

Props NoseGraze.
Fixes #38138.

[aquakitty]

Hi,

this only partially fixes the issue. It is displaying the same behaviour when scaling an image.

Muffin Builder (used in Betheme for instance) uses this method to open a media modal.

[aquakitty]

Ok, I've got it to work with 4.7.2. It was a caching issue.

[jaydenl]

I'm sorry if I'm out of place here, but I am using Wordpress 4.7.3 and am still getting this NaN bug when trying to scale an image. As this is my first ever post here, I'm not sure what else to report other than these screenshots below:

[adamsilverstein]

Replying to jaydenl:

I'm sorry if I'm out of place here, but I am using Wordpress 4.7.3 and am still getting this NaN bug when trying to scale an image

Hi @jaydenl - this fix was merged into trunk, meaning it will be included in the next major release of WordPress - version 4.8.0 (coming in the next few months). It was not backported to 4.7.x because it is not a major, security or new bug and doesn't affect a new feature. You can the fixed version using the beta testers plugin: ​https://wordpress.org/plugins/wordpress-beta-tester/

Thanks.

[SergeyBiryukov]

#40026 was marked as a duplicate.