Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Hi there,
I just stumbled upon the following issue:
When using Manual Crop on an image field inside a Paragraphs bundle (https://drupal.org/project/paragraphs) that is displayed as collapsed things get pretty messy:
When trying to open a collapsed Paragraph all its text fields get emptied. So a node is then saved all that information is lost.
If I disable Manual Crop for the image fields inside my paragraphs bundle everything works fine again (this is why I posted this to Manual Crop's issue queue, still not sure where it really belongs, though).
Attached screenshot shows the JS error I receive in Chrome.
This happens with jQuery 1.10. Switching back to jQuery 1.9 seems to (temporarily) solve the issue.
This happens with both jQuery 1.10 and 1.9 but its not entirely repeatable and seems to happen randomly.
| Comment | File | Size | Author |
|---|---|---|---|
| manualcrop-vs-paragraphs.png | 54.96 KB | Daniel Wentsch |
Comments
Comment #1
Daniel Wentsch CreditAttribution: Daniel Wentsch commentedComment #2
MatthijsThe missing elements property indicates that the element hasn't been properly processed and added to the JavaScript settings. I suspect it also doesn't work with the default jQuery, but could you test that to be sure?
Comment #3
Daniel Wentsch CreditAttribution: Daniel Wentsch commentedYep, it's the same with the default jQuery version.
Strangely it didn't happen anymore recently on 1.10 and I have no idea, why.(Update: happened again, no matter which jQuery)Comment #4
boinkster CreditAttribution: boinkster commentedI can confirm this problem, with a twist. I disabled the WYSIWYG for text fields and they no longer get munched. But, unless the first paragraph item has been open for editing, none of the images in subsequent paragraph items have a functioning crop button.
Stated another way:
If the paragraphs default edit is open (all items with active edit forms) , then all image crop buttons are enabled
If the paragraphs default edit is preview or closed (no items with active forms), then image crop buttons display but don't function: no indication of cropped status and clicking button causes no action. Once the FIRST item has been opened for editing, then functionality is restored for the other images.
Hope this helps track down the logic.
Comment #5
boinkster CreditAttribution: boinkster commentedAlso, in this bundle is a Linkit widget, it is following the same behavior as above, that is, nothing works unless the first paragraph item has an active edit. After an active edit on the first item, everything is fine.
Comment #6
artfulrobot CreditAttribution: artfulrobot as a volunteer commentedI confirm boinkster's findings: If the first paragraph has been edited (un-collapsed) then cropping works (at least inline cropping works) on subsequent paragraph items.
This is an awesome tool so I really hope a resolution can be found.
If I open, say, the 2nd paragraph item and click Crop, I get this js error:
TypeError: Drupal.settings.manualcrop is undefinedafter which it seems that most of Drupal's ajax/js is broken(!) which can lead to lost data.
Comment #8
MatthijsThis should be fixed now. Please update to the latest version and try it out yourself :-)
If the first crop tool had an #access = FALSE, the settings were not properly added due to a check that prevented the settings from being added twice. This check has been removed now, hopefully this doesn't cause any issues for other modules...
Comment #10
Daniel Wentsch CreditAttribution: Daniel Wentsch commentedI hope it's OK to re-open this, as my problem is very closely related:
I'm still having issues with collapsed Paragraph items.
1. if I open the first collapsed Paragraph item that contains a cropable image everything works normal
2. when I open any other collapsed Paragraph item (with a cropable image) but the first one I get the error Uncaught TypeError: Cannot read property 'elements' of undefined immediately and Uncaught TypeError: Cannot read property 'styles' of undefined after clicking the crop button.
3. if I then open the first collapsed Paragraph item (with a cropable image) and switch back to a later one it also works.
Using jQuery 1.10 but also tried lower versions.
Manual Crop is 7.x-1.5
Comment #11
Daniel Wentsch CreditAttribution: Daniel Wentsch commentedAfter Updating to February's dev version it doesn't work anymore at all:
On opening the Paragraph:
VM21440:235 Uncaught TypeError: image.imgAreaSelect is not a function
(anonymous function) @ VM21440:235
ManualCrop.isLoaded @ VM21440:868
ManualCrop.showCroptool @ VM21440:98
onmousedown @ edit:1
On clicking the Crop link
VM21440:461 Uncaught TypeError: Cannot read property 'setSelection' of null
ManualCrop.setSelection @ VM21440:461
ManualCrop.resetSelection @ VM21440:378
ManualCrop.closeCroptool @ VM21440:344
onmousedown @ edit:1
Comment #12
Daniel Wentsch CreditAttribution: Daniel Wentsch commentedOk ok I got it.
For everybody else who dabbles into this:
- update manualcrop to dev (2016-Feb-10 as of writing this)
- update imgareaselect to v0.9.11-rc.1
No more troubles, thanks a lot for the work to fix this :)
Is there a reason for not releasing these latest improvements?