[{"_path":"/providers/prismic","_draft":false,"_partial":false,"_empty":false,"title":"Prismic","description":"Nuxt Image has first class integration with Prismic","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://prismic.io/docs","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Prismic"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"No specific configuration is required for Prismic support. You just need to specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider: 'prismic'"}]},{"type":"text","value":" in your configuration to make it the default:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    prismic: {}\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    prismic: {}\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also pass it directly to your component when you need it, for example:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img provider=\"prismic\" src=\"...\" />\n","filename":"*.vue","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<nuxt-img provider=\"prismic\" src=\"...\" />\n"}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prismic allows content writer to manipulate images through its UI (cropping, rezising, etc.). To preserve that behavior this provider does not strip query parameters coming from Prismic. Instead it only overrides them when needed, keeping developers in control."}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://prismic.io/docs","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Prismic"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"No specific configuration is required for Prismic support. You just need to specify "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"provider: 'prismic'"}]},{"type":"text","value":" in your configuration to make it the default:"}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    prismic: {}\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8f4aa7"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8f4aa7"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-03fa9a"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-03fa9a"},"children":[{"type":"text","value":"prismic"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":": {}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also pass it directly to your component when you need it, for example:"}]},{"type":"element","tag":"code","props":{"code":"<nuxt-img provider=\"prismic\" src=\"...\" />\n","filename":"*.vue","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-03fa9a"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72e345"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80ac31"},"children":[{"type":"text","value":"\"prismic\""}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72e345"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-80ac31"},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"class":"ct-f0112b"},"children":[{"type":"text","value":" />"}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prismic allows content writer to manipulate images through its UI (cropping, rezising, etc.). To preserve that behavior this provider does not strip query parameters coming from Prismic. Instead it only overrides them when needed, keeping developers in control."}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-80ac31{color:#98C379}.ct-72e345{color:#D19A66}.ct-03fa9a{color:#E06C75}.ct-f0112b{color:#ABB2BF}.ct-8f4aa7{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:4.providers:prismic.md","_source":"content","_file":"4.providers/prismic.md","_extension":"md"},{"_path":"/providers/storyblok","_draft":false,"_partial":false,"_empty":false,"title":"Storyblok","description":"Nuxt Image internally use Storyblok as static provider","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok"}]},{"type":"text","value":" and the image module. To use this provider you just need to specify the base url of your service in Storyblok."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    storyblok: {\n      baseURL: 'https://a.storyblok.com'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default {\n  image: {\n    storyblok: {\n      baseURL: 'https://a.storyblok.com'\n    }\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"storyblok-modifiers"},"children":[{"type":"text","value":"Storyblok modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I am following all modifiers present on "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok image service"}]}]},{"type":"element","tag":"h3","props":{"id":"resizing"},"children":[{"type":"text","value":"Resizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#resizing","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"the logic is:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you not defining the width or height it's taking the original image size."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you defined only the width or height it will resize proportionaly based ont he one defined"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<div>Original</div>\n<NuxtImg\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Resized static</div>\n<NuxtImg\n  width=\"500\"\n  height=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Proportional to Width</div>\n<NuxtImg\n  width=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Proportional to Height</div>\n<NuxtImg\n  height=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<div>Original</div>\n<NuxtImg\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Resized static</div>\n<NuxtImg\n  width=\"500\"\n  height=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Proportional to Width</div>\n<NuxtImg\n  width=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Proportional to Height</div>\n<NuxtImg\n  height=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit-in-with-background-or-not"},"children":[{"type":"text","value":"Fit in with background or not"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#fit-in","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to use it just add a props "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit=\"in\""}]},{"type":"text","value":". Take care that storyblok only support "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit-in"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also use the fill filters to fill your fit-in with a specific background. If you not defining value it will be transparent."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<div>Fit in with background CCCCCC</div>\n<NuxtImg\n  width=\"200\"\n  height=\"200\"\n  fit=\"in\"\n  :modifiers=\"{ filters: { fill: 'CCCCCC' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<div>Fit in with background CCCCCC</div>\n<NuxtImg\n  width=\"200\"\n  height=\"200\"\n  fit=\"in\"\n  :modifiers=\"{ filters: { fill: 'CCCCCC' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"text","value":"Format"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#changing-the-format","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can modify your image format. Supported format are "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<h3>Format</h3>\n<NuxtImg\n  width=\"200\"\n  format=\"webp\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<h3>Format</h3>\n<NuxtImg\n  width=\"200\"\n  format=\"webp\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"text","value":"Quality"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#quality-optimization","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can update your image quality by defining the quality filters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":" <div class=\"flex\">\n<div>Resized and 10% Quality</div>\n<NuxtImg\n  provider=\"storyblok\"\n  width=\"200\"\n  quality=\"10\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n</div>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" <div class=\"flex\">\n<div>Resized and 10% Quality</div>\n<NuxtImg\n  provider=\"storyblok\"\n  width=\"200\"\n  quality=\"10\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n</div>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"facial-detection"},"children":[{"type":"text","value":"Facial detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#facial-detection-and-smart-cropping","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To have a smart crop just define a smart property inside modifier."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<h3>Facial detection</h3>\n\n<div>Resized without Smart Crop</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\"\n/>\n\n<div>Resized with Smart Crop</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ smart: true }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<h3>Facial detection</h3>\n\n<div>Resized without Smart Crop</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\"\n/>\n\n<div>Resized with Smart Crop</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ smart: true }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\"\n/>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"custom-focal-point"},"children":[{"type":"text","value":"Custom focal point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#custom-focal-point","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Storyblok offer you the focalize on a specific part of your image. Just use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focal"}]},{"type":"text","value":" filters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<div>Focus on the bottom of the image</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ filters: { focal: '450x500:550x600' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\"\n/>\n\n<div>Focus on the top of the image</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ filters: { focal: '450x0:550x100' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<div>Focus on the bottom of the image</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ filters: { focal: '450x500:550x600' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\"\n/>\n\n<div>Focus on the top of the image</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ filters: { focal: '450x0:550x100' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\"\n/>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok"}]},{"type":"text","value":" and the image module. To use this provider you just need to specify the base url of your service in Storyblok."}]},{"type":"element","tag":"code","props":{"code":"export default {\n  image: {\n    storyblok: {\n      baseURL: 'https://a.storyblok.com'\n    }\n  }\n}\n","filename":"nuxt.config.js","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-728e4a"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-728e4a"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"storyblok"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"'https://a.storyblok.com'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"storyblok-modifiers"},"children":[{"type":"text","value":"Storyblok modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I am following all modifiers present on "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok image service"}]}]},{"type":"element","tag":"h3","props":{"id":"resizing"},"children":[{"type":"text","value":"Resizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#resizing","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"the logic is:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you not defining the width or height it's taking the original image size."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you defined only the width or height it will resize proportionaly based ont he one defined"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<div>Original</div>\n<NuxtImg\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Resized static</div>\n<NuxtImg\n  width=\"500\"\n  height=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Proportional to Width</div>\n<NuxtImg\n  width=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n\n<div>Proportional to Height</div>\n<NuxtImg\n  height=\"500\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Original</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Resized static</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Proportional to Width</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Proportional to Height</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"500\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"fit-in-with-background-or-not"},"children":[{"type":"text","value":"Fit in with background or not"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#fit-in","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to use it just add a props "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit=\"in\""}]},{"type":"text","value":". Take care that storyblok only support "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit-in"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also use the fill filters to fill your fit-in with a specific background. If you not defining value it will be transparent."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<div>Fit in with background CCCCCC</div>\n<NuxtImg\n  width=\"200\"\n  height=\"200\"\n  fit=\"in\"\n  :modifiers=\"{ filters: { fill: 'CCCCCC' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Fit in with background CCCCCC</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"in\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"{ filters: { fill: 'CCCCCC' } }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"text","value":"Format"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#changing-the-format","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can modify your image format. Supported format are "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"webp"}]},{"type":"text","value":", "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<h3>Format</h3>\n<NuxtImg\n  width=\"200\"\n  format=\"webp\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Format</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"webp\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"text","value":"Quality"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#quality-optimization","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can update your image quality by defining the quality filters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":" <div class=\"flex\">\n<div>Resized and 10% Quality</div>\n<NuxtImg\n  provider=\"storyblok\"\n  width=\"200\"\n  quality=\"10\"\n  src=\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\"\n/>\n</div>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"flex\""}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Resized and 10% Quality</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"200\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"10\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"facial-detection"},"children":[{"type":"text","value":"Facial detection"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#facial-detection-and-smart-cropping","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To have a smart crop just define a smart property inside modifier."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<h3>Facial detection</h3>\n\n<div>Resized without Smart Crop</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\"\n/>\n\n<div>Resized with Smart Crop</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ smart: true }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Facial detection</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Resized without Smart Crop</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"600\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"130\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Resized with Smart Crop</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"600\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"130\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"{ smart: true }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"custom-focal-point"},"children":[{"type":"text","value":"Custom focal point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check "},{"type":"element","tag":"a","props":{"href":"https://www.storyblok.com/docs/image-service#custom-focal-point","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Storyblok documentation"}]},{"type":"text","value":" if you want to know more."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Storyblok offer you the focalize on a specific part of your image. Just use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focal"}]},{"type":"text","value":" filters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"<div>Focus on the bottom of the image</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ filters: { focal: '450x500:550x600' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\"\n/>\n\n<div>Focus on the top of the image</div>\n<NuxtImg\n  width=\"600\"\n  height=\"130\"\n  :modifiers=\"{ filters: { focal: '450x0:550x100' } }\"\n  provider=\"storyblok\"\n  src=\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\"\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Focus on the bottom of the image</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"600\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"130\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"{ filters: { focal: '450x500:550x600' } }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">Focus on the top of the image</"}]},{"type":"element","tag":"span","props":{"class":"ct-9da7a3"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6046b8"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"600\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"130\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"{ filters: { focal: '450x0:550x100' } }\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"storyblok\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-23c66b"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ce612a"},"children":[{"type":"text","value":"\"https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-587f14"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-23c66b{color:#D19A66}.ct-6046b8{color:#FFFFFF}.ct-ce612a{color:#98C379}.ct-9da7a3{color:#E06C75}.ct-587f14{color:#ABB2BF}.ct-728e4a{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"storyblok-modifiers","depth":2,"text":"Storyblok modifiers","children":[{"id":"resizing","depth":3,"text":"Resizing"},{"id":"fit-in-with-background-or-not","depth":3,"text":"Fit in with background or not"},{"id":"format","depth":3,"text":"Format"},{"id":"quality","depth":3,"text":"Quality"},{"id":"facial-detection","depth":3,"text":"Facial detection"},{"id":"custom-focal-point","depth":3,"text":"Custom focal point"}]}]}},"_type":"markdown","_id":"content:4.providers:storyblok.md","_source":"content","_file":"4.providers/storyblok.md","_extension":"md"}]