---
title: "How to Show WordPress Image Gallery in Custom Metro Layout?"
url: https://nexterwp.com/docs/show-wordpress-image-gallery-in-custom-metro-layout/
date: 2023-08-09
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "The built in metro styles are fixed patterns, and sooner or later you want a different one. The Media Listing block lets you write the pattern yourself as a short..."
image: https://nexterwp.com/wp-content/uploads/2024/05/show-wordpress-image-gallery-in-custom-metro-layout-1024x519.jpg
word_count: 445
---

# How to Show WordPress Image Gallery in Custom Metro Layout?

## Key Takeaways

- Nexter Blocks Media Listing block creates a custom metro layout for a WordPress image gallery by selecting Images in the Type section and Metro in the Layout section.
- Media Listing block supports a video gallery in a metro layout by selecting Videos from the Type section.
- Custom Layout field uses Width:Height ratios like 1:2 | 2:1 | 2:2, and the pattern loops automatically for remaining items.

The built in metro styles are fixed patterns, and sooner or later you want a different one.

The Media Listing block lets you write the pattern yourself as a short list of width to height ratios.

*For every Media Listing setting in one place, see the [Media Listing block guide](https://nexterwp.com/docs/add-media-listing-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/listing/wordpress-image-gallery/)

## Before You Start

- **Edition:** **Pro** — the Media Listing block is part of Nexter Blocks Pro.- **Block to enable:** Media Listing, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your images uploaded:** add them to the Media Library first so you can pick them straight from the block.

## Steps

- Add the **Media Listing** block to your page and click **Design from Scratch**.

- In the **Layout** panel, set **Type** to **Images**.

![The Layout panel with the Type setting set to Images](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-type.webp)

- Open **Content** and pick your images with **Select Option** on **Normal**.

![The Content panel with Select Option set to Normal](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-content-normal.webp)

- Still in **Layout**, set **Layout** to **Metro**.

![The Layout setting with Metro selected](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-layout.webp)

- In **Columns Manage**, set **Metro Style** to **Custom**. The **Custom Layout** field appears underneath.

![The Custom Layout field shown once Metro Style is set to Custom](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-metro-custom.webp)

- Type your pattern as width to height ratios separated by vertical bars, for example **1:2 | 2:1 | 2:2**, then publish.

![A metro gallery using a custom tile pattern](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-fe-metro-custom.webp)

## How the Pattern Is Written

Each entry is one tile, written as **width:height** in grid units and separated by a vertical bar. The pattern repeats once it runs out of entries.

| Entry | Tile it produces |
| ----- | ---------------- |
| 1:2 | One unit wide and two tall, so a portrait tile |
| 2:1 | Two units wide and one tall, so a landscape banner |
| 2:2 | A large square tile, twice the size of the default |
| 1:1 | A default sized square tile |

> *Set Metro Style to Custom for each device you want it on. The Custom Layout field only shows for the device you are currently editing, so tablet and mobile keep their own pattern.*

## How It Behaves

- With **1:2 | 2:1 | 2:2** the first three tiles render tall, wide and large in that order, and the fourth tile starts the pattern again.- Ratios are relative to the base tile size, which comes from **Metro Column**.- Images are cropped to fill their tile, so the ratio decides the shape, not the photo.- An entry with no matching image is simply skipped.

## Limitations

- **Pro only.**- **Custom Layout** stays hidden until **Metro Style** is set to **Custom** for the device you are editing.- The field takes no units or percentages, only whole number ratios.- Very wide ratios can overflow the column count you set, so keep the numbers small.

## Troubleshooting

### The Custom Layout field is not there

Set **Metro Style** to **Custom** first, and check you are on the device you meant to edit.

### The pattern has no effect

Check the separators. Entries are split on the vertical bar, and each entry needs a colon between the two numbers, as in **2:1**.

## Related Docs

- [Metro layout gallery](https://nexterwp.com/docs/create-wordpress-image-gallery-in-metro-layout/)- [Masonry image gallery](https://nexterwp.com/docs/create-a-masonry-image-gallery-in-wordpress/)- [Media Listing block: all settings](https://nexterwp.com/docs/add-media-listing-in-wordpress/)