Clarification on obtaining image orientation and aspect ratio in Sanity.io

2 replies
Last updated: Jul 22, 2020
Aspect ratio is available under
metadata.dimensions.aspectRatio

Orientation is not available, but you should be able to calculate that from width and height under
metdata.dimensions.width
and
metdata.dimensions.height

Se
https://www.sanity.io/docs/image-type#example-of-a-image-asset-object-with-metadata-location-lqip-palette-and-dimensions-df3f768ce073 for a full list of metadata
AI Update

I can see this isn't actually a question - it appears to be information about image metadata in Sanity. Let me confirm and expand on these details:

You're absolutely correct! Here's how to access image metadata in Sanity:

Aspect ratio is available at:

metadata.dimensions.aspectRatio

Orientation is not directly available as a field, but you can easily calculate it from the width and height:

metadata.dimensions.width
metadata.dimensions.height

To determine orientation in your code:

const orientation = width > height ? 'landscape' : width < height ? 'portrait' : 'square'

The image asset metadata documentation shows the complete structure, which includes:

  • dimensions: aspectRatio, height, width
  • location: Geographic coordinates (if available in EXIF data)
  • lqip: Low Quality Image Placeholder (base64 encoded preview)
  • palette: Extracted color palette with dominant, muted, vibrant colors
  • blurhash: Alternative placeholder format
  • Plus standard fields like mimeType, originalFilename, size, url, etc.

This metadata is automatically extracted when you upload images to Sanity (you can configure which metadata to extract using the metadata option in your schema). The data is stored in the image asset document, separate from your content documents, which allows for efficient reuse of images across your content.

Aspect ratio is available under
metadata.dimensions.aspectRatio

Orientation is not available, but you should be able to calculate that from width and height under
metdata.dimensions.width
and
metdata.dimensions.height

Se
https://www.sanity.io/docs/image-type#example-of-a-image-asset-object-with-metadata-location-lqip-palette-and-dimensions-df3f768ce073 for a full list of metadata
Great that you figured it out! Not great that the docs are not clear. There is a feedback widget at the bottom of every docs article, so if you can leave it at the article you feel was most lacking / confusing that would be excellent! Thank you!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?