The Blocksify Image block displays one image with caption, link, sizing, aspect-ratio, and per-instance styling controls. Use it when adding visual content to a Blocksify page or tuning output for performance.
At a glance
| Block name | blocksify/image |
| Role | Displays a single image with a caption, link, crop, alignment, and style controls. |
| Source | A static Media Library image, an external URL, or a Dynamic image. |
| Caption | Editable text directly below the image on the canvas. |
| Link choices | None, Media file, or Custom URL. |
| Key supports | Spacing, border, radius, shadow, sizing, overflow, position, z-index, visibility, and advanced settings. |
Where to find it
- Open the block inserter and choose Image. The Image block is added to the page.
- Use the Image picker to choose or replace media.
- Open Content to adjust image size, aspect ratio, crop, link, and caption alignment.
When to use it
Use Image for a single photo, illustration, product image, or editorial visual that needs Blocksify’s shared inspector controls. Image galleries are handled by a separate Image Gallery block.
Wrap the Image in layout blocks when it needs shared background treatment or a more complex arrangement with text and buttons.
Media, caption, and links
The Content panel starts with the Image row. For a Media Library image, the row shows its title and the block copies its alternative text and dimensions when you select it.
| Control | What it does |
| Image | Chooses, replaces, or removes a static media item. |
| Dynamic image | Uses Dynamic Data to show the post’s featured image or the post author’s avatar. The canvas previews the resolved image. |
| Add caption | Edits caption text directly on the canvas below the image. |
| Link to | Offers None, Media file, and Custom URL. Media file always opens the full-size attachment, even when Image size uses a smaller file. |
| Open link in a new tab | Opens the active media or custom link in a new browser tab. |
| Caption alignment | Aligns the caption Left, Center, or Right without moving the image wrapper. |
Sizing and aspect ratio
The Sizing panel controls the displayed width, height, and minimum or maximum dimensions. These values are separate from the generated image file selected in Content.
| Control | What it sizes |
| Width, Min W, Max W | The outer image wrapper, including the space available to its caption. |
| Height, Min H, Max H | The image itself. A caption keeps its natural height instead of being clipped by an image height. |
Use the Content panel to select the generated image file and control its crop.
- Image size: Medium, Large, Thumbnail, Medium large, 1536×1536, the three WooCommerce sizes, or Full.
- Aspect ratio: Original, 1:1 — Square, 4:3 — Standard, 3:4 — Portrait, 3:2 — Classic, 2:3 — Classic Portrait, 16:9 — Wide, 9:16 — Tall, or Custom.
- Object fit: Cover, Contain, Fill, or Scale.
- Object position: For Cover or Contain, drag the focal point to keep the important area visible when the image is cropped.
Style capabilities
Image styling uses Content plus separate visual and layout panels rather than one Style panel. Borders, radius, shadow, and spacing apply to the image itself.
| Panel | What it controls |
| Content | Image source, Image size, Aspect ratio, Object fit, Object position, Link to, and Caption alignment. |
| Sizing | Responsive width, height, minimum, and maximum values. |
| Spacing | Padding and margin on the image. |
| Positioning | Overflow, Z-Index, and Position for the image wrapper. |
| Border, Radius & Shadow | Border, radius, and shadow on the image. |
| Visibility | Shows or hides the complete image and caption together by device. |
| Advanced | HTML tag, HTML anchor, and additional CSS. |
Tips
- Use the registered image size closest to the display need.
- Set an aspect ratio before using object fit or focal position.
- Use captions inline on the canvas instead of looking for a caption field in the inspector.
- Use a wrapping Container when the image needs a background treatment.