Media · Gutenberg
Image Box block for WordPress
A clickable image card with overlay title, hover effects, and a link.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A clickable image card with overlay title, hover effects, and a link.
Inspector panels on this block: Image, Content, Text Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Aspect Ratio” options: 16:9, 4:3, 1:1, 3:4, 21:9; “Link Target” options: Same tab, New tab; “Title Position” options: Overlay – Bottom, Overlay – Center, Below image; “Hover Effect” options: Zoom, Fade, Lift, Overlay, None.
Image Box has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Media → search “Image Box” (block name `blockenberg/image-box` in block.json). Style it in the sidebar after insert.
How to use Image Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Image Box”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Image. Set “Aspect Ratio”, “Content — Title”, “Subtitle”, “Link URL”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Aspect Ratio | Select control; the chosen value is saved on the block. Options: 16:9; 4:3; 1:1; 3:4; 21:9. block.json default: 75. Saved as `imageRatio`. |
| Content — Title | Text field in the inspector. block.json default: Category Name. Saved as `title`. |
| Subtitle | Text field in the inspector. Saved as `subtitle`. |
| Link URL | Text field in the inspector. Saved as `linkUrl`. |
| Link Target | Select control; the chosen value is saved on the block. Options: Same tab; New tab. block.json default: _self. Saved as `linkTarget`. |
| Title Position | Select control; the chosen value is saved on the block. Options: Overlay – Bottom; Overlay – Center; Below image. block.json default: over-bottom. Saved as `titlePosition`. |
| Hover Effect | Select control; the chosen value is saved on the block. Options: Zoom; Fade; Lift; Overlay; None. block.json default: zoom. Saved as `hoverEffect`. |
| Box Shadow | Select control; the chosen value is saved on the block. Options: None; Small; Medium; Large. block.json default: md. Saved as `shadow`. |
| Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`. |
| Width (%) | Numeric range control in the inspector. Range 20–100. block.json default: 100. Saved as `width`. |
| Show overlay | On/off toggle in the inspector. On by default. Saved as `overlay`. |
| Overlay Hover Opacity (%) | Numeric range control in the inspector. Range 0–100. block.json default: 60. Saved as `overlayHoverOpacity`. |
| Title Color | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Subtitle Color | Color control in the inspector. block.json default: rgba(255,255,255,0.85). Saved as `subtitleColor`. |
When this is the right block
- A clickable image card with overlay title, hover effects, and a link — that is the job of Image Box, not a generic content block.
- Use it when you need the editor control labeled “Aspect Ratio”, which exists on this block’s inspector.
- It matches pages about image, card, category.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Image Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Image Box”. It sits under Media. After insert, open Image and set “Aspect Ratio”, “Content — Title”, “Subtitle”, “Link URL”.
What makes Image Box different from other Blockenberg blocks?
A clickable image card with overlay title, hover effects, and a link. Inspector labels on this block include “Aspect Ratio”, “Content — Title”, “Subtitle”, “Link URL”.
Is the Image Box Gutenberg block free?
Yes. Image Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Image Box to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Image, Content, Text Colors).
Related media blocks
Image Accordion
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
Image Magnifier
Image with a zoom lens that follows the cursor on hover — perfect for product photography and detail shots.
Photo Card
A styled media card with a prominent photo, category tag, title, excerpt, and meta information.
Filter Gallery
Image grid with category filter buttons. Clicking a tag shows/hides matching items with animation.
Hotspot Image
Image with interactive hotspot pins that reveal tooltips on hover or click.
Image Filter
Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Image Box from the Gutenberg inserter.