Contentful Loader

This integration allows you to use Contentfulfor image optimization. For more details, refer to the official documentation.

Module import

import * as Contentful from '@lonik/oh-image/contentful'

URL Schema

The loader generates URLs following this pattern:

URL Schema

<path>/<src>?<params>

useContentfulLoader

The primary hook for generating the loader function. It accepts configuration options (including transforms and placeholder settings) and returns a function that generates the final image URL. Pass this result to the loader prop of the Image component.

Using useContentfulLoader

import { useContentfulLoader } from '@lonik/oh-image/contentful';
import { Image } from '@lonik/oh-image/react'

function MyComponent() {
  const loader = useContentfulLoader(
  {
    transforms: {
      fm: "webp",
    },
    placeholder: {
      q: 10,
      fm: "webp",
    },
  },
  );

  return (
    <Image
      src="image.jpg"
      width={500}
      loader={loader}
      placeholder={true}
    />
  );
}

ContentfulLoaderProvider

A Context Provider that configures global options for all child components using this loader. This is the recommended way to set the base path/URL and default transforms.

Configuring ContentfulLoaderProvider

import { ContentfulLoaderProvider } from '@lonik/oh-image/contentful';

function App() {
  return (
    <ContentfulLoaderProvider
      path="https://example.com/images"
      transforms={OPTIONS}
      placeholder={PLACEHOLDER_OPTIONS}
    >
      <MyApp />
    </ContentfulLoaderProvider>
  );
}

useContentfulContext

Returns the global configuration of the loader.

Global Defaults

By default the loader is configured with the following properties:

Contentful Loader Default Config

  {
    transforms: {
      fm: "webp",
    },
    placeholder: {
      q: 10,
      fm: "webp",
    },
  },
  

Transforms Option

Below is the transformation options for this loader.

Contentful Loader Interface

{
  /**
   * convert the image to a specific format
   */
  fm: "jpg" | "png" | "webp" | "gif" | "avif" | "tiff";

  /**
   * converts image format to specific type
   * progressive: for jpg image
   * png8: for png image
   */
  fl: "progressive" | "png8";

  /** width of the image */
  w: number;

  /** height of the image */
  h: number;

  /** resizing behavior */
  fit: "pad" | "fill" | "scale" | "crop" | "thumb";

  /** focus area */
  f:
    | "center"
    | "top"
    | "right"
    | "left"
    | "bottom"
    | "top_right"
    | "top_left"
    | "bottom_right"
    | "bottom_left"
    | "face";

  /** corner radius */
  r: number | "max";

  /** quality of image */
  q: number;

  /** background color */
  bg: string;
}