How the image cropping works
When a build is triggered, xStatic copies all media from the selected media folders over to the temporary folder that will be deployed to Netlify. This means that by default all images on the remote server will be full resolution, no matter if cropped URLs are used.
To allow for some image cropping functionality you can define which crops you'd like to deploy as well as the full size image. When xStatic copies over the media, it will also crop images in each of the defined sizes, and rename the file to include this crop information.
When the pages are generated, there is a transformer that takes crop URLs and replaces them with the file names mentioned above.
Configuring image crops
- Select the site that you want to define crops for in the dashboard and go to the edit page.
- In the 'Image Crops' field add a comma separated list of crops that should be generated. The format of each crop should be in the format {width}x{height}. If you are only cropping based on one dimension, use 0 rather than leaving blank.
- In your cshtml views, just use the GetCropUrl methods as usual, and just make sure that the dimensions match what you have set up in xStatic.
