@prismicio/client/dist/helpers/asImageWidthSrcSet.d.ts

The official JavaScript + TypeScript client library for Prismic

import type { BuildWidthSrcSetParams } from "imgix-url-builder";
import type { ImageFieldImage } from "../types/value/image";
/**
 * The return type of `asImageWidthSrcSet()`.
 */
type AsImageWidthSrcSetReturnType<Field extends ImageFieldImage | null | undefined> = Field extends ImageFieldImage<"filled"> ? {
    /**
     * The image field's image URL with Imgix URL parameters (if given).
     */
    src: string;
    /**
     * A width-based `srcset` attribute value for the image field's image
     * with Imgix URL parameters (if given).
     */
    srcset: string;
} : null;
/**
 * Configuration for `asImageWidthSrcSet()`.
 */
type AsImageWidthSrcSetConfig = Omit<BuildWidthSrcSetParams, "widths"> & {
    widths?: "thumbnails" | BuildWidthSrcSetParams["widths"];
};
/**
 * Creates a width-based `srcset` from an image field with optional image
 * transformations (via Imgix URL parameters).
 *
 * If a `widths` parameter is not given, the following widths will be used by
 * default: 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
 *
 * If the image field contains responsive views, each responsive view can be
 * used as a width in the resulting `srcset` by passing `"thumbnails"` as the
 * `widths` parameter.
 *
 * @example
 *
 * ```ts
 * const srcset = asImageWidthSrcSet(document.data.imageField, {
 * 	widths: [400, 800, 1600],
 * 	sat: -100,
 * })
 * // => {
 * //   src:    'https://images.prismic.io/repo/image.png?sat=-100',
 * //   srcset: 'https://images.prismic.io/repo/image.png?sat=-100&width=400 400w, ' +
 * //           'https://images.prismic.io/repo/image.png?sat=-100&width=800 800w,' +
 * //           'https://images.prismic.io/repo/image.png?sat=-100&width=1600 1600w'
 * // }
 * ```
 *
 * @param field - Image field (or one of its responsive views) from which to get
 *   an image URL.
 * @param config - An object of Imgix URL API parameters. The `widths` parameter
 *   defines the resulting `srcset` widths. Pass `"thumbnails"` to automatically
 *   use the field's responsive views.
 *
 * @returns A `srcset` attribute value for the image field with Imgix URL
 *   parameters (if given). If the image field is empty, `null` is returned.
 *
 * @see Imgix URL parameters reference: https://docs.imgix.com/apis/rendering
 */
export declare const asImageWidthSrcSet: <Field extends ImageFieldImage | null | undefined>(field: Field, config?: AsImageWidthSrcSetConfig) => AsImageWidthSrcSetReturnType<Field>;
export {};