Storyblok
Integration between Storyblok and the image module. To use this provider you just need to specify the base URL of your service in Storyblok.
export default defineNuxtConfig({
image: {
storyblok: {
baseURL: 'https://a.storyblok.com'
}
}
})
Storyblok Modifiers
Check out available Storyblok image service modifiers.
Resizing
Check Storyblok documentation if you want to know more.
the logic is:
- If you do not define either width or height, the image will not be resized.
- If you define only width or only height the image will be proportionately resized based on the one you defined.
Example:
<!-- Original -->
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
<!-- Resized static -->
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
width="500"
height="500"
/>
<!-- Proportional to width -->
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
width="500"
/>
<!-- Proportional to height -->
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
height="500"
/>
Fit in with background or not
Check Storyblok documentation if you want to know more.
If you want to use it just add a props fit="in". Take care that Storyblok only support fit-in.
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.
Example:
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
width="200"
height="200"
fit="in"
:modifiers="{ filters: { fill: 'CCCCCC' } }"
/>
Format
Check Storyblok documentation if you want to know more.
You can modify your image format. Supported format are webp, jpeg and png.
Example:
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
width="200"
format="webp"
/>
Quality
Check Storyblok documentation if you want to know more.
You can update your image quality by defining the quality filters.
Example:
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
width="200"
quality="10"
/>
Facial detection
Check Storyblok documentation if you want to know more.
To have a smart crop just define a smart property inside modifier.
Example:
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg"
width="600"
height="130"
:modifiers="{ smart: true }"
/>
Custom focal point
Check Storyblok documentation if you want to know more.
Storyblok allows you to focalize on a specific part of your image. Just use focal filters.
Example:
<!-- Focus on the top of the image -->
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg"
width="600"
height="130"
:modifiers="{ filters: { focal: '450x0:550x100' } }"
/>
<!-- Focus on the bottom of the image -->
<NuxtImg
provider="storyblok"
src="https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg"
width="600"
height="130"
:modifiers="{ filters: { focal: '450x500:550x600' } }"
/>