[Feature] Support for "auto_pad" crop mode

[cod3blox]

It appears that the auto_pad crop mode is currently not implemented or not functioning as expected.

According to the Cloudinary documentation, the auto_pad mode requires the g_auto (gravity) qualifier, along with two of the following: h_ (height), w_ (width), or ar_ (aspect_ratio).

Consider the following example:

import { getCldImageUrl } from 'next-cloudinary';
 
const url = getCldImageUrl({
  width: 960,
  aspectRatio: '16:9',
  crop: 'auto_pad',
  gravity: 'auto',  
  src: '<Public ID>'
});

The generated URL from getCldImageUrl is missing the gravity and aspect_ratio parameters.
Additionally, the console outputs the following warning:

Auto gravity can only be used with crop modes: auto, crop, fill, lfill, fill_pad, thumb. Not applying gravity.

Support for the auto_pad mode would be highly desirable, as it is particularly useful for use cases like product images where maintaining multiple aspect ratios without cropping the subject is important.

[dharamghevariya]

Hey @cod3blox,
I would like to work on this issue. I've located the root cause in the cloudinary-util repository where @eportis-cloudinary has already opened the corresponding issue.

I can see that the issue is in the CroppingPlugin where auto_pad isn't added as a crop mode for transformations, which is why the gravity and aspect ratio parameters aren't being applied correctly.

Could you please assign this issue to me?

Thank you!

[cod3blox]

Hey @dharamghevariya,
I’m glad to hear that you’d like to work on this. Even though I would love to assign the issue to you, I’m not able to do so since I’m not an active member of the project and don’t have the permissions required for assignments.

[devpatocld]

@cod3blox @dharamghevariya We are not assigning PR, but please feel welcome to submit a @dharamghevariya PR :)

[cod3blox]

@devpatocld thank you very much.
@dharamghevariya when you look into this, please note that the "pad" function also has some issues.

In my image component, I currently have some rather messy string operations happening after getCldImageUrl, just to make these modes work together with aspectRatio as a temporary fix.

    if (crop === 'auto_pad' && aspectRatio) {
      return url.replace('c_auto_pad', 'c_auto_pad,g_auto,ar_' + aspectRatio)
    }
    if (crop === 'pad' && aspectRatio) {
      return url.replace('c_pad', 'c_pad,ar_' + aspectRatio)
    }

In my use cases, I often receive a given width together with a target aspectRatio, which I need to pass through.

[eportis-cloudinary]

Thanks to @dharamghevariya’s fix in cloudinary-util, I believe the primary thing we need to do now is bump the version number in package.json to pull in the newly released version of that library.

@anurag2787 Thank you for the PR which does some additional checking about the interaction with g_auto. I need to think a little bit about where those checks should happen and if they're duplicative of checks we're already doing in cloudinary-util. However I'm almost certian we'll be able to accept your tests at the very least (thank you for those, and for the PR!).

[eportis-cloudinary]

Two notes after a night's sleep on this:

1. I released a new version of cloudinary-util/util, not cloudinary-util/url-loader, oops. Will rectify shortly...
2. We can currently only merge any PR that fixes this in next-cloudinary on the beta branch, which uses url-loader v6. The current stable version of next-cloudinary uses url-loader v5, which doesn't (and won't) get @dharamghevariya’s update.