Image Mask Documentation

1. Overview

Image Mask is a WordPress plugin that allows users to apply custom masks to images in the Gutenberg editor or via shortcode. Users can upload masks from the Media Library (SVG, PNG) or provide custom SVG code.

Features:

• Apply masks to Gutenberg image blocks.
• Use shortcode to add a masked image anywhere.
• Select masks from the Media Library.
• Use custom SVG code as a mask.
• Supports mask fit options (cover, contain).

If you need assistance, visit our Support Page.

2. Getting Started

2.1 Installation & Activation

Installing from WordPress Repository

1. Go to WordPress Dashboard > Plugins > Add New Plugin.
   
2. Search for WP Image Mask.
3. Click Install Now and then Activate.
   

Uploading the Plugin Manually

1. Download the latest version from the WordPress plugin repository.
   
2. Go to WordPress Dashboard > Plugins > Add New Plugin > Upload Plugin.
   
3. Upload the ZIP file and click Install Now.
4. Activate the plugin after installation.

3. Plugin Usage

Here you can set up basic settings of the Squeeze Plugin.

3.1 Gutenberg Integration

1. Add an Image block in the Gutenberg editor.
   
2. Select the “Image Mask” option from the block settings.
   
3. Upload a mask or choose one from the Media Library.
   
   

3.2 Using Custom SVG Masks

Users can enter SVG code directly in the settings to create a custom mask. Ensure the SVG code is valid and follows standard SVG masking syntax.

3.3 Shortcode Usage

To insert a masked image using a shortcode, use:

[wp-image-mask src="IMAGE_URL" mask="MASK_URL" fit="contain" alt="Alt text"]

Shortcode Attributes

3.4 Supported Mask Formats

• SVG (Recommended for best quality)
• PNG (Supports transparency, works as a clipping mask)

3.5 Notes

• For best results, use high-contrast masks with transparent areas.
• PNG masks work as clipping masks, while SVG masks allow more flexibility.

4. Frequently Asked Questions

• Do I need to replace my images with some custom Gutenberg block to use an image mask?
  No, this plugin attaches to the native Gutenberg image block, so no need to replace your existing images.
• Can I apply my custom image mask?
  Sure! You can select a custom image mask file or paste SVG code of your image mask.
• I don’t use Gutenberg – is there any other way to add an image with a mask?
  Yes! You can use a shortcode:

5. Support & Contact

• Visit WordPress Support Forum.
• Have a feature request? Let me know via feedback form.