Image Mask Presets for Core Image

What the plugin does

The plugin extends the core/image block with a simple Inspector panel where you can choose one of three presets:

• None (default)
• Three columns / “three pillars” mask
• Circle mask

The selected preset is stored as a block attribute and synced to the block’s className. The frontend effect is applied purely through CSS.

Why this approach is safe and modern

Many “image shape” solutions switch to background images, which often breaks:

• responsive image selection (srcset / sizes)
• native lazy loading
• accessibility defaults and image semantics

This plugin avoids those issues by leaving the <img> markup untouched and applying only a CSS mask class.

Editor + frontend preview

• The same CSS file is loaded in the Block Editor so you get a live preview while editing.
• The same CSS file is loaded on the frontend so the output matches exactly.

How it works (technical overview)

• Adds one block attribute to core/image: imgMaskPreset ('', columns, circle)
• Adds a dedicated Inspector panel: Kép maszk
• Applies the chosen preset by injecting one of these classes:
  • ci3m-mask-columns
  • ci3m-mask-circle
• Includes a save-time “safety net” that cleans old ci3m-* classes and re-applies the correct one to prevent class duplication or mismatches.