WordPress.org

Make WordPress Core

Opened 5 years ago

Last modified 7 weeks 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 reporter-feedback
Focuses: Cc:

Description

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:

<script>
	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),
			$img;

		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' );

				parent.children().mousedown(function(e){
					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;
					}

					t.iasapi.setOptions({
						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) );
			}
		});
	}
	});
	</script>

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 (9)

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


4 years ago

#7 in reply to: ↑ 4 @adamsilverstein
4 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/

#8 @hellofromTonya
7 weeks ago

  • Keywords reporter-feedback added

Hello @programmin,

Is this still an issue for you today?

I'm marking this ticket as a close worksforme candidate. Please don't be alarmed. We mark tickets for close consideration when we are unable to reproduce and suspect the problem is not due to WordPress core. However, when more information is given, we reevaluate.

Note: See TracTickets for help on using tickets.