Storyblok

Setup

Install the framework package and the core package for the provider import:

npm install @desource/image @desource/image-svelte

Save this as image.config.ts beside your example component. Replace sample domains and identifiers with your own.

import type { ImageConfig } from '@desource/image';
import { storyblokProvider } from '@desource/image/providers/storyblok';

export const imageConfig = {
  provider: 'storyblok',
  providers: {
    storyblok: storyblokProvider({
      "baseURL": "https://a.storyblok.com"
    })
  }
} satisfies ImageConfig;

Registering this provider makes it the default for the configured components. To mix services, register each provider and set provider="storyblok" on the image that should use this one.

Image source

Pass a Storyblok asset URL or its full /f/... path.

/f/space-id/1200x800/asset-hash/photo.jpg

Usage

The example uses the shared configuration above and the Svelte image component.

<script lang="ts">
  import { Image, setImageConfig } from '@desource/image-svelte';
  import { imageConfig } from './image.config';

  setImageConfig(imageConfig);
</script>

<Image
  src="/f/space-id/1200x800/asset-hash/photo.jpg"
  alt="Sample image" width={800} height={500}
  modifiers={{
  "quality": 80,
  "format": "webp",
  "smart": true
}}
/>

Provider options

baseURL

Storyblok asset host. Set a regional host here when your assets use one.

Pass shared defaults such as screens, domains, aliases and presets to the image configuration. Pass provider-specific defaults as modifiers in the provider factory.

Modifiers

Width and height form the resize path; one omitted dimension is represented by 0. Supports quality, format, smart, fit and a filters object.

Set dimensions on the component and pass service-specific operations through modifiers, as shown above. See the provider source for exact mappings and the service documentation for accepted values.

Provider notes

• Use fit: in for Storyblok fit-in. The adapter passes other fit values directly into the path.
• Set smart: true for smart crop, filters.focal for a focal rectangle, or filters.fill for padding color.
• SVG sources ending in .svg skip raster resizing, format and quality processing.