How to get the Width/Height or dimensions of Uploaded Image with Sanity and Next.js to Prevent CLS

3 replies

Last updated: Aug 9, 2021

not sure if this is what you’re looking for, but this thread might help? https://stackoverflow.com/questions/58567054/how-can-i-validate-the-dimensions-of-an-uploaded-image-in-sanity

Aug 9, 2021, 5:56 PM

there’s a really nice regex + function combo there you can use to snip the dimensions from

asset._ref

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

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

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

Aug 9, 2021, 6:13 PM

there’s a really nice regex there you can use to snip the dimensions from

asset._ref

Aug 9, 2021, 6:13 PM

Have you also seen how it's done in https://github.com/bundlesandbatches/next-sanity-image

Aug 9, 2021, 6:48 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get Started Join our Slack

How to get the Width/Height or dimensions of Uploaded Image with Sanity and Next.js to Prevent CLS

Sanity.io – build remarkable experiences at scale

Categorized in