Jump to content
kunago

Image cropping with fixed aspect ratio

Recommended Posts

I am using the integrated image field type with the possibility to crop images. It is an excellent feature. For one project I am trying to work with some images that need to be cropped with a fixed aspect ration, for instance 1:2. I can do the same in PHP but that does not show the user what will be the result before the image is saved and viewed. Also it is quite difficult for some to prepare images according to the aspect ratio required so nothing needed is cropped actually.

I look at cropper that is a part of the ProcessPageEditImageSelect module. Cropper does have the possibility to set the aspect ratio but it is not used in the module itself. Is there any programatical way to force the cropper to use a specific aspect ratio without any need to mess around with core modules?

Share this post


Link to post
Share on other sites

Hi @kunago and welcome to the PW forum.

I am not sure if you refer to the actual "page-edit" / backend-GUI scenario, but I guess you do.

What you can do is to duplicate the original image, and then crop that duplicated image, and save it as a variation.

Or do you want to have a custom preview of all images in the page-edit instance to be always "aspect ratio 1:2"? (thumbnails)

Share this post


Link to post
Share on other sites

there is a thirdparty module available, that let you define different crops with absolute width x height sizes. It is called CroppableImage3.

  • Like 3

Share this post


Link to post
Share on other sites

Hello again (by the way I really love ProcessWire),

I am attaching a screenshot. Let's say I have that wide image but I need to crop an image in ration 3:1 (for example 900x300 px). I cannot force the highlight to stick to the needed ratio and resize proportionally. I am not sure the CroppableImage3 module can handle this as I looked at the description but thank you for the suggestion.

Clipboard01.jpg

Share this post


Link to post
Share on other sites

@kunago: CroppableImages only purpose is the creation of variations with fixed aspect ratios. But you need to define it in pixels.

Lets say you need a 3:1 result, your original image is 3000x3000 px, you need to define the outcoming pixeldimensions, for example 900x300, or 1800x600, or 3000x1000, ...

Then you will get a fixed aspect ratio rectangle to select your desired area. The result then is rendered as variation with your defined pixel dimensions.

Share this post


Link to post
Share on other sites

@kunago, here a screenshot with the selections for a 1920x750 px variation and a mobile version of 960x750 px:

cai3-screenshot.thumb.jpg.58aacd54a387d61cfe1c9b3404f7e364.jpg

The live site of this example is https://www.die-wurzen-studie.de/ , where all of those fullwidth images (1920x750 px) have a mobile version of 960x750 px for the smaller screen resolutions.

  • Like 1

Share this post


Link to post
Share on other sites

That's great. I implemented it in the meantime. It was very easy, took no time at all. Great, seriously.

Just a side question - is there a way to translate the name of the crop preset?

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, kunago said:

Just a side question - is there a way to translate the name of the crop preset?

You mean for multilanguage usage?

Share this post


Link to post
Share on other sites

currently this is not supported, but I build a new version of the module and will try to include this, because it is a useful feature.

Share this post


Link to post
Share on other sites

@kunago, I think Croppable Image 3 is probably the best option for a lot of cases (e.g. you don't want the user to create a cropped image smaller than the given pixel dimensions), but inspired by your question I created this module:

 

  • Like 4

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...