Xonox

Image Cropping Not Working In Backend

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?

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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).

Share this post


Link to post
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).

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By mike62
      Please see attached screenshot. The image on the left is the original image that was uploaded. The image on the right is what it looks like after it was resized to fit into a template by ProcessWire using
      <img src="<?php echo $featured_image->size(854,0)->url ?>" /> This is a significant loss of color for these images. Is there a way to prevent this from happening — other than forcing client to crop the images to the exact dimensions ahead of time, and not resizing with PW?

    • By chuckymendoza
      Hello together,
      I have a problem with the image field and in my case it seems that there is a limit of how much images can be in such field.
      The following case:
      I have around 20 pages. Each has a usual image field, where I can upload an unlimited number of images (array).
      Most of the pages got 50-200 images but one page got 411 images (I know, it’s much  )

      Now, when I change the order of one image (let’s say I drag & Drop the first image after the third) or delete one image by clicking on the trashcan, everything runs fine. BUT when I click SAVE the image won’t be deleted or moved to it’s new place. You can change anything else on the page - I have a text field there - and save it, no problem.
      Interestingly I can add (upload) new images but I’m not able to delete or move them.
      - The file size of the images are between 200kb and 1.7MB, RGB, JPGs.
      - When I duplicate the page and try to delete/move I got the same problem.
      - I also created a whole new page and got the same problem
      - Also tried a different server (virtual and online): same problem
      - ProcessWire 3.0.62
      So, is there a limited to the images field? Any clues except limiting the image files to max. +-200 images?
       
      Thanks so much in advance and have a great weekend.
      Thomas
    • By mike62
      I am new to PW, and am trying to get an image to display, from a field in my template. Here's the code I'm using:
      <?php $image = $page->home_header_image; echo "<img src='{$image->url}' alt='{$image->description}' />"; ?> I'm following the tutorial on this here.
      When I save the template and reload the page, the path to the image is incomplete. If just echoes:
      <img src="/site/assets/files/1/" alt=""> It omits the name of the image, at the end of the path.
      Here's the site I'm working on:
      http://dev.delucaswpg.webfactional.com
      A couple caveats:
      I'm using ProcessWire 2.3.0 (tried updating the site and everything went berserk because of some plugin dependencies; point being: I can't update to the latest PW). I tried using the ->size thing and it gave me an error, saying it couldn't use 'size' in this context. Which I also thought was weird. Any ideas? Thanks!
    • By rst
      Hello,
      I have repeater field with an image field as one of its fields. It works correctly on all but one templates. I added an image, it shows the image uploading, but then the image just disappears and it doesn't save. What could it be ?
       
      Thanks
    • By sirhc
      Hi,
      I have a big image in my image field and want to resize it to 2280px before showing it to the user.
      Most images are fine and showing as expected, but with one I have the following error;

      Error: Out of memory (allocated 159383552) (tried to allocate 12288 bytes) (line 243 of /htdocs/process/wire/core/ImageSizerEngineGD.php) 

      Why is this with one image and not with the other ones, and how to solve this?
      Greetz.