Media · Gutenberg
Image Collage block for WordPress
Creative overlapping image composition with up to 5 images, custom rotations, positions, frames and a floating overlay card. Perfect for hero and about sections.
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
Creative overlapping image composition with up to 5 images, custom rotations, positions, frames and a floating overlay card. Perfect for hero and about sections.
Inspector panels on this block: Preset, Canvas, Frame & Effects, Overlay Card, Overlay Card Colors, Images. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout preset” options: Scattered, Stack, Grid; “Align canvas” options: Left, Center, Right; “Position” options: Bottom right, Bottom left, Top right, Top left, Center; “Frame” options: Use global.
Where to find it
Gutenberg inserter → Media → search “Image Collage” (block name `blockenberg/image-collage` in block.json). Style it in the sidebar after insert.
How to use Image Collage block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Image Collage”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Preset. Set “Layout preset”, “Align canvas”, “Canvas height (px)”, “Max width (px)”.
- Check the published page. The view script reads HTML data attributes: data-animate-in. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout preset | Select control; the chosen value is saved on the block. Options: Scattered; Stack; Grid. block.json default: scattered. Saved as `preset`. |
| Align canvas | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align`. |
| Canvas height (px) | Numeric range control in the inspector. Range 200–900. block.json default: 460. Saved as `canvasHeight`. |
| Max width (px) | Numeric range control in the inspector. Range 300–1400. block.json default: 680. Saved as `canvasMaxWidth`. |
| Shadow intensity | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `shadowIntensity`. |
| Frame padding (px) | Text field in the inspector. block.json default: 10. Saved as `framePadding`. |
| Hover lift effect | On/off toggle in the inspector. On by default. Saved as `hoverLift`. |
| Animate in on scroll | On/off toggle in the inspector. On by default. Saved as `animateIn`. |
| Show overlay card | On/off toggle in the inspector. Off by default. Saved as `showOverlayCard`. |
| Headline | Text field in the inspector. block.json default: Our Story. Saved as `overlayCardText`. |
| Subtext | Text field in the inspector. block.json default: Since 2012. Saved as `overlayCardSubtext`. |
| Position | Select control; the chosen value is saved on the block. Options: Bottom right; Bottom left; Top right; Top left; Center. block.json default: bottom-right. Saved as `overlayCardPos`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `overlayCardBg`. |
| Text color | Color control in the inspector. block.json default: #1e293b. Saved as `overlayCardColor`. |
| Accent line | Color control in the inspector. block.json default: #6c3fb5. Saved as `overlayCardAccent`. |
| Frame / polaroid bg | Color control in the inspector. block.json default: #ffffff. Saved as `frameColor`. |
| Section background | Color control in the inspector. Saved as `bgColor`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 40. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 40. Saved as `paddingBottom`. |
| Frame | Select control; the chosen value is saved on the block. Options: Use global. |
| Rotation (°) | Numeric range control in the inspector. Range -20–20. |
| Offset X (%) | Numeric range control in the inspector. Range 0–80. |
| Offset Y (%) | Numeric range control in the inspector. Range 0–80. |
| Scale (%) | Numeric range control in the inspector. Range 50–150. |
| Z-index | Numeric range control in the inspector. Range 1–10. |
| Width (px) | Numeric range control in the inspector. Range 80–600. |
| Height (px) | Numeric range control in the inspector. Range 60–500. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate-in.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Creative overlapping image composition with up to 5 images, custom rotations, positions, frames and a floating overlay card. Perfect for hero and about sections — that is the job of Image Collage, not a generic content block.
- Use it when you need the editor control labeled “Layout preset”, which exists on this block’s inspector.
- It matches pages about collage, images, overlap.
- 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 Collage block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Image Collage”. It sits under Media. After insert, open Preset and set “Layout preset”, “Align canvas”, “Canvas height (px)”, “Max width (px)”.
What makes Image Collage different from other Blockenberg blocks?
Creative overlapping image composition with up to 5 images, custom rotations, positions, frames and a floating overlay card. Perfect for hero and about sections. Inspector labels on this block include “Layout preset”, “Align canvas”, “Canvas height (px)”, “Max width (px)”.
Is the Image Collage Gutenberg block free?
Yes. Image Collage ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Image Collage 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: Preset, Canvas, Frame & Effects, Overlay Card).
Related media blocks
Image Cards
A responsive grid of rich cards with images, category tag, title, description and CTA. Perfect for blog previews, portfolio, services or team showcases.
Image Gallery
Responsive image gallery with grid/masonry layouts, lightbox, and hover effects.
Image Slider
A responsive image carousel with captions, autoplay, arrows, dots and touch support.
Thumbnail Gallery
Large main image with a scrollable thumbnail strip navigation.
Before / After Grid
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Before/After Slider
Compare two images with a draggable slider handle.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Image Collage from the Gutenberg inserter.