Crop pictures when inserting them

When you say "inserting pictures".... are you referring to the Image pane, an imagefield, media button on wysiwyg editor, etc.? Or all of the above? :-)

Are you wanting Panopoly to contain the modules to provide this functionality vs. adding them on your own?

Here are a few modules I would recommend...

Imagefield Focus (alternatively Focal Point (my preference))
Smart Crop

Reinterating a little bit of my IRC conversation with @lsolesen from earlier:

This is such commonly requested functionality, it would be super awesome to have in Panopoly!

My main worry, however, is that there's a couple conflicting ways to do implement it (cropping or selecting a "focus point/region") and some modules only work with fields (not Wysiwyg), such that it might be hard to find an implementation that's "right for everyone" to put in Panopoly.

A client requested this, so I'm going to a little time into researching the options. I'll post what I find here.

is that there's a couple conflicting ways to do implement it

Agreed. Maybe in situations like this we create a separate module that we include in the .make file but not in the .info file. That way we can provide an approach to this, but not make it required.

I did some testing/experimenting on this with the help of @lsolesen today. Here's the modules I looked at:

1. ImageField Focus - You select a region of the image that is the focus and the image styles will do there best to include that bit whenever cropping OR allows the user to specify a real crop of the image (although, the UI of this is pretty weird). Works with fields and there is a mostly working patch for Media/WYSIWYG integration:#1781778: Integrate imagefield_focus with the Media module. One cool feature is that you can set a minimum for a field (ex. 80x80, our thumbnail style) and lock the aspect ratio, so you know that region the user selects will fit your ultimate aspect. UX is a little weird, though, and could use some improvements.
2. FocalPoint - You select a single point that is the focus and the image styles will never exclude it when cropping. Works with fields and Media/Wysiwyg. This is more "correct" than the above, but will likely seem a little weird to users (they're used to the Facebook style crop selector).
3. Image javascript crop - This is real cropping (not a "focus point or region") that can happen before image styles are applied. Works with directly with Media, which means it can work with fields if the field's widget is the Media Selector. Also allows setting a minimum and locking the aspect ratio. Doesn't seem to be actively maintained right now though.

All of these modules have a caveat with regard to Wysiwyg: once you set the focus/crop area, you can't change it without going to Admin -> Content -> Files - this should probably be fixed, but it seems like it's caused by the way Media does settings at the moment.

So far, I like the ImageField stuff best, but only playing around for 1.5 hours it's hard to say. I really think that users a expect it to work like Facebook's crop/focus thing that happens when you upload a profile image. In any case, all of the options I tried will need some work in order to get it there.

And, again, just for the record: I'm not necessarily for pushing this upstream into Panopoly just yet per the reasons I gave in #5. But it's worth thinking about and discussing!

My hesitation with something like Image javascript crop is that you do it per style. I realize Panopoly only ships with a handful of image styles, but in my experience (mostly with larger sites) is that we easily have a lot more styles.

As co-maintainer of the Image javascript crop module, my recommendation and preference would be Manual Crop - which I think is the best of the lot!

@mrfelton: Heh, I had no idea you were one of the co-maintainers of imagecrop! I'll give manualcrop a try when I have a chance, thanks for the suggestion. :-)

@mrfelton: I just tried Manual Crop and I'm super impressed! The user experience is way better than any of the other ones I've tried so far (although, there's still some little improvements that could be made).

I've just gotten to the part of this client project where it's time to start implementing this, so I'm going to work on a patch that integrates this into Panopoly. I won't commit anything until after @mrfelton and @populist can approve the result.

@lsolesen: Is there a module where you don't have to add something to your image styles? I think this is the case for them all...

Manual Crop will most likely be a deterrent for some larger clients that I have. I have some projects with 20+ image styles. There's no way they are going to manually crop each image style for each picture.

Oh, that's what you guys mean!

You don't have to manually crop for each image style unless you configure it that way. The way I'm configuring it in the patch I'm working on is that you setup the crop for the panopoly_image_full style and then it will fallback on that crop for all image styles that haven't been specifically cropped. So, unless you specifically choose to crop it again for another style, you'll just crop each image once. :-)

Does that work for you?

@lsolesen: There's a lot of options actually! You could set it so that a particular individual field requires you to do crop for the "full" image style and has an optional crop for the "square" image style, which you only do when you think the "square" image style does a bad job on it's automatic cropping. But if you don't add a manual crop, it could just inherit the cropping that you already did for the "full" version.

Manual Crop is actually crazy flexible in that you could do a seperate manual cropping for every image style, but you don't have to. There's inheritence, setting some styles as required or optional on various fields, etc.

But what I'm going to include in this patch when I finish it, is super simplistic. It's just going to ask you to crop the "full" image style, and inherit that on all the other image styles. I'm not sure at this point if I'll even enable optional croppings for the other image styles, but users of Panopoly could use them if they wanted.

It's been a while since I used manual crop but it sounds like this may work. As long as this is default config that can be overridden I think it'll work. That still allows sites to install some of the other more automated cropping options.

Ok, here is my first pass at this!

It involves patches to lots of components in order to integrate image cropping everywhere we do images. But you can test it with just the panopoly_images patch since that pulls in 'manualcrop' (with some patches - you need to run the .make file) and sets up the image styles PLUS one of these patches:

• panopoly_widgets: try out the "Image" or "Spotlight" widgets
• panopoly_users: try setting your user picture
• panopoly_pages: create a Content Page and add a Featured image

Then there is a patch that adds Behat tests to make sure the "Crop" button is present in places that we're already testing. There's a number of things we aren't testing at all right now (like the "Image" widget, user account page and featured images on the content page), so I'm going to hold off on testing for the "Crop" button until later when those things have tests.

Here's an overview of how this works:

• For the main image styles (panopoly_image_full, panopoly_image_half, panopoly_image_quarter) it's allowing a custom crop for panopoly_image_full which is inherited for the others. It doesn't attempt to maintain proportions or anything because those styles don't specify a height, just a width. This also means the same crop should work pretty much the same for any of them.
• For panopoly_image_featured, panopoly_image_square, panopoly_image_thumbnail and panopoly_image_square we allow a custom crop but fallback on panopoly_image_fulls when none is given. If the user givens a custom crop, it'll be forced to be proportional to the output size (because all of those specify both height and width).
• There is no cropping for panopoly_image_video since that's only for still versions of the videos
• Everywhere that allows cropping is using the panopoly_image_full style (so you only crop each image once by default) except for the Spotlight widget where you're cropping panopoly_image_spotlight (which forces you to crop proportional to the output size of the spotlight!)
• I'm not enabling any option crops anywhere, but users could in places that make sense (like where they know thumbnails or square images will be important)

Anyway, everything is looking great to me!

I'll include a bunch of screenshots below so you don't have to do all the patching in order to get an idea of what this does...

Screenshots

The cons

So, I'm really liking this! It fits in with what I think most users expect from image cropping and the user experience is good. And it should be compatible with something like Focal Point or ImageField Focus if you wanted to use one of them too (ie. those are the "automatic crop" and this is the "manual crop").

The main down side is that this adds a whole bunch of new dependencies. And we're still haven't entirely figured out how to remove dependencies when we don't need them any more. :-/

That said, on every site I've ever done with images, this is something that users have asked for. So, I'm +1 on it.

Please let me know what you think!

Reorganized attachments.

Got the go ahead to commit from @mrfelton and @populist!

I wanted to enforce a 16:9 aspect ratio crop on Featured Images, was delighted to see that Panopoly had done the heavy lifting, but discovered something puzzling.

In the panopoly_image_featured image style, Panopoly uses a manual crop with a 48:26 ratio, eventually scaling the image to 480x260. As it happens, you get a 16:9 ratio from 48:27 (or 480x270).

David, if this wasn't a simple 7→6 typo, can you share any memories why you chose that resolution and/or aspect ratio? Was there a reason why Featured Images were 10px height away from a perfect 16:9 ratio? Thanks.