Skip to content

Add masking feature to Image component - #6

Merged
bencounsell merged 3 commits into
mainfrom
feature/4-image-mask
Jan 12, 2026
Merged

Add masking feature to Image component#6
bencounsell merged 3 commits into
mainfrom
feature/4-image-mask

Conversation

@bencounsell

Copy link
Copy Markdown
Member

Summary

  • Adds a new "Mask" group to the Image component
  • Users can select an SVG resource to use as a mask for the image
  • Mask automatically activates when an SVG is added (no enable switch needed)
  • Includes Size option: Contain, Cover, or Fill

Test plan

  • Add an Image component to a page
  • Open the Mask group in the inspector
  • Drop an SVG file into the SVG resource picker
  • Verify the image is masked by the SVG shape
  • Test the Size dropdown options (Contain/Cover/Fill)
  • Remove the SVG and verify the mask is removed

Closes #4

Adds a new Mask group to the Image component that allows users to apply
an SVG as a mask. The mask automatically activates when an SVG resource
is added and includes a Size option (Contain/Cover/Fill).

Closes #4
Replace inline CSS mask styles with Tailwind arbitrary value classes to avoid
HTML escaping issues with SVG data URLs. The mask classes are now generated
in hooks.js and applied directly to the img element class attribute.
@bencounsell
bencounsell merged commit 135abf9 into main Jan 12, 2026
@bencounsell
bencounsell deleted the feature/4-image-mask branch January 12, 2026 13:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add masking feature to the Image component

1 participant