The preview image on the image field is not appearing when the image is cropped. The image appears OK if the image has not yet been cropped or if the crop is removed. I believe this issue is related to #1285674: Set preview to thumbnail of cropped image which introduced functionality to show updated the preview image to the cropped version instead of leaving it as the original.
Workflow:
- Add a new node or edit an existing node that an image field with manual crop enabled.
- Upload an image
- Click on the Crop button and the overlay appears
- Crop the image. At this point the overlay closes and the node form is revealed, but the image preview area is empty
I did some digging into the manualcrop.js file where you are hiding the IMG of the original preview, calculating the size of the cropped preview and then attaching that to the DOM. What I found was that originalImage.height() is 0. I want to point out that originalImage.width() is just fine, so it's so it's not a matter of originalImage not seeing the the image object from the overlay. But seeing how you try to set this object for both modes-- overlay and inline, I changed my configuration to use inline to see what happened. That didn't improve things, originalImage.height() still returns 0.
I tested on three browsers on OSX: Safari, Chrome and Firefox
Here's a screencast that illustrates the problem.
https://dl.dropbox.com/u/4770698/Drupal-org/ManulCropHeight0.mp4
Comment | File | Size | Author |
---|---|---|---|
#7 | manual-crop-missing-preview-1896638.patch | 1.59 KB | whastings |
#6 | Firebug screenshot showning display:none | 93.35 KB | kendouglass |
#4 | Screen Shot 2013-02-27 at 1.15.04 PM.png | 50.21 KB | kevinedmister |
#4 | Screen Shot 2013-02-27 at 1.15.27 PM.png | 35.15 KB | kevinedmister |
Comments
Comment #1
capellicWell, how about that. I come back to my site later and it's working just fine. I can't explain it.
Comment #2
capellicDamn. It's not working again-- I have no idea why. Gremlins I tell you!
Comment #3
MatthijsHi,
Thanks for your bug report (and the accompanying screencast). Before I dig deeper into this, could you please check if there's any css affecting the width of the original image? All previous reports concerning image dimensions were 99% css related, so I just want to be sure ;-)
Matthijs
Comment #4
kevinedmister CreditAttribution: kevinedmister commentedI noticed that some of previews work and others don't, and that can change when navigating away and coming back. I can't narrow it down, but it seems jquery related, as my previews (missing) have a width and height of 0px in an inline style, and the previews that do display, do not have this inline style assigned. See attached screenshots.
Comment #5
MatthijsHi,
Could you check if the original image has a with and height attribute? Thanks!
Matthijs
Comment #6
kendouglass CreditAttribution: kendouglass commentedSame problem here.
I am starting a new site today and have not added any CSS or js.
Using a clean default Zen 7.x-5.1 sub theme.
Drupal 7.22
FlexSlider library v2.1
Administration menu (admin_menu) 7.x-3.0-rc4
Chaos tools (ctools) 7.x-1.3
File (Field) Paths (filefield_paths) 7.x-1.0-beta3
Link (link) 7.x-1.1
FlexSlider (flexslider) 7.x-2.0-alpha1
FlexSlider Fields (flexslider_fields) 7.x-2.0-alpha1
FlexSlider Views Style (flexslider_views) 7.x-2.0-alpha1
Manual Crop (manualcrop) 7.x-1.4
Entity API (entity) 7.x-1.0
Libraries (libraries) 7.x-2.1
Draggableviews (draggableviews) 7.x-2.0
Views (views) 7.x-3.6
Comment #7
whastings CreditAttribution: whastings commentedNOTE: DON'T USE THE FOLLOWING PATCH IN PRODUCTION, as it's only a partial solution.I am having this problem on a site I'm working on, so I played with manualcrop.js to see if I could fix it. What I came up with (see the attached patch) keeps the image from disappearing after saving the crop,
but it breaks saving the crop data on form submit. So the preview image won't disappear,but the image won't be cropped.Perhaps this will help someone else reach a full solution. I may be able to find a full solution later, and I'll post it if I do.
Comment #8
whastings CreditAttribution: whastings commentedUPDATE: After posting the patch in the previous comment, I've come to find that the patch does not seem to break the saving of the crop selection like I'd previously thought. I believe now that the saving problem I was having was due to another issue that cleared up when I disabled and re-enabled the module. Therefore, I'm moving forward on my project with this patch in place, and I think it can be reviewed as a possible solution for this issue.
Comment #9
stox CreditAttribution: stox commentedI'm having the same issue: When logged in under the administrator role I can see the preview, but no other roles can. I don't see any permissions settings that might cause this to happen. This may be down to my personal configuration and other modules I have installed so it might be worth others who've had this issue checking to see if they can see the preview when logged in as admin.
Comment #10
MatthijsThanks for your patch whastings, it looks promising so I'll give it a test-drive later today!
Comment #11
MatthijsPatch applied and commited!
I've moved your code into a function and adjusted all other image width and height determinations to use that function. This way the width and height attributes are no longer required! Yay!
Comment #12
whastings CreditAttribution: whastings commentedAwesome! I'm glad I could help.
Comment #13
sacha05 CreditAttribution: sacha05 commentedMatthijs and whastings thanks for your contribution! We're getting close to the solution but I'm afraid it's not yet the end...
I've applied whasting's patch but the preview image still doesn't appear in Chrome but are correctly displayed on Firefox
I've applied Matthijs' patch with deeper modifications to the manualcrop.js and it indeed solves the preview image issue.
However, my problem goes as follow (with Chrome; Firefox again, works fine!)
1. choose image;
2. click on upload;
3. Manual crop is launched right after the upload (I've tried without, it doesn't affect the behavior) and the preview image on the top-left corner of the screen appears but not the image of the overlay to crop on;
4. i click on "save" anyway; the preview image has the original format
5. I click on crop again and now the image to crop on appears and once I have drawn my selection and save, the preview image appears fine as well.
So to wrap-up, it seems that there are cross-browsers conflicts...
Comment #14
anouSeems to be something with webkit browsers (safari and chrome for my testing)...
Didn't found a fix but an issue talking about it.
Comment #15
MatthijsHi sacha05,
Thanks for your feedback! Does this happen with all images (pick a random image from Google and try again) and in all cases? Or does it only happen with rather large images?
Matthijs
Comment #16
sacha05 CreditAttribution: sacha05 commentedHey Matthijs,
I'm afraid the behavior is the same for any image uploaded... What could cause a cross-browser issue with jQuery?