@spoolcms/nextjs
Version:
The beautiful headless CMS for Next.js developers
46 lines (45 loc) • 1.55 kB
TypeScript
/**
* Image utility functions for Spool CMS
*/
export type ImageSize = 'thumb' | 'small' | 'medium' | 'large' | 'original';
export interface ImageSizes {
original: string;
thumb: string;
small: string;
medium?: string;
large?: string;
}
/**
* Helper function to get the appropriate image URL from Spool image field
*
* @param imageValue - The image field value (can be a string URL or an object with sizes)
* @param size - The desired image size ('thumb' | 'small' | 'medium' | 'large' | 'original')
* @returns The appropriate image URL
*
* @example
* ```tsx
* import { img } from '@spoolcms/nextjs';
*
* // Use thumbnail for fast loading in lists
* <Image src={img(item.headerImage, 'thumb')} width={160} height={90} />
*
* // Use small for medium-sized displays
* <Image src={img(item.headerImage, 'small')} width={480} height={270} />
*
* // Use original for full-size displays
* <Image src={img(item.headerImage, 'original')} width={1200} height={675} />
* ```
*/
export declare function img(imageValue: string | ImageSizes | null | undefined, size?: ImageSize): string;
/**
* Generate src, srcSet and sizes attributes for responsive images from a Spool image field.
* Builds a width-based srcset from the available fixed sizes (thumb, small, medium, large).
* Falls back gracefully when some sizes are missing.
*/
export declare function spoolSrcSet(imageValue: string | ImageSizes | null | undefined, options?: {
sizes?: string;
}): {
src: string;
srcSet: string;
sizes: string;
};