I just want to share an issue with Zen theme and a possible solution.

In Zen theme's normalize.css (or *.scss, line 461) file, max-width is set to 100% for the <img> tags. This messes up the preview and cropbox images (in div.imagefield-crop-preview and div.imagefield-crop-cropbox) in ImageField Crop's "Image cropped" field type, because these images get distorted, as you can see here:

Images get distorted in ImageField Crop's field when max-width is set to 100 percents for img

Possible solution (this must be placed in a file which appears later in the source code than normalize.css!):

/* Zen - max-width: 100% for img tags in normalize.css messes up ImageField Crop's preview and cropbox -
     we have to set max-width to none to fix it */
/* inner wrappers: div.imagefield-crop-preview, div.imagefield-crop-cropbox */
div.imagefield-crop-widget img {
  max-width:none;
}

AFTER the setting, the preview and cropbox images look fine:

Images do NOT get distorted in ImageField Crop's field when max-width is set to none for img

I hope it saves some minutes for others using this module and Zen theme.
(And sorry for posting it as an "issue", but this way it can be found here, related to the module.)

CommentFileSizeAuthor
#14 zen-themefix-1779494-branch2.patch2.42 KBBastlynn
#13 zen-themefix-1779494-branch1.patch2.36 KBBastlynn
#12 1779494_fix_cropbox_and_preview.patch1.35 KBbserem
#4 zen-themefix-1779494-2.patch1.77 KBBastlynn
#2 zen-themefix-1779494-1.patch1.76 KBBastlynn
ImageField_Crop__Preview_and_cropbox_images_get_distorted_with_max_width_100percents.png106.54 KBSk8erPeter
ImageField_Crop__Preview_and_cropbox_images_do_NOT_get_distorted_with_max_width_none.png97.39 KBSk8erPeter
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented
Issue summary: View changes
FileSize
zen-themefix-1779494-1.patch1.76 KB

This hit me as well and I was lucky enough to find it in the archives.

I've got a patch for this against 7.x-1.x - see attached.

Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented
Status: Closed (fixed) » Needs review
Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented
FileSize
zen-themefix-1779494-2.patch1.77 KB

And for 7.x-2.x

pkiff’s picture

pkiff CreditAttribution: pkiff commented

Thanks for the patches Bastlynn, and for re-opening this issue to bring it back up the queue.

I'm running 7.x-1.x, using a sub-theme based on Omega 4, and I ran into this distorted image issue as well. So this problem may be a generalized issue with any theme that uses normalize.css, in which case, there may be a need for a more generalized patch that does not require checking for the presence of a Zen theme.

briandev’s picture

briandev CreditAttribution: briandev commented

To add to pkiff's comment - I noticed this issue on the Twitter Bootstrap theme. Added the CSS posted by Sk8erPeter and problem solved.

tonyoh’s picture

tonyoh CreditAttribution: tonyoh commented

This is amazing!

This has been haunting me for an absolute age - every crop module - exact same thing on IE10.

Thank you.

Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented

Based on it hitting multiple themes, maybe we shouldn't bother checking at all and just add CSS to correct regardless of enabled theme?

div.imagefield-crop-widget img {
  max-width:none !important;
}
MHz’s picture

MHz CreditAttribution: MHz commented

I put the css from #8 in jquery.Jcrop.css and that fixed it for me. Thanks Bastlynn.

steveOR’s picture

steveOR CreditAttribution: steveOR commented

I am using Ember theme for admin pages and this same issue is coming up. Not sure of the best approach... sub-theme Ember and fix there? Just going back to Seven admin theme for now since that works.

bserem’s picture

bserem CreditAttribution: bserem commented
Category: Support request » Task
Priority: Minor » Normal
Status: Needs review » Needs work

This also happens to a theme a designer made that is not based on a base-theme (I know...).
I also agree with Bastlynn (#8).

Scaling this to normal, as it makes the module seem broken for many many themes.

bserem’s picture

bserem CreditAttribution: bserem commented
FileSize
1779494_fix_cropbox_and_preview.patch1.35 KB

Attempt for a patch against 7.x-1.x

Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented
FileSize
zen-themefix-1779494-branch1.patch2.36 KB

Ok, new patch :) This one adds a toggle in the theme administration to turn the css include on or off for those themes out there that don't have issues with this field.

This one for 7.x-1.x

Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented
FileSize
zen-themefix-1779494-branch2.patch2.42 KB

And againsts 7.x-2.x

Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented
Status: Needs work » Needs review

Kicking back over to review state

Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented
Category: Task » Bug report

Bumpity.

There's a LOT of issues in the queue that look like they could be addressed with this. Anything with a 'My image is distorted / not saving / wrong area' could be because of this root cause unless otherwise ruled out from their theme.

Is this something I need to reroll against dev branches for merging or?

  • joetsuihk committed b9fa6df on 7.x-1.x 
    Issue #1779494 by Bastlynn, bserem: preview conflict with zen theme

Zen...
Bastlynn’s picture

Bastlynn CreditAttribution: Bastlynn commented
Status: Needs review » Fixed

Thanks! :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

315redad’s picture

315redad CreditAttribution: 315redad commented

thank you so much, save a lot of time!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

j4’s picture

j4 CreditAttribution: j4 as a volunteer commented

HI, Has this commit been pushed to the version 7.2 also?

Thanks!

qqboy’s picture

qqboy CreditAttribution: qqboy commented

#8 nice
but this

div.imagefield-crop-widget img {
max-width:none !important;
max-height:none !important;
}