Image Crop Ratios

[Robin S]

Inspired by a recent question.

Image Crop Ratios

Allows preset aspect ratios to be defined per image field for the ProcessWire image crop tool.

The module adds a select dropdown to the crop tool. Choose an aspect ratio and the crop area will be fixed to that ratio.

Screencast

Installation

Install the Image Crop Ratios module.

Configuration

• Default aspect ratios for all image fields can be defined in the module config.
• Aspect ratios for specific image fields can be defined on the Input tab of the field settings.
• You can override the ratio settings in template context if needed.
• Insert a hyphen as the first item in the ratio settings unless you want to force a ratio to be applied to the crop tool. The hyphen represents a blank option that allows a free crop area to be drawn.

Usage

1. Click the "Crop" link on the details view of an image thumbnail.
2. Click the "Crop" icon at the top of the editor window.
3. Choose an option from the "Ratio" select dropdown.

 

https://github.com/Toutouwai/ImageCropRatios
https://modules.processwire.com/modules/image-crop-ratios/

[bernhard]

@Robin S I voted for that in 2016... Why did that take so long? ?

Just kidding ? Thank you for creating this and sharing it with us! ? 

[kunago]

Thanks a lot! This is a super easy solution. I don't want to let the user change the aspect ratio and this does it just well. Excellent job. Thank you again.

[horst]

@Robin S, a side question here: Do you know a way how to make the labels multilanguage aware?

With the CAI3, I also use a textareafield like yours in the configpage. It would be pretty fine, if there would be an easy to maintain way for the users / devs to translate the labelnames. 

[Robin S]

On 3/17/2020 at 8:50 AM, horst said:

Do you know a way how to make the labels multilanguage aware?

Sorry, I never get to work on multi-language sites here in NZ so I don't know about multi-language features.

[bernhard]

On 3/16/2020 at 8:50 PM, horst said:

@Robin S, a side question here: Do you know a way how to make the labels multilanguage aware?

What labels are you talking about? (Maybe better in a new thread...)

[LMD]

@Robin SThank you for a perfectly timed module!

I have a wishlist suggestion - as well as the fixed ratios, would it be feasible/possible to also include a minimum size for the crop area?

For example, a banner image (used in your own screencast demo) might have a minimum width requirement.  It is easy to shrink a larger cropped area, but obviously, a smaller area can not be "embiggened" without pixelation.

Maybe it could be specified along with the ratio  (e.g., using a comma):

Banner Image=2:1,800:400

Technically, you'd only need to specify the length of the longest side.

[horst]

@LMD CroppableImage maybe?

[Robin S]

12 hours ago, LMD said:

I have a wishlist suggestion - as well as the fixed ratios, would it be feasible/possible to also include a minimum size for the crop area?

As far as I can see this isn't possible/practical. Although the cropper library does allow for "minCropBoxWidth" and "minCropBoxHeight" options these can only be set when the cropper is initialised. To change the options you have to destroy the existing cropper and reinitialise it with complete new options, but the library provides no ability to get the existing options (as supplied by the PW core) before destroying the old cropper. And I don't want to duplicate and maintain ProcessPageEditImageSelect.js to be able to recreate all the options.

The options that can be updated dynamically are very limited - only setAspectRatio() and setDragMode() methods are available. If anyone can see a way to set minCropBoxWidth and minCropBoxHeight dynamically then let me know.

So as @horst suggested, use CroppableImage instead if you need to set minimum crop sizes.

[LMD]

Thanks.  I will look more closely at CroppableImage.

[David Karich]

@Robin S Awesome module. I never understood why this functionality is not in the core. ?‍♂️ Thank you for implementing this feature! I sent you a pull request on GitHub, with a bugfix regarding multilanguage setups and float conversion, small performance tweaks, and support for repeaters! Best regards.

https://github.com/Toutouwai/ImageCropRatios/pull/2

[Robin S]

9 hours ago, David Karich said:

I sent you a pull request on GitHub

Thanks, will discuss with you over on the PR.

[Robin S]

v0.1.1 released with support for Repeaters and comma as decimal separator. Thanks @David Karich!

[David Karich]

Hey @Robin S, 

you're right about your modifications for the repeater. Regarding the float conversion, I have described the problem in detail on GitHub. I suggested another solution. I also added support for CKEditor inline images in a new PR. All info and changes can be read here: https://github.com/Toutouwai/ImageCropRatios/pull/3

?