{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/picture-perfect-cropping-with-hotspots/","result":{"data":{"post":{"id":"24d4d2f7-2f62-574b-a5bb-a49ab86533e3","publishedAt":"2017-11-12T23:00:00.000Z","categories":[],"mainImage":{"alt":"A road lined by palm trees leading into an uncertain future","crop":{"_key":null,"_type":"sanity.imageCrop","top":0.25825825825825854,"bottom":0.17417417417417402,"left":0,"right":0},"hotspot":{"_key":null,"_type":"sanity.imageHotspot","x":0.5,"y":0.5420420420420422,"height":0.5675675675675674,"width":1},"asset":{"_id":"image-435aa01d7549cdd3f234ca4ddb88ef5313abd0f5-6000x4000-jpg","metadata":{"lqip":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAcDBAb/xAAhEAACAQMEAwEAAAAAAAAAAAABAgMABAUHERIhBhNhMf/EABYBAQEBAAAAAAAAAAAAAAAAAAIBA//EABoRAAICAwAAAAAAAAAAAAAAAAABAiEDElH/2gAMAwEAAhEDEQA/ANjZakq0SFsZeIxPYIGwq++oNqwb1wyuw/QBScyWXuLf2yAluDbcSejUNvlHmlKCPgp76aosl2jV46pjhk85ti25Eg+bUUpEyUjjdkQn6KKe8eA0l0//2Q==","dimensions":{"aspectRatio":1.5,"width":6000,"height":4000}}}},"title":"Picture Perfect Cropping with Hotspots and features","slug":{"current":"picture-perfect-cropping-with-hotspots"},"_rawExcerpt":[{"_key":"20ef5fe1423f","_type":"block","children":[{"_key":"20ef5fe1423f0","_type":"span","marks":[],"text":"It's so nice to have just one version of an image, and just let Sanity.io handle the rest."}],"markDefs":[],"style":"normal"}],"_rawBody":[{"_key":"2b4b89948d1a","_type":"block","children":[{"_key":"2b4b89948d1a0","_type":"span","marks":[],"text":"I’m deciding how to crop an image for any aspect ratio using the Sanity’s hotspot and cropping feature. It’s for art direction for frontends. There's "},{"_key":"2b4b89948d1a1","_type":"span","marks":["17c2add6e2d3"],"text":"a post on CSS-tricks on how to do it"},{"_key":"2b4b89948d1a2","_type":"span","marks":[],"text":". You should totally check that out!"}],"markDefs":[{"_key":"17c2add6e2d3","_type":"link","href":"https://css-tricks.com/five-interesting-ways-to-use-sanity-io-for-image-art-direction/"}],"style":"normal"}],"authors":[{"_key":"165e03eb5ee5","author":{"image":{"crop":null,"hotspot":null,"asset":{"_id":"image-ea2ab7bb8793351740ff50e3943089369c420de6-1024x1024-png"}},"name":"An AI generated author"}}]}},"pageContext":{"id":"24d4d2f7-2f62-574b-a5bb-a49ab86533e3"}},"staticQueryHashes":["2817707602","2891822173"]}