The Smart Image is an advanced image block that extends beyond the default WordPress image block, offering powerful styling, masking, and interactive features. It lets you turn ordinary images into visually engaging design elements with ease.

1. Image: General

From this panel, you can upload images from different sources, apply masking, and set other advanced customizations.

• Image Source: Select the origin of your media. You can choose to upload from the Media Library or input an External URL.
• Image Masking: Enable or disable the masking feature for the selected image. 

• Shape Set: Choose from a library of professional presets, including Rectangle, Circle, Blob, Rounded, or upload your custom images.
• Mask Size: Controls the mask’s scale (e.g., Cover, Contain, or Auto).

• Image Size: Select the appropriate image aspect ratio (e.g., Thumbnail, Medium, Large, Full) to optimize performance.
• Image Max Width: Set the Image Max Width according to different devices.
• Focal Point Picker: Set the image’s center of interest, ensuring the most important area remains visible when cropped or resized on different devices.
• Enable Image Link: Turn ON/OFF this toggle to enable/disable the image link.

• Link Type: Select the interaction format, such as a Full-Image link or an overlaid Button.
• Button Label: If the Button type is selected, use this field to customize the call-to-action text (e.g., “View Details”).

• Button URL: Define the destination web address for the link.
• Button Position: A dropdown to precisely place the button overlay (e.g., Center Center, Bottom Right).
• Alt Text: A dedicated field for the image’s alternative text, essential for SEO and accessibility compliance.
• Lazy Load: A toggle to defer image loading until it enters the viewport, improving initial page speed.
• Alignment: Set the Image alignment to the Center, Left, or Right.

Style Image:

• Border Style: Select from four distinct border designs: Normal (Solid), Dashed, Dotted, or Boxed.
• Border Radius: Set the adjustment of the corner roundness, allowing for a square or pill-shaped image.
• Box Shadow: Enable the box shadow and choose from different shadow types, and add a shadow effect to the image.

Image Filtering:

• Enable Image Filter Toggle: Use this toggle to enable or disable the advanced image filtering and configure it.
• Blur: Adjust image focus, allowing for soft-focus effects or background diffusion.
• Brightness: Control the exposure levels to lighten or darken the visual asset.
• Contrast: Adjust the tonal difference between the highlights and shadows of the image.
• Saturation: Manage the intensity of the colors, from grayscale to high vibrancy.
• Hue: Shift the color spectrum and alter the overall image color profile.

• Padding: Use this to adjust the internal spacing, changing the image height and width.

Note: When you enable the image link and set the link type as a button, you can add style to the button from here.

• Button Typography: Use this to control the fonts (Family, Size, Weight, and Line Height) for the button text.
• Normal / Hover: Toggle between Normal / Hover to set independent styles for the default and mouse-over states.
• Background Type: Choose between Transparent, Solid, or Gradient background fills for the button preset.
• Background Color: Define the image fill color based on the selected Background Type.

2. Image Background:

The Image Background panel allows you to style the container area surrounding the image.

• Enable Image Background: Simply enable this to activate the background styling options for the image container.
• Normal / Hover: Switch between Normal / Hover to set independent styles for the default and mouse-over states.
• Background Type: Select between Solid or Gradient fill options to define the image background type.
• Border Style: Select from four distinct border styles, including: Solid, Dashed, Dotted, or Double
• Border Radius: Set the adjustment of the corner roundness, allowing for a square or pill-shaped image.
• Inner Padding: Use this to adjust the inner spacing, changing the image height and width.

3. Title and Caption:

The Title and Caption panel lets you add and style descriptive text layers for your image.

• Title/Caption: Switch between configuring the primary title and the secondary caption.
• Enable Image Title/Caption: Turn this toggle on to display the image title.
• Title/Caption Label: A text field to enter a custom heading of the image (e.g., “Featured Image”).
• Title/Caption Typography: Use this to control the fonts (Family, Size, Weight, and Line Height) of the image title.
• Title/Caption Visibility: Set how the image titles will be displayed, such as Always or Show on Hover.
• Title/Caption Position: Adjust the title position at the image, such as at the Top, Bottom, or over the image.
• Title/Caption Alignment: Set the title Vertical Alignment to top, middle, or bottom of the text area, and Horizontal Alignment to Left, Center, or Right.
• Title/CaptionPadding: Use this to adjust the inner spacing, changing the title height and width.

4. Hover Effect:

The Hover Effect panel provides tools to enhance image motion and color overlays during user interaction.

• Image Animation: Select from a diverse library of motion presets, including Zoom In, Zoom Out, Move (Left, Right, Top, Bottom), and specialized styles such as Jazz, Apollo, Selena, Oscar, and Layla.

• Hover Overlay: Use this toggle to enable or disable a secondary color layer that appears when the user hovers over the image.
• Overlay Color: Choose between Solid or Gradient fill types to define the aesthetic of the interactive layer.
• Overlay Opacity: Set and precisely control the transparency level (e.g., 0.6) of the overlay, balancing text legibility with image visibility.

Let’s see a live demo of how it works.