Accept Image based on resolution in image component

[M1064615]

Hi, 
In the image component when we select a image in dialog box, Is it possible to accept image only if its is having a specific resolution Ex:(1800 x 1200, 2272 x 1704, 3072 x 2304 ) or can we set any minimum resolution for image in image component, so that any image selected below minimum resolution should not be allowed.

[MayurSatav · Accepted solution]

Hi @M1064615 ,

There is no OOTB feature to restrict the image selection based on specific resolutions for the image component. However, you can achieve this functionality by implementing a custom validation logic in /libs/core/wcm/components/image/v2/image/clientlibs/editor/js/image.js the core image component's dialog core/wcm/components/image/v2/image.

$imageField.on("change", function () {
      var file = this.files[0];
      var image = new Image();

      image.onload = function () {
        var width = this.width;
        var height = this.height;

        if (width < MIN_WIDTH || height < MIN_HEIGHT) {
          // Display an error message to the author
          alert("Please select an image with a minimum resolution of " + MIN_WIDTH + "x" + MIN_HEIGHT + " pixels.");
          
          // Reset the selected image field
          $imageField.val("");
        }
      };

[M1064615]

Hi MayurSatav,
Need clarification on below points.

1. Path is /libs/core/wcm/components/image/v2/image/clientlibs/editor/js/image.js or it is /apps/core/wcm/components/image/v2/image/clientlibs/editor/js/image.js
2. $imageField is to be declared?
3. what value need to be assigned for $imageField ?
4. Var file is declared but not utilised further.