@prismicio/client
Version:
The official JavaScript + TypeScript client library for Prismic
53 lines (52 loc) • 2 kB
JavaScript
const require_isFilled = require("./isFilled.cjs");
let imgix_url_builder = require("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 && require_isFilled.imageThumbnail(field)) {
const { pixelDensities = DEFAULT_PIXEL_DENSITIES, ...imgixParams } = config;
return {
src: (0, imgix_url_builder.buildURL)(field.url, imgixParams),
srcset: (0, imgix_url_builder.buildPixelDensitySrcSet)(field.url, {
...imgixParams,
pixelDensities
})
};
} else return null;
};
//#endregion
exports.asImagePixelDensitySrcSet = asImagePixelDensitySrcSet;
//# sourceMappingURL=asImagePixelDensitySrcSet.cjs.map