Image Cropping Not Working In Backend

[Xonox]

Hi,

I can't seem to be able to crop an image in the backend. I'm using PW 3.0.29 in Chrome without Image plugins.

When I click apply, the button stays on "Saving..." forever.

I get the following JavaScript Errors:

An invalid form control with name='width' is not focusable.
?id=1024&file=1024,cfaf-2013-poster.jpg&rte=0&field=poster&modal=1:1

An invalid form control with name='height' is not focusable.
?id=1024&file=1024,cfaf-2013-poster.jpg&rte=0&field=poster&modal=1:1

Is this a bug?

 

[SamC]

This is interesting, I posted this:

I didn't see any errors (although I didn't check the console). Where did you see the errors so I can check myself to see if I get similar? Maybe this is related.

[Xonox]

On 10/26/2016 at 10:36 AM, SamC said:

This is interesting, I posted this:

I didn't see any errors (although I didn't check the console). Where did you see the errors so I can check myself to see if I get similar? Maybe this is related.

Hi SamC,

Sorry for the delayed answer. I still haven't been able to correct this situation. I catch these errors in the Javascript console, when I finish cropping.

It gives the error on line 1

Were you able to solve your problem?

[SamC]

Hi,

I've been busy on other stuff but had a chance just now to try cropping with the console open. Still not working. The error is:

An invalid form control with name='width' is not focusable.

with a link address of:

http://mysite.com/login/page/image/edit/?id=1019&file=1019,dsc01214.jpg&rte=0&field=mainImage&modal=1

So, still not working. The saving just keeps spinning ad infinitum. Maybe some of the more experienced members will be able to replicate this.

I found this:

http://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable

Maybe something to do with it. I checked out the 'ProcessPageEditImageSelect.module' file but tbh I don't know exactly what I'm looking for here. On line 857 if you change:
 

"<button type='submit' class='ui-button ui-state-default hide_when_processing' id='button_crop' name='submit_crop' value='1'>"

to...

"<button type='button' class='ui-button ui-state-default hide_when_processing' id='button_crop' name='submit_crop' value='1'>"

..the error disappears. However, the form doesn't submit either!

Edited November 17, 2016 by SamC
More detail

[esl]

Hi, all!

The problem is still relevant (tested on 3.0.40, 3.0.42 and 3.0.48) in Chrome browser only (tested on version 55) when trying to crop 1920x1280 to 1920x330.

An invalid form control with name='width' is not focusable.
?id=1122&file=1122,dsc0828_obrez.jpg&rte=0&field=header_image&modal=1

Chrome can't focus hidden input with name="width" (which used for scaling, not for cropping).

[SamC]

Maybe the more frequent posters would have a better idea? @ryan @adrian @Soma @LostKobrakai to mention a few. This is a problem though if clients can't crop an image.

[adrian]

I can't seem to reproduce, but it seems like it's related to this:

http://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable

From a quick read of that, it sounds like the "width" field is hidden and required which doesn't seem to be the case for me. Is there any chance you have some JS that could be adding the html5 "required" attribute to this?

Have you checked the generated HTML to see what's going on?

[SamC]

15 minutes ago, adrian said:

I can't seem to reproduce, but it seems like it's related to this:

http://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable

From a quick read of that, it sounds like the "width" field is hidden and required which doesn't seem to be the case for me. Is there any chance you have some JS that could be adding the html5 "required" attribute to this?

Have you checked the generated HTML to see what's going on?

Strangely, I just tried it on my new local dev portfolio site, cropped a 4000x3000 image. Worked just fine. On my other dev site, the cropping does not work, same issue as before. Need to investigate further this week.

[esl]

15 hours ago, adrian said:

Have you checked the generated HTML to see what's going on?

Yes, I checked, and all fields width name="width" is not required when I click "Apply".
I checked other Image field, and it works fine with the same file.

[esl]

Export of field:

{
    "header_image": {
        "id": 145,
        "type": "FieldtypeImage",
        "flags": 0,
        "name": "header_image",
        "label": "Изображение в шапке",
        "textformatters": [
            "TextformatterEntities"
        ],
        "extensions": "gif jpg jpeg png",
        "maxFiles": 1,
        "outputFormat": 0,
        "defaultValuePage": "",
        "inputfieldClass": "InputfieldImage",
        "descriptionRows": 1,
        "gridMode": "list",
        "maxWidth": 2700,
        "maxReject": 1,
        "minWidth": 1920,
        "minHeight": 330,
        "fileSchema": 2,
        "collapsed": 0,
        "maxHeight": 1800,
        "outputString": "",
        "entityEncode": "",
        "useTags": "",
        "showIf": "",
        "columnWidth": 100,
        "required": "",
        "requiredIf": "",
        "unzip": "",
        "overwrite": "",
        "noLang": "",
        "dimensionsByAspectRatio": ""
    }
}

Try to import header_image field to reproduce error

[SamC]

Ok, no solution yet, but for information, these are the version numbers of the two sites I am building:

ProcessWire 3.0.41 - cropping works (1st site)

ProcessWire 3.0.33 - not working (2nd site)

The sites have no fancy .js or anything, just a toggle class for the mobile menu. They are actually relatively similar brochure style sites, no added modules, just with different templates and CSS. I will try and upgrade the older version hopefully this week to see if this is the problem. So I tried a bit of troubleshooting, please note I am only working on the image widths here:

1) I upgraded the 2nd site to v3.0.42, cropping still not working. I noticed the only difference here is that on one site I have set max/min dimensions set on my mainImage field.

2) I changed max-width AND min-width dimensions from 2400 to blank, went back to the page, cropping works.

3) Went back to settings, added max-width back to 2400, left min-width blank, went back to the page, cropping works.

4) Went back to settings, left max-width at 2400, changed min-width to 2399 and went back to the page. I tried setting the crop width in the actual modal window to 2399px AND 2400px (it allowed me to stretch the overlay box one extra pixel past the min allowed). Both didn't work.

5) Went back to settings, left max-width at 2400, changed min-width to 500. In theory, this means I can't physically crop the image any less then 500px wide. The resizable box didn't allow this so the behaviour worked as expected. Went back to the page, tried cropping the image at widths of 500px and full width of 2400px. Worked both times.

6) Went back to settings, left max-width at 2400, changed min-width to 2398. Cropping didn't work.

7) Went back to settings, left max-width back to 2400, changed min-width to 1500. Cropping didn't work.

8) Went back to settings, left max-width back to 2400, changed min-width to 1000. Cropping didn't work.

9) Went back to settings, left max-width back to 2400, changed min-width to 1400. Cropping didn't work.

10) (repeated step 5 to make sure it wasn't a random fluke). Went back to settings, left max-width at 2400, changed min-width to 500. Cropped image from 2500 x 1569 to 500 x 549. Cropping works.

10) Got bored.

 

Now, in my case, I want a user to upload an image that is AT LEAST 2400px wide, but when cropping, ONLY allow to crop top and bottom (so the final image on the system is guaranteed to be 2400px regardless of height), hence me setting the min-width also to 2400px. Not sure what to conclude here, but something seems weird.

In all cases, 'didn't work' means javascript error 'An invalid form control with name='width' is not focusable.'.
'Works' means no error in console.
Tested on Win 10, Chrome Version 55.0.2883.87 m

[SamC]

On 08/01/2017 at 6:21 PM, esl said:

Export of field:

"maxWidth": 2700,
"minWidth": 1920, // try without this
"minHeight": 330, // ...and this
"maxHeight": 1800,

 

@esl I believe these are causing your problems.

[esl]

1 minute ago, SamC said:

@esl I believe these are causing your problems.

Yes, I also pay attention to it, but not well tested. Thank you for this. But I'm trying to crop the image to the minimum allowable values, it should not be a problem, I think. I'm loading an image that fits within the constraints. After all, it is a bug? As a workaround, we can remove the restrictions, but it is not an solution, I think.

[adrian]

7 minutes ago, esl said:

But I'm trying to crop the image to the minimum allowable values

Have you tried: http://modules.processwire.com/modules/croppable-image3/

[SamC]

@esl I think it's a bug too. Removing those values is not a solution for me neither. But I can't work out why it works at min-width 500 and not 1000.

I need users not to be able to crop less than 2400px wide (or upload images less than 2400px wide).

[esl]

13 minutes ago, adrian said:

Have you tried: http://modules.processwire.com/modules/croppable-image3/

No, I have not tried yet. But I think if there is a bug in the core modules, it is necessary to fix in the first place, rather than relying on third-party modules. In any case, thank you.

[esl]

16 minutes ago, SamC said:

@esl I think it's a bug too. Removing those values is not a solution for me neither. But I can't work out why it works at min-width 500 and not 1000.

I need users not to be able to crop less than 2400px wide (or upload images less than 2400px wide).

Yes, I have a similar situation. The user can upload the image size is not more than 2700x1800 (memory limit on server), but at the same time, he must use the images of at least 1920x330, as they are in this resolution will be presented on the site. And this error occures when I try to crop the uploaded image of size 1920x1280 to a minimum (1920x330).

[SamC]

23 minutes ago, esl said:

Yes, I have a similar situation. The user can upload the image size is not more than 2700x1800 (memory limit on server), but at the same time, he must use the images of at least 1920x330, as they are in this resolution will be presented on the site. And this error occures when I try to crop the uploaded image of size 1920x1280 to a minimum (1920x330).

I'm sure there will be a solution, but maybe a core contributor would have a better chance than myself at narrowing down the exact problem. I'll give it a shot though.

[SamC]

Quick update. Removing the line:

$(".hide_when_crop").hide();

from ProcessPageEditImageSelect.min.js reveals a possible problem.

When clicking apply, a popup shows [! Value must be greater than or equal to 2400px] pointing straight at the 831. Not sure if this is related to the original error, haven't got enough time right now to look into it further.

 

 

[esl]

25 minutes ago, SamC said:

Quick update. Removing the line:

$(".hide_when_crop").hide();

from ProcessPageEditImageSelect.min.js reveals a possible problem.

Thank you, SamC. I'll try.

[SamC]

Ok, some further delving. After removing the line:

$(".hide_when_crop").hide();

Then going to page where the image is, click 'Crop', click the crop icon button...

The original values for me were like the above. See this second screenshot below, the dimensions have changed. They are the actual size of the image as shown on the screen in the modal window. I wondered why these numbers were so random until I did it a few times resizing the window. The dimensions on the right are correct (and the overlay size with the draggable handles), this image should be cropped at 2400 x 630. Could the script use these values instead?

This is where I think the script poos the bed. It sees 644 and says "wait, it's supposed to be at least 2400px!". However, the source code for the field that says 644 above shows different:

<input title="Width:" name="width" id="input_width" class="input_pixels"
       type="number" size="6" step="1" min="2400" max="2400" value="2400">

...so, I clicked on this field and try to modify the width setting which would usually be hidden by the above javascript (causing the 'not focusable' error because it's hidden). In my case, the value automagically changed to my desired width setting of 2400 and could not be further changed (because less than that violates my min-width, more than that violates my max-width). When this window first popped up, the value of width for me was 

...click 'Apply'. Bingo. The height above of 1800 clearly isn't the real height of the resulting cropped image but this didn't cause me an issues because I haven't set a min or max height.

So, I conclude that it's still not working as intended, but I guess we're moving in the right direction!

[SamC]

So I've not had a great deal of luck in fixing this. How do I move this issue forward? This needs to work for future projects and installing a module to handle this seems unnecessary.

[esl]

https://github.com/processwire/processwire/pull/54

[Schwab]

I forgot about the max and min dimensions I defined for that imagefield. Would be nice, if there was a message "Not in image dimensions" or such. I removed the min and max from the field and it worked for me.

[szabesz]

3 hours ago, Schwab said:

I forgot about the max and min dimensions I defined for that imagefield. Would be nice, if there was a message "Not in image dimensions" or such.

Silently failing can be considered to be a bug, at least a notification for the superuser could be dispatched.