Preview not appearing when image is cropped [#1896638]

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

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

capellic

he/him/his

Austin, Texas

CreditAttribution: capellic commented 23 January 2013 at 19:28

Status:

Active

» Closed (cannot reproduce)

Well, how about that. I come back to my site later and it's working just fine. I can't explain it.

Comment #2

capellic

he/him/his

Austin, Texas

CreditAttribution: capellic commented 23 January 2013 at 19:39

Status:

Closed (cannot reproduce)

» Active

Damn. It's not working again-- I have no idea why. Gremlins I tell you!

Comment #3

Matthijs

Dutch

CreditAttribution: Matthijs commented 27 January 2013 at 13:29

Hi,

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 commented 27 February 2013 at 18:17

File	Size
Screen Shot 2013-02-27 at 1.15.27 PM.png	35.15 KB
Screen Shot 2013-02-27 at 1.15.04 PM.png	50.21 KB

I 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

Matthijs

Dutch

CreditAttribution: Matthijs commented 21 March 2013 at 23:11

Hi,

Could you check if the original image has a with and height attribute? Thanks!

Matthijs

Comment #6

kendouglass CreditAttribution: kendouglass commented 6 April 2013 at 02:39

File	Size
Firebug screenshot showning display:none	93.35 KB

Same 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 commented 17 April 2013 at 16:52

Status:

Active

» Needs work

File	Size
manual-crop-missing-preview-1896638.patch	1.59 KB

~~NOTE: 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 commented 17 April 2013 at 16:54

Status:

Needs work

» Needs review

UPDATE: 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 commented 1 May 2013 at 07:38

Assigned:

Matthijs

» Unassigned

I'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

Matthijs

Dutch

CreditAttribution: Matthijs commented 27 April 2013 at 14:22

Assigned:

Unassigned

» Matthijs

Thanks for your patch whastings, it looks promising so I'll give it a test-drive later today!

Comment #11

Matthijs

Dutch

CreditAttribution: Matthijs commented 1 May 2013 at 11:05

Assigned:	Unassigned	» Matthijs
Status:	Needs review	» Fixed

Patch 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 commented 1 May 2013 at 17:05

Awesome! I'm glad I could help.

Comment #13

sacha05 CreditAttribution: sacha05 commented 11 May 2013 at 21:39

Matthijs 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

anou

French

Collonges au Mont d'Or

CreditAttribution: anou commented 15 May 2013 at 11:20

Seems 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

Matthijs

Dutch

CreditAttribution: Matthijs commented 15 May 2013 at 13:14

Hi 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