Make WordPress Core

Opened 8 years ago

Closed 7 years ago

Last modified 4 years ago

#38138 closed defect (bug) (fixed)

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

Reported by: nosegraze's profile NoseGraze Owned by: adamsilverstein's profile adamsilverstein
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch commit needs-testing
Focuses: javascript Cc:


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

Attachments (1)

38138.diff (589 bytes) - added by adamsilverstein 8 years ago.

Download all attachments as: .zip

Change History (17)

#1 @lucrus
8 years ago

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

#2 @seodevrobin
8 years ago

  • Severity changed from normal to major

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

#3 @adamsilverstein
8 years ago

  • Focuses javascript added
  • Keywords needs-patch added
  • Owner set to adamsilverstein
  • Status changed from new to assigned

@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.

#4 @NoseGraze
8 years ago

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.

#5 @adamsilverstein
8 years ago

  • Keywords has-patch needs-testing reporter-feedback added; needs-patch removed

@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.

#6 @adamsilverstein
8 years ago

  • Milestone changed from Awaiting Review to 4.8
  • Severity changed from major to normal

#7 @NoseGraze
8 years ago

That fix works perfectly - thank you!

This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.

7 years ago

#9 @joemcgill
7 years ago

  • Keywords commit added; needs-testing reporter-feedback removed

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

#10 @adamsilverstein
7 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#11 @aquakitty
7 years ago

  • Keywords needs-testing added
  • Resolution fixed deleted
  • Status changed from closed to reopened


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 edit modal.

Last edited 7 years ago by aquakitty (previous) (diff)

#12 @aquakitty
7 years ago

  • Resolution set to worksforme
  • Status changed from reopened to closed

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

#13 @dd32
7 years ago

  • Resolution changed from worksforme to fixed

#14 follow-up: @jaydenl
7 years ago

  • Version 4.6.1 deleted

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:

#15 in reply to: ↑ 14 @adamsilverstein
7 years ago

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:


#16 @SergeyBiryukov
4 years ago

#40026 was marked as a duplicate.

Note: See TracTickets for help on using tickets.