@prismicio/client/dist/helpers/asImagePixelDensitySrcSet.js

The official JavaScript + TypeScript client library for Prismic

import { imageThumbnail } from "./isFilled.js";
import { buildPixelDensitySrcSet, buildURL } from "imgix-url-builder";

//#region src/helpers/asImagePixelDensitySrcSet.ts
/**
* The default pixel densities used to generate a `srcset` value.
*/
const DEFAULT_PIXEL_DENSITIES = [
	1,
	2,
	3
];
/**
* Creates a pixel-density-based `srcset` from an image field with optional
* image transformations via imgix URL parameters.
*
* If a `pixelDensities` parameter is not given, the following pixel densities
* will be used by default: 1, 2, 3.
*
* @example
*
* ```ts
* const srcset = asImagePixelDensitySrcSet(document.data.photo, {
* 	pixelDensities: [1, 2],
* 	sat: -100,
* })
* // => {
* //   src: "https://images.prismic.io/repo/image.png?sat=-100",
* //   srcset: "https://images.prismic.io/repo/image.png?sat=-100&dpr=1 1x, " +
* //           "https://images.prismic.io/repo/image.png?sat=-100&dpr=2 2x"
* // }
* ```
*
* @param field - An 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 `pixelDensities`
*   parameter defines the resulting `srcset` pixel densities.
*
* @returns A `srcset` attribute value for the image field with imgix URL
*   parameters, or `null` if the field is empty.
*
* @see Learn how to optimize images with imgix: {@link https://prismic.io/docs/fields/image}
* @see imgix URL parameters reference: {@link https://docs.imgix.com/apis/rendering}
*/
const asImagePixelDensitySrcSet = (field, config = {}) => {
	if (field && imageThumbnail(field)) {
		const { pixelDensities = DEFAULT_PIXEL_DENSITIES,...imgixParams } = config;
		return {
			src: buildURL(field.url, imgixParams),
			srcset: buildPixelDensitySrcSet(field.url, {
				...imgixParams,
				pixelDensities
			})
		};
	} else return null;
};

//#endregion
export { asImagePixelDensitySrcSet };
//# sourceMappingURL=asImagePixelDensitySrcSet.js.map