Как я могу проверить размеры загруженного изображения в Sanity?

У меня есть поле типа image в Sanity (docs), и мне нужно убедиться, что размеры находятся в определенном диапазоне, чтобы не нарушить работу веб-сайта, на котором они работают. Sanity предлагает проверки, но тип изображения имеет только «обязательные» и «настраиваемые» правила, а информация поля, передаваемая в настраиваемый валидатор, не включает метаданные изображения.

Как я могу обойти это ограничение и предложить проверку размеров в CMS?


validation sanity
person coreyward    schedule 26.10.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Хотя Sanity не передает метаданные изображения в средство проверки, вы можете извлечь информацию о формате и размерах изображения из предоставленного идентификатора актива. Согласно этой документации, это поддерживаемый и стабильный способ доступа к этой информации без загрузки. объект изображения из Sanity.

Например, вот первый аргумент, переданный валидатору Rule.custom:

{
  "_type": "image",
  "alt": "Example Image",
  "asset": {
    "_ref": "image-bff149a0b87f5b0e00d9dd364e9ddaa0-700x650-jpg",
    "_type": "reference"
  }
}

Добраться до размеров изображения можно так:

{
  title: "My Image",
  name: "image",
  type: "image",
  options: {
    accept: "image/*",
  },
  validation: Rule => Rule.custom(image => {
    if (!image) return true
    const { dimensions } = decodeAssetId(image.asset._ref)
    return dimensions.width >= 500 || "Image must be wider"
  }
}

const pattern = /^image-([a-f\d]+)-(\d+x\d+)-(\w+)$/

const decodeAssetId = id => {
  const [, assetId, dimensions, format] = pattern.exec(id)
  const [width, height] = dimensions.split("x").map(v => parseInt(v, 10))

  return {
    assetId,
    dimensions: { width, height },
    format,
  }
}

Я также включил эту функцию в библиотеку sanity-pills, которая упрощает выполнение этого :

import { createImageField } from "sanity-pills"

createImageField({
  name: "image",
  validations: {
    required: true,
    minWidth: 500,
    maxHeight: 9000
  },
})
person coreyward    schedule 26.10.2019