{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2017/11/picture-perfect-cropping-with-hotspots/","webpackCompilationHash":"5b645ef16cfd12eb1bdb","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"},{"_key":"fcef67952000","_type":"mainImage","alt":"Test","asset":{"_id":"image-cc93b69600f5cd1abce97fd0d4aa71793dbbba76-1350x900-png","_type":"sanity.imageAsset","_createdAt":"2020-05-03T07:27:33Z","_rev":"QYbhiZlpxPxYyzkrY3pqH9","_updatedAt":"2020-05-03T07:27:33Z","assetId":"cc93b69600f5cd1abce97fd0d4aa71793dbbba76","extension":"png","metadata":{"_type":"sanity.imageMetadata","dimensions":{"_type":"sanity.imageDimensions","aspectRatio":1.5,"height":900,"width":1350},"hasAlpha":true,"isOpaque":true,"lqip":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAADsElEQVQ4yx3Qf0zUdRzH8fujuwMu5AQNK3PUtDYQZzbXpKUMMAURBAPPQNI5ncjviWCiMAaJI4W6g3PUtNCCygKBO34cpCE/jvN+0MH94O4QkWDT6aQ5f4Bgz77rj8fe789n+7zen71Fv2itXG230tRhQdM9Qlevk+v9Lvr0boYMHkxGD3+Zx7ENjzNmHccz6uGOzc2U3cWMfYx7DgcPHDYeOa3847Qg0nRbaO8x09Vt4PqfZvoHRzEY7FhMDkYsDhzDTjxWJxOjTqZsDmYcdu47bTwcG2XWZeWxa5gnLhPP3Abm3HpEN3v1DPTpGeofxKwfYsRoxGk24Rk2MWk1MT1q4p7NxEOHkVnnLSHAwFP3EM89g8x7+lnw3GRx/AaLnj9YcOkQWXp1WPt02Ad0uId03DHomDbquG/W8Wi4i8fWLp6OdDJn6+CFvZ0FZzuLY1pejmn4d6xVcE3QxEvnb7yw/YpopPMKju4GPNcbmbzRyExvIw/6GpkdaOCJvoG5oZ+YN/zInOEyzw0/8NxYzzOT0P+vXjh/z5zxEvPG75i/VYdIf6UM48/VWK7WYv29FnuTGneLmtttau5q1PytreWuYLJNxUSrktuaGjxaNeOCCW0Nk1oVU+3fMN1RLahCdK1iD82Vh2j+6ijN5zJoOZ+JpjqHdmUeOlUuXao8tF/nC44LdydoU56iRVlCq6oETU0xnbUn6VEX0nOhgE6hipSHg7mQHkpdZijqjLXUHBVq1vtczPuAy/kbqT8WRl1OOLXZUahzt6PKjaUqK4GzGcmUHVVQlp4o9NGcy4qiMicSUUF8AOV75JxR+FGY4EfuTjmnk5Zyfl8Ayv2BgreoSguiIuUdvkxZTUXqGkoV75ETtw5F1Abit6xjd/i7pGxdReq2FYhOJfhQnuzF6UQv0rfK2LfZl0NRS8iLlVMYv4yihECKE5ZTFLeMk/HLKU8K4IwgOzqQ6I1vsjF4JR+GrOSj0EA2hcgRVe8V8+3nEi7tl6BSSDgR7cXBcBmpW3w5EOlHVnQAx3b4k79jqRAo56zCl6pUGUW75Xy2eSmR6/0JC1nB+jVvEBz0mhCYJOZimoSGgxKuHBBT+amEI1He7A7zYdcmGWkRco5sk5O+3Zf8eBklyd4U7/HmVJIPBXE+HI7wJmaDL2vflhP0uj+isphXqNgppiRWTFmihNJdUrI/8RF+KCP5Yxn7I17lQISwighhJTuk5MVLyYyRcjxOSqkw/Avh3d4wMSGrxAQskfIfaLuqNTd+aPQAAAAASUVORK5CYII=","palette":{"_type":"sanity.imagePalette","darkMuted":{"_type":"sanity.imagePaletteSwatch","background":"#3d3029","foreground":"#fff","population":2.46,"title":"#fff"},"darkVibrant":{"_type":"sanity.imagePaletteSwatch","background":"#885b10","foreground":"#fff","population":7.02,"title":"#fff"},"dominant":{"_type":"sanity.imagePaletteSwatch","background":"#885b10","foreground":"#fff","population":7.02,"title":"#fff"},"lightMuted":{"_type":"sanity.imagePaletteSwatch","background":"#adb7d1","foreground":"#000","population":2.5,"title":"#fff"},"lightVibrant":{"_type":"sanity.imagePaletteSwatch","background":"#f9c191","foreground":"#000","population":1.56,"title":"#000"},"muted":{"_type":"sanity.imagePaletteSwatch","background":"#9d7b5e","foreground":"#fff","population":4.7,"title":"#fff"},"vibrant":{"_type":"sanity.imagePaletteSwatch","background":"#dd8316","foreground":"#fff","population":2.11,"title":"#fff"}}},"mimeType":"image/png","originalFilename":"image.png","path":"images/b091wl28/production/cc93b69600f5cd1abce97fd0d4aa71793dbbba76-1350x900.png","sha1hash":"cc93b69600f5cd1abce97fd0d4aa71793dbbba76","size":1679797,"uploadId":"Z3Q64qJxIPwyFryIFgS931aTI7XoP3aM","url":"https://cdn.sanity.io/images/b091wl28/production/cc93b69600f5cd1abce97fd0d4aa71793dbbba76-1350x900.png","_rawMetadata":{"_type":"sanity.imageMetadata","dimensions":{"_type":"sanity.imageDimensions","aspectRatio":1.5,"height":900,"width":1350},"hasAlpha":true,"isOpaque":true,"lqip":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAADsElEQVQ4yx3Qf0zUdRzH8fujuwMu5AQNK3PUtDYQZzbXpKUMMAURBAPPQNI5ncjviWCiMAaJI4W6g3PUtNCCygKBO34cpCE/jvN+0MH94O4QkWDT6aQ5f4Bgz77rj8fe789n+7zen71Fv2itXG230tRhQdM9Qlevk+v9Lvr0boYMHkxGD3+Zx7ENjzNmHccz6uGOzc2U3cWMfYx7DgcPHDYeOa3847Qg0nRbaO8x09Vt4PqfZvoHRzEY7FhMDkYsDhzDTjxWJxOjTqZsDmYcdu47bTwcG2XWZeWxa5gnLhPP3Abm3HpEN3v1DPTpGeofxKwfYsRoxGk24Rk2MWk1MT1q4p7NxEOHkVnnLSHAwFP3EM89g8x7+lnw3GRx/AaLnj9YcOkQWXp1WPt02Ad0uId03DHomDbquG/W8Wi4i8fWLp6OdDJn6+CFvZ0FZzuLY1pejmn4d6xVcE3QxEvnb7yw/YpopPMKju4GPNcbmbzRyExvIw/6GpkdaOCJvoG5oZ+YN/zInOEyzw0/8NxYzzOT0P+vXjh/z5zxEvPG75i/VYdIf6UM48/VWK7WYv29FnuTGneLmtttau5q1PytreWuYLJNxUSrktuaGjxaNeOCCW0Nk1oVU+3fMN1RLahCdK1iD82Vh2j+6ijN5zJoOZ+JpjqHdmUeOlUuXao8tF/nC44LdydoU56iRVlCq6oETU0xnbUn6VEX0nOhgE6hipSHg7mQHkpdZijqjLXUHBVq1vtczPuAy/kbqT8WRl1OOLXZUahzt6PKjaUqK4GzGcmUHVVQlp4o9NGcy4qiMicSUUF8AOV75JxR+FGY4EfuTjmnk5Zyfl8Ayv2BgreoSguiIuUdvkxZTUXqGkoV75ETtw5F1Abit6xjd/i7pGxdReq2FYhOJfhQnuzF6UQv0rfK2LfZl0NRS8iLlVMYv4yihECKE5ZTFLeMk/HLKU8K4IwgOzqQ6I1vsjF4JR+GrOSj0EA2hcgRVe8V8+3nEi7tl6BSSDgR7cXBcBmpW3w5EOlHVnQAx3b4k79jqRAo56zCl6pUGUW75Xy2eSmR6/0JC1nB+jVvEBz0mhCYJOZimoSGgxKuHBBT+amEI1He7A7zYdcmGWkRco5sk5O+3Zf8eBklyd4U7/HmVJIPBXE+HI7wJmaDL2vflhP0uj+isphXqNgppiRWTFmihNJdUrI/8RF+KCP5Yxn7I17lQISwighhJTuk5MVLyYyRcjxOSqkw/Avh3d4wMSGrxAQskfIfaLuqNTd+aPQAAAAASUVORK5CYII=","palette":{"_type":"sanity.imagePalette","darkMuted":{"_type":"sanity.imagePaletteSwatch","background":"#3d3029","foreground":"#fff","population":2.46,"title":"#fff"},"darkVibrant":{"_type":"sanity.imagePaletteSwatch","background":"#885b10","foreground":"#fff","population":7.02,"title":"#fff"},"dominant":{"_type":"sanity.imagePaletteSwatch","background":"#885b10","foreground":"#fff","population":7.02,"title":"#fff"},"lightMuted":{"_type":"sanity.imagePaletteSwatch","background":"#adb7d1","foreground":"#000","population":2.5,"title":"#fff"},"lightVibrant":{"_type":"sanity.imagePaletteSwatch","background":"#f9c191","foreground":"#000","population":1.56,"title":"#000"},"muted":{"_type":"sanity.imagePaletteSwatch","background":"#9d7b5e","foreground":"#fff","population":4.7,"title":"#fff"},"vibrant":{"_type":"sanity.imagePaletteSwatch","background":"#dd8316","foreground":"#fff","population":2.11,"title":"#fff"}}},"id":"562f54cf-08a1-52be-a58a-1f06d4dac8db","parent":null,"children":[],"internal":{"type":"SanityImageAsset","contentDigest":"f5e965489a62ae9dee042557025f0b78","counter":35,"owner":"gatsby-source-sanity"}},"crop":{"_type":"sanity.imageCrop","bottom":0.02222617354196299,"left":0,"right":0.014802631578947345,"top":0},"hotspot":{"_type":"sanity.imageHotspot","height":0.6740161213845426,"width":0.7500000000000011,"x":0.5,"y":0.5}}],"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"}}}