Implement Dynamic Image Masking Control

Summary

Implemented configurable image masking control for the FeatureSideImage component, allowing dynamic control over the dimensions of the image "window" through JSON data.

Why Care

This enhancement gives content creators precise control over how images are displayed without requiring image resizing. It supports multiple dimension formats (fixed, percentage, auto) and ensures proper responsive behavior across devices.

Implementation

Changes Made

  • Modified Components:
    • site/src/components/basics/FeatureSideImage.astro: Added maskHeight and maskWidth props
    • site/src/components/basics/messages/AlternatingSideImage.astro: Updated to pass mask dimensions to FeatureSideImage
    • site/src/content/messages/featureSideImage.json: Added maskHeight and maskWidth properties to feature entries

Technical Details

  • Supports multiple dimension formats:
    • Fixed dimensions (e.g., "300px")
    • Percentage-based dimensions (e.g., "80%") relative to text content
    • Auto height that matches text content exactly
  • Enhanced JavaScript to calculate percentage-based dimensions dynamically
  • Added special handling for wider masks with proper centering
  • Implemented mobile-responsive behavior with fixed height on small screens
  • Uses inline styles for applying mask dimensions to maintain flexibility

Integration Points

  • The AlternatingSideImage component passes mask dimensions from JSON data to each FeatureSideImage
  • The featureSideImage.json data structure now includes optional maskHeight and maskWidth properties
  • Maintains backward compatibility with existing feature entries that don't specify mask dimensions

Documentation

  • Added comments explaining the mask dimension options and behavior
  • Updated JSON schema to include the new properties
  • Maintained responsive behavior across different screen sizes