\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":"Focus on the bottom of the image
\n\n\nFocus on the top of the image
\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Focus on the bottom of the image
\n\n\nFocus on the top of the image
\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":"Original
\n\n\nResized static
\n\n\nProportional to Width
\n\n\nProportional to Height
\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":"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":"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":"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":"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":"Fit in with background CCCCCC
\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":"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":"Format
\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":"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":" \n
Resized and 10% Quality
\n
\nFacial detection
\n\nResized without Smart Crop
\n\n\nResized with Smart Crop
\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":"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":"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":"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":"Focus on the bottom of the image
\n\n\nFocus on the top of the image
\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":"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":"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"},{"_path":"/providers/twicpics","_draft":false,"_partial":false,"_empty":false,"title":"Twicpics","description":"Nuxt Image internally use Twicpics 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.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Twicpics"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"h2","props":{"id":"what-is-twicpics"},"children":[{"type":"text","value":"What is TwicPics?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Twicpics"}]},{"type":"text","value":" is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image generation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the TwicPics Provider you can, out of the box, benefit from at least :"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"performance of our network: global CDN, optimized protocols and competitive caching"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ideal compression: modern technology and Next-Gen formats (TwicPics delivers "},{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/WebP","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"WebP"}]}]},{"type":"text","value":" natively for accounting browsers and can also delivers "},{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/AVIF","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And using the TwicPics API, you will be able to access all these features: "},{"type":"element","tag":"a","props":{"href":"#focus"},"children":[{"type":"text","value":"smart cropping with TwicPics focus auto"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#truecolor"},"children":[{"type":"text","value":"true color"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#flip"},"children":[{"type":"text","value":"flip"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#turn"},"children":[{"type":"text","value":"turn"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#crop"},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#zoom"},"children":[{"type":"text","value":"zoom"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"requirement"},"children":[{"type":"text","value":"Requirement"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The only requirement is to have a TwicPics account.\nIf you don't already have one, you can easily "},{"type":"element","tag":"a","props":{"href":"https://account.twicpics.com/signup/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"create your own TwicPics account for free"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"setup"},"children":[{"type":"text","value":"Setup"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You just need to configure the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" provider with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]},{"type":"text","value":" set to your TwicPics "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/getting-started/subdomain/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Domain"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n twicpics: {\n baseURL: \"https:///\"\n // Feel free to use our demo domain to try the following examples.\n // baseUrl: 'https://demo.twic.pics/'\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 twicpics: {\n baseURL: \"https:///\"\n // Feel free to use our demo domain to try the following examples.\n // baseUrl: 'https://demo.twic.pics/'\n }\n }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"standard-properties"},"children":[{"type":"text","value":"Standard properties"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics Provider complies with the documentation of "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/components/nuxt-img","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/components/nuxt-picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt-picture"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" determines how the image is resized in relation to the parameters "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics Provider supports all the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit='__cover__'"}]},{"type":"text","value":" (default value)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your master image cropped to 300x300 while preserving aspect ratio."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your master image resized to 300x300 with distortion."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will bring your image back to a 300x600 area with respect to the ratio (1:1) using letterboxing."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The letterboxing strips are transparent areas. Feel free to select the color of your choice by using the "},{"type":"element","tag":"a","props":{"href":"#background"},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" property."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"format"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specifies the output format. It can be an image format or a preview format. By default, "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" will \"guess\" the best output format for the requesting browser, but you can use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" to change this behavior."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format='avif'|'heif'|'jpeg'|'png'|__'webp'__"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/WebP","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WebP"}]},{"type":"text","value":" is the default format provided by "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" (if the browser supports it)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your image in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]},{"type":"text","value":" format."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a blurry preview of your image in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"text","value":" format."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#output","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about format here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specifies the output quality as a number between 1 (poor quality) and 100 (best quality)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality="}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#number","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"number"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" considers "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":"=70 as default value."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":": TwicPics automatically manages the returned quality according to the network performance for an optimized display speed even in difficult conditions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":" : when Data Saver is activated (android mobile only), default "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":"=10."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=quality#truecolor","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about quality here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"background"},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" specifies a color that will show through transparent and translucent parts of the image. This will have no effect on images with no transparency nor translucency."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background="}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#color","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"color"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#background","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about background here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"twicpics-modifiers"},"children":[{"type":"text","value":"TwicPics modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the standard parameters, the specific features of the TwicPics API are accessible via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-picture"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"A complete list of these features and their uses is accessible here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"crop"},"children":[{"type":"text","value":"crop"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" will extract a zone from the image which size is the given "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" size. If no coordinates are given, the focus point will be used as a guide to determine where to start the extraction. If coordinates are given, they will be used to determine the top-left pixel from which to start the extraction and the focus point will be reset to the center of the resulting image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ crop: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#crop-size","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"size"}]}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#coordinates","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@coordinates"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n/>\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n/>\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#crop","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"flip"},"children":[{"type":"text","value":"flip"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"flip"}]},{"type":"text","value":" will invert the image horizontally, vertically or both depending on the expression provided."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ flip: 'both'|'x'|'y' }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n/>\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n/>\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#flip","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"flip"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"focus"},"children":[{"type":"text","value":"focus"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" will set the focus point coordinates. It doesn't modify the output image in any way but will change the behavior of further transformations that take the focus point into account (namely cover, crop and resize)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":" is used in place of actual coordinates, the focus point will be chosen automagically for you!"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ focus: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#crop-coordinates","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"coordinates"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"|'auto' }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n\n/>\n\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n\n/>\n\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":" : focus must be placed before the transformations modifying the output image (namely cover, crop and resize)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#focus","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"truecolor"},"children":[{"type":"text","value":"truecolor"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"truecolor"}]},{"type":"text","value":" can be used to prevent color quantization. If no boolean is provided, true is assumed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, quantization is allowed (truecolor=false)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Quantization occurs whenever the output format is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use truecolor if you want to distribute substantially larger but more accurate images with translucency to users on browsers with no "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"WebP"}]},{"type":"text","value":" support or when "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"png"}]},{"type":"text","value":" is required as output format."}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#truecolor","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"truecolor"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"turn"},"children":[{"type":"text","value":"turn"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"turn"}]},{"type":"text","value":" will change the orientation of the image. It accepts an angle in degrees or an expression. Angles will be rounded to the closest multiple of 90°."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ turn: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#number","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"|'flip'|'left'|'right' }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n\n/>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n\n/>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#turn","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"turn"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"zoom"},"children":[{"type":"text","value":"zoom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Zooms into the image by a factor equal or superior to 1 towards the focus point while preserving the image size."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ zoom: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#number","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n\n/>\n\n\n/>\n\n\n/>\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n/>\n\n\n/>\n\n\n/>\n\n\n/>\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#zoom","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"zoom"}]},{"type":"text","value":" here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"combination-of-parameters"},"children":[{"type":"text","value":"Combination of parameters"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can combine several transformations of the "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics API"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Be aware that the order of the parameters can be significant."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of image for which we have, in order:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"cropped the image from the center to 16:9 aspect ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"then placed the focus on the center of interest of the cropped image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"then rotate the image 90° to the left"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The result is a 9:16 (not 16:9) image with a possibly false area of interest."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your image for which we have, in order:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placed the focus on the center of interest of the original image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"then cropped the image to 16:9 from the center of interest"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"then rotated the image 90° to the left"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The result is a cropped image with the area of interest retained and displayed in 16:9 format."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"dealing-with-image-ratio"},"children":[{"type":"text","value":"Dealing with image ratio"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's say you want to display an image in 4:3 aspect ratio with a width of 300px."}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or, with "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"focus"}]},{"type":"text","value":"='auto'"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"go-further-with-twicpics"},"children":[{"type":"text","value":"Go further with TwicPics"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics offers a "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@twicpics/components","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"collection of web components"}]},{"type":"text","value":" that will allow you to exploit all its power :"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Pixel Perfect"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Layout Driven"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ideal Compression"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lazy Loading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"LQIP"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"CLS Optimization"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A specific integration to Nuxt is available "},{"type":"element","tag":"a","props":{"href":"https://github.com/TwicPics/components/blob/main/documentation/nuxt2.md","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Integration between "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Twicpics"}]},{"type":"text","value":" and the image module."}]},{"type":"element","tag":"h2","props":{"id":"what-is-twicpics"},"children":[{"type":"text","value":"What is TwicPics?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Twicpics"}]},{"type":"text","value":" is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image generation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the TwicPics Provider you can, out of the box, benefit from at least :"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"performance of our network: global CDN, optimized protocols and competitive caching"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ideal compression: modern technology and Next-Gen formats (TwicPics delivers "},{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/WebP","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"WebP"}]}]},{"type":"text","value":" natively for accounting browsers and can also delivers "},{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/AVIF","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]}]},{"type":"text","value":")"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And using the TwicPics API, you will be able to access all these features: "},{"type":"element","tag":"a","props":{"href":"#focus"},"children":[{"type":"text","value":"smart cropping with TwicPics focus auto"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#truecolor"},"children":[{"type":"text","value":"true color"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#flip"},"children":[{"type":"text","value":"flip"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#turn"},"children":[{"type":"text","value":"turn"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#crop"},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"#zoom"},"children":[{"type":"text","value":"zoom"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"requirement"},"children":[{"type":"text","value":"Requirement"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The only requirement is to have a TwicPics account.\nIf you don't already have one, you can easily "},{"type":"element","tag":"a","props":{"href":"https://account.twicpics.com/signup/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"create your own TwicPics account for free"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"setup"},"children":[{"type":"text","value":"Setup"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You just need to configure the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" provider with the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"baseURL"}]},{"type":"text","value":" set to your TwicPics "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/getting-started/subdomain/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Domain"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"export default {\n image: {\n twicpics: {\n baseURL: \"https:///\"\n // Feel free to use our demo domain to try the following examples.\n // baseUrl: 'https://demo.twic.pics/'\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-4896f8"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4896f8"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0512a2"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0512a2"},"children":[{"type":"text","value":"twicpics"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0512a2"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"https:///\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-154189"},"children":[{"type":"text","value":"// Feel free to use our demo domain to try the following examples."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-154189"},"children":[{"type":"text","value":"// baseUrl: 'https://demo.twic.pics/'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"standard-properties"},"children":[{"type":"text","value":"Standard properties"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics Provider complies with the documentation of "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/components/nuxt-img","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://image.nuxtjs.org/components/nuxt-picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt-picture"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"fit"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" determines how the image is resized in relation to the parameters "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"TwicPics Provider supports all the "},{"type":"element","tag":"a","props":{"href":"/components/nuxt-img#fit"},"children":[{"type":"text","value":"the standard values for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit"}]},{"type":"text","value":" property"}]},{"type":"text","value":" of Nuxt image and Nuxt picture."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"fit='__cover__'"}]},{"type":"text","value":" (default value)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your master image cropped to 300x300 while preserving aspect ratio."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/football.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your master image resized to 300x300 with distortion."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/football.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"resize\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will bring your image back to a 300x600 area with respect to the ratio (1:1) using letterboxing."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"contain\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"600"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The letterboxing strips are transparent areas. Feel free to select the color of your choice by using the "},{"type":"element","tag":"a","props":{"href":"#background"},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" property."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"contain\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"600"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"background:"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\"red\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"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":"Specifies the output format. It can be an image format or a preview format. By default, "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" will \"guess\" the best output format for the requesting browser, but you can use "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format"}]},{"type":"text","value":" to change this behavior."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"format='avif'|'heif'|'jpeg'|'png'|__'webp'__"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://en.wikipedia.org/wiki/WebP","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WebP"}]},{"type":"text","value":" is the default format provided by "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" (if the browser supports it)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a variant of your image in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"avif"}]},{"type":"text","value":" format."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"avif\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will return a blurry preview of your image in "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"text","value":" format."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"preview\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#output","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about format here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"quality"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specifies the output quality as a number between 1 (poor quality) and 100 (best quality)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality="}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#number","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"number"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"TwicPics"}]},{"type":"text","value":" considers "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":"=70 as default value."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":": TwicPics automatically manages the returned quality according to the network performance for an optimized display speed even in difficult conditions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"NB"}]},{"type":"text","value":" : when Data Saver is activated (android mobile only), default "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"quality"}]},{"type":"text","value":"=10."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"quality"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=quality#truecolor","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about quality here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"background"},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background"}]},{"type":"text","value":" specifies a color that will show through transparent and translucent parts of the image. This will have no effect on images with no transparency nor translucency."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"background="}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#color","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"color"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example:"}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/icon-500.png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"red\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"fit"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"contain\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"600"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"300"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"background:"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"'red'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More informations "},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#background","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"about background here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"twicpics-modifiers"},"children":[{"type":"text","value":"TwicPics modifiers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the standard parameters, the specific features of the TwicPics API are accessible via the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"modifiers"}]},{"type":"text","value":" prop of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-img"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt-picture"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/path-to-nuxt-demo.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"props"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{key_1: value_1, ..., key_n: value_n}\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"/>"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/transformations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"A complete list of these features and their uses is accessible here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"crop"},"children":[{"type":"text","value":"crop"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" will extract a zone from the image which size is the given "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"crop"}]},{"type":"text","value":" size. If no coordinates are given, the focus point will be used as a guide to determine where to start the extraction. If coordinates are given, they will be used to determine the top-left pixel from which to start the extraction and the focus point will be reset to the center of the resulting image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"{ crop: "}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#crop-size","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"size"}]}]},{"type":"element","tag":"a","props":{"href":"https://www.twicpics.com/docs/api/manipulations/?utm_source=nuxt&utm_medium=organic&utm_campaign=provider#coordinates","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@coordinates"}]}]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"code","props":{"code":"\n/>\n\n/>\n\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{crop:'500x100'}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n/>\n\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/puppy.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{flip:'both'}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n\n/>\n\n\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cat_1x1.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{focus:'auto', crop:'500x500'}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/peacock.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"format"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"png\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{truecolor:true}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/football.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{turn:'left'}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"\n/>\n\n\n/>\n\n\n/>\n\n\n/>\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-7e5f63"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"NuxtImg"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"provider"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"twicpics\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"/cherry-3.jpg\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cc2816"},"children":[{"type":"text","value":":modifiers"}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f28375"},"children":[{"type":"text","value":"\"{zoom:1.5}\""}]},{"type":"element","tag":"span","props":{"class":"ct-7e5f63"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b76f9e"},"children":[{"type":"text","value":"