Jump to content

Image Crop Ratios


Robin S
 Share

Recommended Posts

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

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/

  • Like 16
Link to comment
Share on other sites

@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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

@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

  • Like 3
Link to comment
Share on other sites

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

?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...