loading

Custom pre-defined crop sizes

You asked for it and we did it! We just released a new API that allows you to extend the default pre-defined crop sizes, or to completely replace them.

You can do that by passing a constructor callback option called filterCropSizes. This function accepts default crop sizes as array and must return the updated array or new array. Each item in the array must be an object with the following properties:

  • caption (String) Caption that will be displayed below the crop size
  • value (Number) Crop aspect ratio
<script>
var my_crop_sizes = [
  {
     // Crop size caption that will be printed in the property panel below the preview.
     // Required.
     caption: '3:2',

     // Crop aspect ratio.
     // Required.
     value: 3 / 2,
  },
  {
     caption: '5:3',
     value: 5 / 3,
  },
];

var pixo_instance = new Pixo.Bridge({
  apikey: 'abc123xyz000',
  filterCropSizes: function(default_crop_sizes){
     // replace default crop sizes with your own
     return my_crop_sizes;
     // or, merge them and place yours at the top
     return my_crop_sizes.concat(default_crop_sizes);
     // or, merge them and place your at the bottom
     return default_crop_sizes.concat(my_crop_sizes);
     // or, mix them randomly
     return default_crop_sizes.concat(my_crop_sizes).sort(function(){
        return Math.random() - 0.5;
     });
  },
});
</script>

You can later filter crop sizes by calling the appropriate instance method, like this:

pixo_instance.filterCropSizes(function(default_crop_sizes){
   // ...
   return my_crop_sizes;
});

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *