{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2017/11/picture-perfect-cropping-with-hotspots/","webpackCompilationHash":"b6354fba3f4b63fc5b16","result":{"data":{"post":{"id":"24d4d2f7-2f62-574b-a5bb-a49ab86533e3","publishedAt":"2017-11-12T23:00:00.000Z","categories":[{"_id":"da38ee48-4ccb-4632-aed4-fae6aeb77b8c","title":"Categorical advice"}],"mainImage":{"crop":{"_key":null,"_type":"sanity.imageCrop","top":0.1397538287436132,"bottom":0.2846206024412604,"left":0.3836549375709415,"right":0.030646992054483513},"hotspot":{"_key":null,"_type":"sanity.imageHotspot","x":0.7082860385925085,"y":0.4275666131511763,"height":0.5756255688151262,"width":0.522133938706016},"asset":{"_id":"image-cc93b69600f5cd1abce97fd0d4aa71793dbbba76-1350x900-png"},"alt":"A road lined by palm trees leading into an uncertain future"},"title":"Picture Perfect Cropping with Hotspots and stuff","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.f"}],"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":{"_key":null,"_type":"sanity.imageCrop","top":0,"bottom":0,"left":0,"right":0},"hotspot":{"_key":null,"_type":"sanity.imageHotspot","x":0.2399193548387093,"y":0.5667994558880687,"height":0.6417120093276327,"width":0.449596774193548},"asset":{"_id":"image-601ec1ad78c0c86575a82ef3a6f6442aa10a169a-1504x1000-png"}},"name":"My Name"}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"24d4d2f7-2f62-574b-a5bb-a49ab86533e3"}}}