Reference

Data Shape

Structure of data stored by cropImageField.

Each cropImageField stores a group with three sub-fields:

Single-size example

1{
2  heroImage: {
3    image: '64abc...',
4    cropData: {
5      desktop: { x: 5, y: 10, width: 90, height: 80 },
6      mobile:  { x: 20, y: 0, width: 60, height: 100 },
7    },
8    generatedUrls: {
9      desktop: '/media/photo-crop-desktop-5-10-90x80-1920x1080.webp',
10      mobile:  '/media/photo-crop-mobile-20-0-60x100-828x1035.webp',
11    },
12  }
13}

Multi-size example

1{
2  cardImage: {
3    image: '64abc...',
4    cropData: {
5      card: { x: 0, y: 12, width: 100, height: 75 },
6    },
7    generatedUrls: {
8      'card.lg': '/media/photo-crop-card-0-12-100x75-1200x675.webp',
9      'card.md': '/media/photo-crop-card-0-12-100x75-768x432.webp',
10      'card.sm': '/media/photo-crop-card-0-12-100x75-390x219.webp',
11    },
12  }
13}

Coordinates in cropData are percent-based (0–100), as produced by react-image-crop.