Get a peek at our latest innovations at Sanity Product Day on Dec 8th β†’

How to Set Aspect Ratios on Images?

5 replies
Last updated: Sep 7, 2020

Hey, quick one - is there anyway I can get info about the dimensions of image that are being uploaded? Want to use them to set some aspect ratio styling. Thanks!

Sep 7, 2020, 5:03 PM

Hey Callum, that information is stored in the image asset object under

metadata.dimensions
. You can query it like this for example:
*[_type == "post"] {
  _id,
  "image":image.asset->
  {
    "dimensions": metadata.dimensions
  }
}

Sep 7, 2020, 5:08 PM

Great thank you! My images are somewhat more nested than that but will see if I can get it to work

Sep 7, 2020, 6:24 PM

Let me know if you need any help navigating the nesting πŸ™‚

Sep 7, 2020, 6:42 PM

Got there in the end just took a bit of groq revision πŸ˜… – thanks again!

Sep 7, 2020, 7:14 PM

Awesome - and we approve of groq revisions πŸ€“

Sep 7, 2020, 7:17 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Free to get started, and pay-as-you-go on all plans. Find out more.