---
title: "How to Create WordPress Image Gallery in Metro Layout?"
url: https://nexterwp.com/docs/create-wordpress-image-gallery-in-metro-layout/
date: 2023-06-17
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "An even grid treats every photo as equally important, which is rarely true. The metro layout in the Media Listing block mixes large and small tiles in a repeating pattern,..."
image: https://nexterwp.com/wp-content/uploads/2024/05/create-wordpress-image-gallery-in-metro-layout-1024x519.jpg
word_count: 357
---

# How to Create WordPress Image Gallery in Metro Layout?

## Key Takeaways

- Nexter Blocks Media Listing block creates a WordPress image gallery in a metro layout by selecting Images in the Type section and Metro in the Layout section.
- Media Listing block also shows a video gallery in a metro layout by selecting Videos from the Type section.
- Columns Manage tab lets the user manage the grid columns after adding images in the Content tab and choosing an image popup type from the Popup Layout dropdown.

An even grid treats every photo as equally important, which is rarely true.

The metro layout in the Media Listing block mixes large and small tiles in a repeating pattern, so your best shots get more room.

*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 Column** to control how wide the pattern runs.

![The Metro Column setting in the Columns Manage panel](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-metro-columns.webp)

- Pick a **Metro Style** for the arrangement, then publish.

![A metro gallery mixing one large tile with several smaller ones](https://nexterwp.com/wp-content/uploads/2026/09/media-listing-fe-metro.webp)

## How It Behaves

- The built in metro styles repeat a fixed pattern. In a four column gallery the first tile renders at double size and the rest fill in around it.- The pattern repeats as you add more images, so the arrangement stays consistent down the page.- Because tiles differ in size, the images are cropped to fill their tile rather than shown whole.- Clicking a tile opens the lightbox unless **Popup Layout** is set to **No**.

## Limitations

- **Pro only.**- You cannot choose which photo lands in the large tile other than by reordering your images.- Tiles crop to fill, so photos with the subject near an edge can lose it.- For a pattern of your own, use [the custom metro layout](https://nexterwp.com/docs/show-wordpress-image-gallery-in-custom-metro-layout/) instead.

## Troubleshooting

### Every tile is the same size

Check that **Layout** is set to **Metro** and that **Metro Column** is high enough for the pattern to have room. With very few columns there is nothing to vary.

### The wrong photo is in the big tile

The pattern is fixed, so reorder the images in the **Content** panel until the one you want falls into that position.

## Related Docs

- [Custom metro layout](https://nexterwp.com/docs/show-wordpress-image-gallery-in-custom-metro-layout/)- [Photo gallery grid](https://nexterwp.com/docs/create-wordpress-photo-gallery-grid/)- [Media Listing block: all settings](https://nexterwp.com/docs/add-media-listing-in-wordpress/)