fix: reword warning about vector images not support crop/hotspot (#7960)

sanity-io · Dec 5, 2024 · eecd0c5 · eecd0c5
1 parent c06deef
commit eecd0c5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageToolInput/ImageToolInput.tsx
@@ -127,12 +127,12 @@ export function ImageToolInput(props: ImageToolInputProps) {
         <>
           <Card padding={3} marginY={3} tone="caution" radius={2}>
             <Stack space={4}>
-              <Text size={1}>{t('inputs.imagetool.svg-warning.title')}</Text>
-              <Details title={t('inputs.imagetool.svg-warning.expand-developer-info')}>
+              <Text size={1}>{t('inputs.imagetool.vector-warning.title')}</Text>
+              <Details title={t('inputs.imagetool.vector-warning.expand-developer-info')}>
                 <Text size={1}>
                   <Translate
                     t={t}
-                    i18nKey="inputs.imagetool.svg-warning.developer-info"
+                    i18nKey="inputs.imagetool.vector-warning.developer-info"
                     components={{
                       ImageUrlDocumentationLink: ({children}) => (
                         <a href="https://www.sanity.io/docs/image-urls#fm-048ba39d9e88">

diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -653,15 +653,15 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
     'Adjust the rectangle to crop image. Adjust the circle to specify the area that should always be visible.',
   /** Error: `{{errorMessage}}` */
   'inputs.imagetool.load-error': 'Error: {{errorMessage}}',
-  /** SVG images are not adjusted for hotspot and crop when served from the Sanity image. If you want the below hotspot and crop settings to apply, make sure to append `fp=jpg` to the image url, or call `format('jpg')` if using `@sanity/image-url` */
-  'inputs.imagetool.svg-warning.developer-info': `The Asset Pipeline does not support hotspot and crop for SVG as an output image format. To enable hotspot & crop, output this image to any of the supported bitmap formats. For example: <code>fm=jpg</code> to the <ImageUrlDocumentationLink>Image URL</ImageUrlDocumentationLink> or call <code>.format('png')</code> with <ImageUrlPackageDocumentationLink>@sanity/image-url</ImageUrlPackageDocumentationLink>.`,
-  /** See developer info */
-  'inputs.imagetool.svg-warning.expand-developer-info': 'See developer info',
-  /** Gotcha: Serving SVGs with hotspot and crop from the Sanity Image API */
-  'inputs.imagetool.svg-warning.title':
-    "Warning: Hotspot and crop might not be applied to this image where it's presented.",
   /** Hotspot & Crop */
   'inputs.imagetool.title': 'Hotspot & Crop',
+  /** Warnings displayed to developers when using the crop/hotspot tool on vector images, notifying them that crops/hotspot are not respected when serving the image in vector format. For the crop/hotspot to apply, images must be served in a raster format such as JPG or PNG, by appending eg `fm=jpg` to the image url, or calling `format('jpg')` if using `@sanity/image-url` */
+  'inputs.imagetool.vector-warning.developer-info': `The Asset Pipeline does not support hotspot and crop for vector formats. To enable hotspot & crop, output this image to any of the supported raster formats. For example: <code>fm=jpg</code> to the <ImageUrlDocumentationLink>image URL</ImageUrlDocumentationLink> or call <code>.format('png')</code> with <ImageUrlPackageDocumentationLink>@sanity/image-url</ImageUrlPackageDocumentationLink>.`,
+  /** See developer info */
+  'inputs.imagetool.vector-warning.expand-developer-info': 'See developer info',
+  /** Gotcha: Serving vector images with hotspot and crop from the Sanity Image API */
+  'inputs.imagetool.vector-warning.title':
+    "Warning: Hotspot and crop might not be applied to this image where it's presented.",
   /** Convert to `{{targetType}}` */
   'inputs.invalid-value.convert-button.text': 'Convert to {{targetType}}',
   /** The current value (<code>`{{actualType}}`</code>) */