Image

The Image Block allows you to add and customize images throughout your WordPress content easily. This versatile block provides enhanced control over image display, helping you create visually appealing and professional layouts beyond what the standard WordPress image block offers.

Prerequisite:
Active installation of Magazine Blocks Free or Pro.

For installation instructions, see our Installation Guide for Magazine Blocks Free or Magazine Blocks Pro Installation Guide.

Getting Started #

Enable the Image Block #

1. Navigate to Magazine Blocks > Blocks in your WordPress admin.
2. Locate the Image Block in the list.
3. Toggle the switch to enable the block if it’s disabled.

Add the Image Block to Your Page/Post #

1. Go to the page or post where you want to add the Image Block.
2. Click the [+] button in the editor to open the block inserter.
3. Search for “Image” under Magazine Blocks.
4. Click or drag the block into your editor.

Once added, you’ll see options to upload a new image, select one from your Media Library, or insert from a URL.

After selecting an image, you can access the full customization options through the block settings panel.

Customization Settings #

The Image Block offers three main categories of settings that allow you to fully customize your images’ functionality and appearance: General, Style, and Advanced.

Each setting category is accessible from the block’s sidebar panel in the WordPress editor, allowing you to switch between different customization aspects easily.

General Settings #

Control image size, alignment, URL, captions, and more for accessibility.

Layout

The Layout section in the General tab allows you to control the dimensions of your image display precisely.

• Width: It controls the horizontal span of your image. Use the slider to adjust the width from narrow to wide visually.
• Max Width: It establishes an upper limit on how wide your image can expand. Like Width, it can be set using the slider or by entering a specific pixel value.
• Height: It determines the vertical dimension of your image. It controls how tall your image appears using the slider or pixel input.

Click the reset icon (circular arrow) to return to the default width. The monitor icon indicates this setting applies to desktop view. You can set it for mobile and tablet by clicking on the icon.

Image

The Image section provides essential controls for managing your visual content:

• Add image: Click this button to upload a new photo or select one from your Media Library. Use the pencil icon to edit the current selection. You can replace an image by clicking and deleting the current image by clicking on the trash icon. Next, add a URL to the image, directing visitors to the specified link.
  • Open Link in a New Tab: Toggle this option to determine whether clicked images open in the same browser tab or a new one.
  • ALT Text: The text area allows you to add alternative text for screen readers and SEO. This improves accessibility for visitors using assistive technologies.

• Caption Option
  • Enable Caption: Toggle this switch to add a caption below your image. When enabled, a text field will appear where you can enter your caption.

Overlay

The Overlay section provides powerful tools to add text and interactive elements directly on top of your image. Toggle to enable the overlay setting for the image block.

• Content Position
  • Top Center dropdown: Determines where overlay content appears on your image. Options typically include positions like:
    • Top Left/Center/Right
    • Center Left/Center/Right
    • Bottom Left/Center/Right

• Overlay Type
  • Currently set to NONE – This setting controls the overlay background style.
• Radius
  • Allows you to round the corners of your overlay with specific pixel values.

Separator Controls

After you enable overlay and it adds a heading and a subtitle to the image, you can show a separator between these two.

• Show Separator On: Choose when the separator line appears:
  • Always (selected): The Separator is permanently visible.
  • Hover: The Separator only appears when visitors mouse over the image.
• Separator Style: Currently set to “Dotted” – Defines the visual style of the dividing line.
• Separator Position: Controls where the separator appears relative to other overlay elements.

Content Visibility

• Show Heading: Control when the heading text appears:
  • Always (selected): Heading is always visible.
  • Hover: Heading only appears when the mouse is over.
• Show Description: Control when descriptive text appears.

Mask

The Mask section allows you to apply creative shape cutouts to your images, transforming standard rectangular photos into visually distinctive designs:

Mask Shape

• Blob 1 (currently selected): Crops your image into a diamond/rhombus shape.
• Other standard options may include Circle, Square, Hexagon, Star, Heart, and custom shapes.
• The shape selection instantly changes how your image appears on the page.

Mask Size

• Auto (currently selected): Ensures the entire shape fits within the image area.
• Other options typically include Cover (fills the shape, may crop image edges) and Contain.
• This setting controls how your image fits within the selected mask shape.

Mask Position

• Center Center (currently selected): Places the mask in the middle of your image.
• Other options typically include positions like Top Left, Bottom Right, etc.
• This determines which part of your image is featured within the mask.

Mask Repeat

• No Repeat (currently selected): The mask applies once to your image.
• Other options include various repeat patterns.
• Controls whether the mask creates a pattern effect with multiple instances.

Style Settings #

Customize visual elements including alignment, borders, shadows, opacity, hover effects, etc.

Properties

Alignment: From here, you can align the image in different positions: Left, Center, Right, and Full Width.

Image

These settings allow you to customize your image’s visual presentation and interactive aspects.

Object Fit: It controls how your image fills its container. It has the following options:

• Fill: Stretches or compresses the image to fill the container, which may change the image’s proportions.
• Cover: Fills the entire container while maintaining aspect ratio, which may crop portions of the image.
• Contain: Ensures the entire image is visible within the container while maintaining aspect ratio.
• None: Uses the image’s original size without any fitting adjustments.
• Scale Down: Displays the image at its original size unless it’s larger than the container.

On Hover Image: The On Hover Image setting determines how your image behaves when visitors move their cursor over it.

It has the following options:

• Static (currently selected): No change occurs on hover
• Zoom In: Image enlarges slightly when hovered
• Slide: Image moves in a specified direction on hover
• Gray Scale: Removes color, creating a black and white effect on hover
• Blur: Softens the image details on hover

Image Filter: The Image Filter allows you to apply visual effects to your image. Using the dropdown, you can choose from the following options:

• Grayscale: Removes color, creating a black and white effect
• Sepia: Applies a warm, brownish tone for a vintage look
• Saturation: Enhances color intensity, making hues more vivid
• Vintage: Creates a soft, faded look with slightly muted colors for a classic, nostalgic feel
• Earlybird: Applies warm sepia tones with subtle vignetting for a retro, sun-kissed aesthetic
• Toaster: Creates a dramatic burnt edge effect with warm center highlights for an artistic frame
• Mayfair: Adds a warm pink tint with subtle vignetting for a soft, elegant enhancement

These preset filters let you quickly establish mood and visual style without editing the original image.

• Opacity: The Opacity slider controls the transparency of your image:
  • Move right for full opacity (1 = completely visible)
  • Move left for increased transparency (0 = completely transparent)

Border

The Border section provides comprehensive options to frame and enhance your image with customizable boundary styles:

State Selection

• Normal/Hover Tabs:
  • Normal (currently active): Configure border appearance in the default state.
  • Hover: Define how borders appear when visitors mouse over the image.

Border Type

• Currently, it’s showing a horizontal line indicator representing the selected border style.
• Typical options include None, Solid, Dashed, Dotted, Double, and more.

Border Color

• The color selector (showing white/transparent currently) allows you to choose any color for your border.
• Click to open a color picker with preset options and custom color selection.

Size Control

• Size: Sets the thickness of your border. You can set the size on desktop, tablet, and mobile devices.

Border Radius

• Radius: Controls how rounded the corners of your image and border appear. You can set the size on desktop, tablet, and mobile devices.

Effects

• Box Shadow: Toggle switch to add a drop shadow effect.

Advanced Settings #

Fine-tune spacing, responsive behavior, and add custom CSS for complete control over your image display.

Spacing

Precisely control the positioning and dimensions of your image:

• Block Margin: Define space around the exterior of your image container. Customize it differently for desktop, tablet, and mobile views.
• Block Padding: Add interior spacing between your image and its container borders. Perfect for creating breathing room within framed images.

Z-index

Control how your image interacts with overlapping elements:

• Adjust the stacking order of your image relative to other content
• Higher values bring the image forward in layered compositions
• Lower values position the image behind other elements

Responsive Condition

Selectively display your image based on device type:

• Hide on Desktop: Toggle to hide the image on larger screens
• Hide on Tablet: Toggle to hide the image on medium-sized devices
• Hide on Mobile: Toggle to hide the image on smartphones

Advanced HTML/CSS

These developer-focused options provide granular control:

• CSS ID: Assign a unique identifier to target this specific image with custom code
• Additional CSS Class(es): Apply custom styling classes to modify this particular image
• Block HTML: Select the semantic HTML element to wrap your image (default is div, but options include figure, section, etc.)

Example: Add classes like featured-image-shadow to apply custom effects.

Remember to click Update or Publish to save all changes to your page or post.