Image Mask Extension V3

Introduction

The Image Mask Extension transforms ordinary images into visually striking design elements by applying shape masks. This powerful tool extends the WordPress core Image block, allowing you to create unique visual effects with predefined shapes or custom masks. Perfect for creating modern web designs, the extension helps break away from rectangular image constraints without requiring image editing software.

How It Works

The Image Mask Extension works like a cookie cutter for your images. When you apply a mask to an image:

1. Your original image file stays untouched
2. The mask creates a new shape for how the image displays
3. Image quality remains perfect
4. You can preview changes instantly in the editor
5. The masked image automatically adjusts to different screen sizes

Available Mask Shapes

Predefined Shapes

Shape	Description	Best Use Cases
Circle	Perfect circular mask	Profile pictures, logos, icons
Diamond	45-degree rotated square	Feature highlights, decorative elements
Hexagon	Six-sided polygon	Modern galleries, tech designs
Rounded	Square with rounded corners	App icons, testimonials
Blob 1	Organic flowing shape	Creative headers, artistic layouts
Blob 2	Asymmetric organic shape	Background elements, hero images
Blob 3	Fluid irregular shape	Lifestyle images, creative portfolios
Blob 4	Dynamic organic shape	Modern designs, artistic sections

Creating Custom Masks

Design Requirements

1. File Format
   • PNG with transparency (recommended)
   • SVG for vector shapes
   • Black/white for alpha masks
2. Image Specifications
   • Minimum: 500x500px
   • Maximum: 2000x2000px
   • File size: Under 500KB
   • Transparent areas define the mask
3. Resolution: Higher resolution provides smoother edges
4. File Size: Optimize for web performance

Using the Image Mask Extension

Getting Started

1. Add an Image Block
   • Insert a new Image block or select an existing one
   • Upload or select your image from the media library
   • The mask options appear in the block settings
2. Access Mask Settings
   • Look for “Mask” panel in the block sidebar
   • If not visible, check under “Advanced” settings
   • Click to expand the mask options
3. Choose Your Mask
   • Select from predefined shapes
   • Or upload a custom mask image
   • See instant preview in the editor

Configuration Options

Setting	Description	Options
Mask Shape	Choose predefined or custom mask	8 shapes + custom
Custom Mask	Upload your own mask image	Image upload
Size	How the mask fills the area	Auto, Cover, Contain, Custom
Position	Mask alignment within image	Focal point picker
Repeat	Tiling behavior for masks	No Repeat, Repeat, Repeat-X, Repeat-Y

Size Options Explained

1. Auto
   • Mask displays at original size
   • Best for precise custom masks
   • May not fill entire image
2. Cover
   • Mask scales to cover entire image
   • Maintains aspect ratio
   • May crop mask edges
3. Contain
   • Entire mask fits within image
   • No cropping occurs
   • May leave uncovered areas
4. Custom
   • Set specific width/height
   • Full control over mask dimensions
   • Useful for pattern masks

Position Control

• Use the focal point picker for precise positioning
• Click and drag to adjust mask placement
• Percentage-based for responsive behavior
• Works with all size options

Design Best Practices

Shape Selection Guidelines

1. Circle Masks
   • Perfect for portraits and headshots
   • Creates focus on central subjects
   • Works well in grids and galleries
   • Maintains harmony in designs
2. Geometric Shapes
   • Diamond and hexagon for modern aesthetics
   • Great for tech and corporate designs
   • Creates visual interest in layouts
   • Best with centered subjects
3. Organic Blob Shapes
   • Adds playfulness and creativity
   • Softens rigid layouts
   • Perfect for lifestyle brands
   • Creates unique visual flow

Image Preparation Tips

1. Subject Positioning
   • Center important elements
   • Leave padding around edges
   • Consider mask shape during photography
   • Test different focal points
2. Background Considerations
   • Simple backgrounds work best
   • Avoid important details at edges
   • Consider transparent backgrounds
   • Test mask preview before finalizing
3. Resolution and Quality
   • Use high-resolution images
   • Optimize file size
   • Maintain aspect ratios
   • Consider retina displays

Common Use Cases

1. Team Member Profiles

Perfect for creating professional team pages:

• Image Type: Professional headshots
• Best Mask: Circle shape
• Size Setting: Cover (fills the entire circle)
• Position: Center
• Where to Use: About us pages, team directories

2. Product Showcase

Make your products stand out with unique shapes:

• Image Type: Product photos on clean backgrounds
• Best Mask: Hexagon for a modern look
• Size Setting: Contain (shows entire product)
• Position: Center
• Where to Use: Product grids, feature sections

Creating Masks in Design Software

Photoshop/GIMP:

1. Create new document with transparency
2. Draw your shape in black
3. Delete/erase areas to be masked out
4. Export as PNG with transparency

Illustrator/Inkscape:

1. Create vector shape
2. Set fill to black
3. Transparent background
4. Export as SVG or PNG

Online Tools:

• Canva (with transparent background)
• Figma (export with transparency)
• Online PNG editors

Responsive Behavior

Automatic Adjustments

• Masks scale proportionally with images
• Focal points remain consistent
• No quality loss on different screens
• Touch-friendly on mobile devices

Responsive Best Practices

1. Test on Multiple Devices
   • Preview at different breakpoints
   • Check mask alignment
   • Verify subject visibility
   • Ensure performance
2. Mobile Considerations
   • Simpler shapes work better
   • Avoid tiny detailed masks
   • Test touch interactions
   • Consider load times

Performance Optimization

Image Optimization

1. Before Upload
   • Compress images appropriately
   • Use WebP format when possible
   • Resize to maximum display size
   • Optimize custom masks
2. Mask Performance
   • Predefined shapes are CSS-only
   • Custom masks add minimal overhead
   • Browser-native implementation
   • Hardware acceleration enabled

Best Practices

• Limit masked images per page
• Use simple shapes for better performance
• Optimize custom mask file sizes
• Enable lazy loading for images

Troubleshooting

Common Issues

Problem	Cause	Solution
Mask not visible	Browser compatibility	Check browser support, update if needed
Blurry edges	Low-resolution mask	Use higher resolution mask image
Wrong position	Focal point issue	Readjust using focal point picker
Performance slow	Large mask files	Optimize mask image size
Mask cut off	Size setting	Try different size options

Browser Compatibility

Mask support by browser:

• Chrome 4+
• Firefox 3.5+
• Safari 4+
• Edge 79+
• Opera 15+
• Internet Explorer (no support)

FAQ

Q: Can I use animated masks? 
A: Static masks only. For animations, combine with the Animations extension.

Q: Do masks work with image galleries? 
A: Currently supports individual images. Gallery support may come in future updates.

Q: Can I apply masks to background images? 
A: This extension works with Image blocks only. Background images in Container blocks cannot use this feature.

Q: Are masks SEO-friendly? 
A: Yes, original images remain intact for search engines. Masks are purely visual.

Q: Can I remove a mask after applying? 
A: Yes, select “None” in the mask shape dropdown to remove any applied mask.

Q: Do masks affect image links? 
A: No, linked images remain fully clickable within the masked area.

Tips and Tricks

Creative Combinations

1. Layered Effects
   • Combine with shadows
   • Add borders to masked images
   • Use with animation effects
   • Layer multiple masked images
2. Pattern Masks
   • Create repeating patterns
   • Use for backgrounds
   • Decorative elements
   • Texture effects

Design Inspiration

• Portfolio Sites: Hexagon grids
• Team Pages: Circular avatars
• Hero Sections: Blob-shaped images
• Product Features: Diamond highlights
• Testimonials: Rounded rectangles

Accessibility

• Original image alt text preserved
• Screen readers unaffected
• Keyboard navigation maintained
• No impact on image semantics
• Decorative masks don’t interfere with content

Future Enhancements

Potential upcoming features:

• Animated mask transitions
• Gallery block support
• More predefined shapes
• Gradient mask options
• Video mask support