Integration between Storyblok and the image module. To use this provider you just need to specify the base url of your service in Storyblok.

nuxt.config.js
export default {
  image: {
    storyblok: {
      baseURL: 'https://img2.storyblok.com'
    }
  }
}

Storyblok modifiers

I am following all modifiers present on Storyblok image service

Resizing

Check Storyblok documentation if you want to know more.

the logic is:

  • If you not defining the width or height it's taking the original image size.
  • If you defined only the width or height it will resize proportionaly based ont he one defined

Example:

<div>Original</div>
<NuxtImg
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>

<div>Resized static</div>
<NuxtImg
  width="500"
  height="500"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>

<div>Proportional to Width</div>
<NuxtImg
  width="500"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>

<div>Proportional to Height</div>
<NuxtImg
  height="500"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>

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:

<div>Fit in with background CCCCCC</div>
<NuxtImg
  width="200"
  height="200"
  fit="in"
  :modifiers="{ filters: { fill: 'CCCCCC' } }"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>

Format

Check Storyblok documentation if you want to know more.

You can modify your image format. Supported format are webp, jpeg and png.

Example:

<h3>Format</h3>
<NuxtImg
  width="200"
  format="webp"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>

Quality

Check Storyblok documentation if you want to know more.

You can update your image quality by defining the quality filters.

Example:

 <div class="flex">
<div>Resized and 10% Quality</div>
<NuxtImg
  provider="storyblok"
  width="200"
  quality="10"
  src="https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg"
/>
</div>

Facial detection

Check Storyblok documentation if you want to know more.

To have a smart crop just define a smart property inside modifier.

Example:

<h3>Facial detection</h3>

<div>Resized without Smart Crop</div>
<NuxtImg
  width="600"
  height="130"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg"
/>

<div>Resized with Smart Crop</div>
<NuxtImg
  width="600"
  height="130"
  :modifiers="{ smart: true }"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg"
/>

Custom focal point

Check Storyblok documentation if you want to know more.

Storyblok offer you the focalize on a specific part of your image. Just use focal filters.

Example:

<div>Focus on the bottom of the image</div>
<NuxtImg
  width="600"
  height="130"
  :modifiers="{ filters: { focal: '450x500:550x600' } }"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg"
/>

<div>Focus on the top of the image</div>
<NuxtImg
  width="600"
  height="130"
  :modifiers="{ filters: { focal: '450x0:550x100' } }"
  provider="storyblok"
  src="https://a.storyblok.com/f/39898/1000x600/d962430746/demo-image-human.jpeg"
/>
Edit this page on GitHub Updated at Fri, Sep 10, 2021