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 Markus Breitinger
      I want to use Particle.js as background of my page. What modules do i need and where must i put the code?
      The usage of particle.js in plain HTML is in the attached files.
      index.css
      index.html
    • By rst
      I am having problems uploading svg images in the the latest pw 3.0.98. It shows the preview and has the spinner on top of it, and just gets stuck on that.
      Worked fine in the previous version of PW
    • By Noel Boss
      Hi, I'm stuck since hours and don't know what to do. Here is my Problem:
      I try to generate Previews of PDF using imagick. I have 4 PDF, I generate a preview of the first page of the pdf, save it to a temporary file and want to import it using the api into an image field. It works for the later 3 pdf but not the first. I add it to the image field and save it. Inside the function that saves it, the image is stored in 'data' as well as in 'itemsAdded' but as soon as i leave the function, its nowhere to be found.
      Process:
      1. create previewimage using imagick and create Pageimage > works
      2. add image to filed 'filepreviews', returns Pageimages array with image added > okay
      3. save page > returns true
      4. Outside renderPreview method, image is not anymore in 'filepreviews'
      // mymodule // … // foreach($files as $file){ $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); // if there is no preview image… if (!$preview instanceof Pageimage) { $this->renderPreview($file) // we create one using $this->renderPreview > should return true on successful save dump(wire('page')->filepreviews); // my Image is nowhere to be found $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); } // end for each // render a preview of an otherwhise not supported file format // return true if sucessfull save private function renderPreview($file) { $page = wire('page'); // get path to temporary image $tempFile = $path.$file->basename(false).'-preview.jpg'; // … some imagick code // … and save it: $imagick->writeImage($tempFile); $img = new Pageimage($page->filepreviews, $tempFile); $img->description = $file->basename(false); // destroy temp image unlink($tempFile); // this is my Pageimage, all good… dump($img); // save image, my Pageimage can be found in data and itemsAdded – all good dump($page->filepreviews->add($img)); $page->of(false); $success = $page->save(); // sucess = true dump($success); return $success; }
       
      Second question:
      Would there a generally better approach? Like using pageFiles somehow. Goal is to be able to use the image api like scale etc – I don't generally need the images to be stored in an image field.
       
    • By Marc
      I want to use the API to duplicate an image from one field to another (on the same page). The duplicated image should be a new file so both fields should not point to the same physical file. The field that holds the image that I want to duplicate is called 'image_front' and the duplicated image should go to a field called 'image_thumb'. Any image that is already attached to image_thumb should be removed because it should hold only one file. The same goes for image_front, it should have only one image. Here's what I have so far:
      $original = $page->image_front; $file = $original->getFile($original); $new = $original->clone($file); $page->save(); $page->image_thumb = $new; $page->save('image_thumb'); This works in the sense that the image is successfully cloned but it is attached to both fields so both fields end up have their original image plus the cloned image. 'Image_thumb' should only have the cloned image and 'image_front' should only have the original image. What would be the best way to remove those images and am I even approaching this correctly?
    • By MilenKo
      Hello guys. I feel a bit ashamed of this fact but I just needed to add an image with some text wrapped around it using CKEditor and I simply can't achieve that. I have an image field attached to the template (called images) and it is showing promptly the uploaded images. I am able to manipulate the image and I set its alignment to left side. Then I add some text and I can see in CKEditor that the text is properly surrounding the image. However, once I save the page and view it, it shows the text under the image or only a line is staying asside the image and the rest is under the image again. As far as the field used for the text (body) is set to TextMultiLang and I did not added any text formatters and chose the content type to be HTML/Markup.
      In my CSS I've added some of the PW styles for the alignement as per some posts here but that did not help either. Something I am missing again?