Use Photo Gallery "Grid" Block
With the Photo Gallery “Grid” Gutenberg block (immomakler/gallery-grid) you embed the images of a property in the alternating grid layout — independently of the full detail view. Every four photos form a block, with the arrangement (large image left / large image right) alternating automatically. The block matches the functionality and output of the Elementor widget of the same name.
Requirements
Section titled “Requirements”- WordPress with the Gutenberg editor (WordPress 5.0 or later)
- WP-ImmoMakler (any edition)
Inserting the block
Section titled “Inserting the block”-
Open a page or template
In your website’s backend (wp-admin), open a page, a post or a block-based template for the Property post type (requires a block theme or the Site Editor).
-
Insert the block
Click the + icon and search for Photo Gallery Grid, or navigate to the Widgets category. Insert the block.
-
Configure the block
Adjust the options in the Layout side panel. The editor preview updates live after each change.
-
Save and publish
Save or update the page. The grid is immediately available on the frontend.
Settings
Section titled “Settings”All options are located in the Layout side panel.
Block aspect ratio
Section titled “Block aspect ratio”Sets the overall aspect ratio of a 4-photo block.
| Value | Ratio |
|---|---|
| 4:3 | Classic landscape |
| 3:2 | Photographic landscape |
| 2:1 | Panorama (default) |
| Golden ratio | 1.618:1 |
| 1:1 | Square |
Row height distribution
Section titled “Row height distribution”Controls how the total height of the block is distributed between the upper and lower row.
| Value | Distribution |
|---|---|
| 1:1 | Both rows equal height |
| 2:1 | Upper row twice as tall (default) |
| Golden ratio | Upper row taller by the golden ratio |
Spacing
Section titled “Spacing”Spacing between individual images within a block and between blocks. Configurable in px (default: 20 px), em, rem, vw or vh.
Limit number of images
Section titled “Limit number of images”Restricts the total number of images displayed.
| Value | Description |
|---|---|
| Unlimited | All available images are shown (default) |
| 4 / 8 / 12 / 16 | Only the first N images are shown |
Image filter
Section titled “Image filter”Restricts which images from the property’s media archive are shown.
| Value | Description |
|---|---|
| All images | Shows all images of the property (default) |
| All except floor plans | Hides floor plans |
| Floor plans only | Shows only floor plan images |
Grid layout in detail
Section titled “Grid layout in detail”Each block contains exactly four photos in a 4-column CSS grid. The arrangement alternates with each block:
- Odd blocks (1st, 3rd, …): Photo 1 top-left (2 columns wide), photo 2 right (2 columns, spanning both rows), photos 3 and 4 bottom-left at 1 column each.
- Even blocks (2nd, 4th, …): Photo 1 left (2 columns, spanning both rows), photo 2 top-right (2 columns wide), photos 3 and 4 bottom-right at 1 column each.
If a property has fewer than four images (or the last group is incomplete), only the available images are placed — the remaining grid cells stay empty.
Editor preview
Section titled “Editor preview”The Gutenberg editor shows a server-side rendered live preview of the grid directly in the editor. If no property is available in the page context (e.g. on a regular page), the block falls back to a sample property.
You might also be interested in
Section titled “You might also be interested in”- Use Gallery Block — Image gallery as slideshow or static grid
- Create Single Page — Complete detail view as a block template
- Image gallery: Slideshow with thumbnails
- Image gallery: Static image