Jump to content

Image Cropping Not Working In Backend


Xonox
 Share

Recommended Posts

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?

 

Link to comment
Share on other sites

  • 2 weeks later...
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?

Link to comment
Share on other sites

  • 2 weeks later...

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 by SamC
More detail
Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

image-field-input-settings.JPG

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Quick update. Removing the line:

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

from ProcessPageEditImageSelect.min.js reveals a possible problem.

Capture.JPG

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.

 

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Screenshot_2017-01-10_17_42_50.png

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?

Screenshot_2017-01-10_18_03_26.png

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 

Screenshot 2017-01-10 18.00.03.png

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

Screenshot_2017-01-10_17_43_18.png

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

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 8 months later...
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...