create-placeholders.js Documentation

The create-placeholders.js script generates a set of SVG placeholder images for common aspect ratios and saves them to public/images/placeholders/.

What It Does

• Creates a directory for placeholder images if it doesn’t exist
• Defines a set of common aspect ratios (e.g., 16:9, 4:3, 1:1, etc.)
• Uses a color palette for background colors
• Generates SVG images with the aspect ratio label and pixel dimensions
• Saves each SVG as placeholder-<ratio>.svg (e.g., placeholder-16-9.svg)
• Prints usage examples for each placeholder

Usage

Run the script from the project root:

node scripts/create-placeholders.js

Example Output

Created: placeholder-16-9.svg
Created: placeholder-4-3.svg
... (other ratios)

Created 11 placeholder images in public/images/placeholders/

Usage examples:
<LightboxImage keyName="placeholder-16-9" parentDir="placeholders" alt="16:9 Widescreen placeholder" aspectRatio="16/9" />
... (other ratios)

Customization

• Add or modify aspect ratios in the ratios array
• Change colors in the colors array
• Edit the SVG template in createSVGPlaceholder() for different styles

Integration

Use the generated placeholders in your components, e.g.:

<LightboxImage
  src={`${IMAGE_DIR}/widescreen-placeholder_16x9.webp`}
  largeSrc={`${IMAGE_DIR}/widescreen-placeholder_full_16x9.jpg`}
  alt='16:9 Widescreen placeholder'
  aspectRatio='16/9'
/>

This tool helps provide visual placeholders for image slots in your UI, ensuring consistent layout and aspect ratio previews.