Been using Imagefield Crop on many projects over the years - thanks for the continued maintenance and upgrades to this module.

I'm starting a new Panopoly-based Drupal site and one of the first modules I've installed is Imagefield Crop, but it's not working properly. On node edit pages, the behavior of the cropping widget isn't correct. I'm not sure how to describe it other than with a screenshot (see below).

(but I'm going to try anyway) It appears that only a portion of the image can be cropped, depending on the size of the cropping box. The image inside the actual cropping box is not correct either. Furthermore, the resulting teaser image appears distorted.

Any clue as to what is going on? I'm working with a stock install of Panopoly (RC3) and Imagefield Crop (7.x-1.1), so it should be pretty easy to reproduce. My Imagefield Crop settings are attached in the second screenshot below.

Thanks,
-mike

CommentFileSizeAuthor
imagefield_crop_panopoly_settings.png59.82 KBultimike
imagefield_crop_panopoly_issue.png401.55 KBultimike

Comments

ultimike’s picture

ultimike
Primary language English
Location Florida, USA
commented

Some additional info - I tried disabling Panopoly's Panels override of the "Node add/edit form" and the issue still persists.

I then changed the theme from the "Responsive Bartik" that Panopoly provides to standard "Bartik" - issue still persists.

Then, I tried changing the theme to Seven - issue still persists.

-mike

ultimike’s picture

ultimike
Primary language English
Location Florida, USA
commented

Ah ha! The issue has to do with Panopoly's "panopoly_image" module.

The default image styling (in panopoly-image.css) is as follows:

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

This is what is causing the issue. Commenting out this code fixes the Imagefield Crop behavior. Obviously, this is not a solution (because of what this will do to other image displays on the site), but it should give me a clue to determine a solid fix.

More later...

-mike

ultimike’s picture

ultimike
Primary language English
Location Florida, USA
commented

Okay - after some more playing around, I've found a workaround, but I think that more can be done to make it a more robust fix.

My workaround is to set the admin theme (including for adding/editing nodes) to Seven - or any non-responsive theme. Then, the following CSS is necessary:

.imagefield-crop-widget img {
  max-width: none;
  vertical-align: baseline;
}

This ensures that the CSS from the panopoly_image module doesn't interfere with Imagefield Crop. Where to put this CSS? Well, that's a good question - there's some options:

1. Hack the Seven theme and add it to style.css (seriously, don't do this - kittens die when you do).
2. Hack the Imagefield Crop module and add it to jcrop/css/jquery.jcrop.css. This isn't much better than the first option (the kittens aren't as cute).
3. Use the CSS Injector module to insert the CSS exactly where we want it. Not an awful choice, but then the CSS isn't in code.

There's always the option of subtheming Seven and adding these 4 lines of CSS. Seems like overkill though, so maybe #3 above is best for now.

I poked around the latest version of the Jcrop plugin and it looks like a fix for this sort of situation is part of that release. The 7.x-1.1 version of Imagefield Crop uses Jcrop version 0.9.9. So, maybe if we ask really nicely, one of the maintainers will consider upgrading the Jcrop plugin to version 0.9.12 in the module to (hopefully) fix this issue going forward.

Thanks,
-mike

clockwood’s picture

clockwood commented
Issue summary: View changes

Was pulling my hair out trying to figure out why I was getting this same behavior on my zen sub theme. Many thanks for the tip!

masher’s picture

masher commented

+1 for solution #3

Just adding:

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

into my Zen sub-theme's CSS fixed the problem immediately.

Many thanks