Make WordPress Core

Opened 5 years ago

Last modified 3 years ago

#35232 new defect (bug)

WP Image Editor glitches with constrained dimensions

Reported by: programmin Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords: close
Focuses: Cc:


In a certain instance I want to make an image editor instance work for making sure the selected image gets cropped/resized to a certain dimension if it is not so already. As proof of concept I started with this slightly modified function that overrides the almost-identical code in image-editor.js, with exception of setting max and min height and width of selection, to select a 300x300:

	window.addEventListener('load', function(){
	//TODO: proof of concept, just copies image-edit.js for now:
	var $ = jQuery;
	window.imageEdit.initCrop = function(postid, image, parent) {
		var t = this,
			selW = $('#imgedit-sel-width-' + postid),
			selH = $('#imgedit-sel-height-' + postid),

		t.iasapi = $(image).imgAreaSelect({
			parent: parent,
			instance: true,
			handles: true,
			keys: true,
			minWidth: 300, maxWidth:300,
			minHeight: 300, maxWidth:300,

			onInit: function( img ) {
				// Ensure that the imgareaselect wrapper elements are position:absolute
				// (even if we're in a position:fixed modal)
				$img = $( img );
				$img.next().css( 'position', 'absolute' )
					.nextAll( '.imgareaselect-outer' ).css( 'position', 'absolute' );

					var ratio = false, sel, defRatio;

					if ( e.shiftKey ) {
						sel = t.iasapi.getSelection();
						defRatio = t.getSelRatio(postid);
						ratio = ( sel && sel.width && sel.height ) ? sel.width + ':' + sel.height : defRatio;

						aspectRatio: ratio

			onSelectStart: function() {
				imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1);

			onSelectEnd: function(img, c) {
				imageEdit.setCropSelection(postid, c);

			onSelectChange: function(img, c) {
				var sizer = imageEdit.hold.sizer;
				selW.val( imageEdit.round(c.width / sizer) );
				selH.val( imageEdit.round(c.height / sizer) );

I set it to print this out on admin_footer_text filter and unfortunately it completely breaks the crop tool on http://localhost/wordpress/wp-admin/upload.php: (see attached screenshot)

Furthermore it seems I can move, but not resize the selection, yet the dimensions are wrong, and never 300x300! Am I missing something or is it not possible to do any such restriction like this with the WP Image Editor?

Attachments (1)

glitchSelect.png (86.2 KB) - added by programmin 5 years ago.
Screenshot example.

Download all attachments as: .zip

Change History (8)

5 years ago

Screenshot example.

#1 @programmin
5 years ago

So is this WP-Image edit not really meant to be extended in such a way? Maybe MCE's image-editor would be more appropriate?

#2 @iseulde
5 years ago

  • Component changed from Editor to Media

#3 @programmin
5 years ago

It seems to be a bug in that jQuery imgAreaSelect plugin: https://github.com/odyniec/imgareaselect/issues/86

Looking through the other issues it seems there are other bugs regarding css, and also lacking touch support.

Furthermore it seems the latest update to that particular repo was 3 years ago. While it seems to work okay for Wordpress' use in image-editor, have other image-cropping/selecting plugins been considered for this task in WP core?

#4 follow-up: @programmin
5 years ago

Looks like you are using constrained dimension in the site_icon picker in the customizer (wp.customize) - This is almost what I was looking for, and I would hope there would be better documentation on this. Where can we find examples on how to make a simple picker like the site icon with constrained dimensions cropper?

#5 @mikeschroder
5 years ago

  • Version trunk deleted

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

3 years ago

#7 in reply to: ↑ 4 @adamsilverstein
3 years ago

  • Keywords close added

Replying to programmin:

Looks like you are using constrained dimension in the site_icon picker in the customizer (wp.customize) -

Yes, we use a forced cropping mode in the site icon picker although I don't think its well documented. If you search thru the core code for flex-width and its js counterpart flexWidth you will find code examples that use it.

This seems like a support request, I don't think this is a bug although, aside from the missing documentation.

I would suggest asking your question including exactly what you are trying to do on the support forums: https://wordpress.org/support/

Note: See TracTickets for help on using tickets.