WordPress Loader

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

Module import

import * as Wordpress from '@lonik/oh-image/wordpress'

URL Schema

The loader generates URLs following this pattern:

URL Schema

<path>/<src>?<params>

useWordpressLoader

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 useWordpressLoader

import { useWordpressLoader } from '@lonik/oh-image/wordpress';
import { Image } from '@lonik/oh-image/react'

function MyComponent() {
  const loader = useWordpressLoader(
  {
   transforms: {
      format: "webp",
    },
    placeholder: {
      quality: 10,
      format: "webp",
    },
  },
  );

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

WordpressLoaderProvider

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 WordpressLoaderProvider

import { WordpressLoaderProvider } from '@lonik/oh-image/wordpress';

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

useWordpressContext

Returns the global configuration of the loader.

Global Defaults

By default the loader is configured with the following properties:

WordPress Loader Default Config

  {
   transforms: {
      format: "webp",
    },
    placeholder: {
      quality: 10,
      format: "webp",
    },
  },
  

Transforms Option

Below is the transformation options for this loader.

WordPress Loader Interface

{
  /* image width in pixels */
  w: number;

  /* image height in pixels */
  h: number;

  /* crop mode; accepts number values as percentages or, string values as pixels, example:160px */
  crop: [number | string, number | string, number | string, number | string];

  /* resize to exact dimensions, e.g. "300,200" */
  resize: [number, number];

  /* fit image within dimensions, e.g. "300,200" */
  fit: [number, number];

  /* Add black letterboxing effect to images */
  lb: [number, number];

  /* Remove black letterboxing effect from images with ulb */
  ulb: boolean;

  /* The filter parameter is used to apply one of multiple filters */
  filter:
    | "negate"
    | "grayscale"
    | "sepia"
    | "edgedetect"
    | "emboss"
    | "blurgaussian"
    | "blurselective"
    | "meanremoval";

  /* Adjust the brightness of an image */
  brightness: number;

  /* Adjust the contrast of an image */
  contrast: number;

  /* Add color hues to an image with colorize by passing a comma separated list of red, green, and blue (RGB) */
  colorize: [number, number, number];

  /* The smooth parameter can be used to smooth out the image. */
  smooth: number;

  /*  zoom the image. */
  zoom: number;

  /* the quality output of the images */
  quality: number;

  /* parameter to control whether the Image CDN may serve a lossy-compressed version of an image */
  allow_lossy: 1;

  /* strip image metadata */
  strip: "all" | "none";
}