---
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-04-14
author: "Aditya Sharma"
description: "Do you want to show your image gallery in a custom metro layout? With the Media Listing block from the Nexter Blocks, you can easily create a custom metro layout..."
image: https://nexterwp.com/wp-content/uploads/2024/05/show-wordpress-image-gallery-in-custom-metro-layout-1024x519.jpg
word_count: 304
---

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

## Key Takeaways

- Nexter Blocks includes the Media Listing block, allowing users to create a custom metro layout for image galleries.
- Users can select a Width:Height ratio in the Custom Layout field to define item dimensions, using values like 1:2 | 2:1 | 2:2.
- The Media Listing block supports both image and video galleries, enabling users to choose between Images and Videos in the Type section.

Do you want to show your image gallery in a custom metro layout? With the Media Listing block from the Nexter Blocks, you can easily create a custom metro layout for your WordPress image gallery.

*To check the complete feature overview documentation of the Nexter Blocks Media Listing block,** [click here](/docs/media-listing-block-settings-overview/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure its installed & activated to enjoy all its powers.***

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

To do this, add the Media Listing block on the page, 

1. select **Images** from the **Type** section, 

2. Then select the appropriate listing style and select **Metro** from the **Layout** section under the **Layout** tab.

![](https://nexterwp.com/wp-content/uploads/2023/08/media-listing-custom-metro-layout-new.gif)

> *Note: Similarly, you can show a video gallery in a metro layout by selecting ****Videos**** from the ****Type**** section.*

You can select the appropriate image popup type from the **Popup Layout** dropdown.

3. In the **Content** tab, select the appropriate content source and add images to the gallery.

Then go to the **Columns Manage** tab, and from the **Metro Column** dropdown, select your desired column number.

After that, select **Custom** from the **Select Style** section, then you’ll see a **Custom Layout** field where you have to add the layout structure value.

You have to enter the value in a Width:Height ratio to set the width and height of an item then you can use separator (|) to target multiple items. It will automatically create a loop based on your entered value.

For example, if you enter a value like this 1:2 | 2:1 | 2:2, here it specifies the width and height of three items separately, then the value will automatically loop (3 items each) for the remaining items.

> *Note: You have to do some trial and error to get your desired layout.*

Also, read [How to Create WordPress Photo Gallery Grid](https://nexterwp.com/docs/create-wordpress-photo-gallery-grid/).

## Frequently Asked Questions

**Q: What should I do if the Media Listing block isn't displaying my images?**
A: If the Media Listing block isn't showing your images, first ensure that the block is installed and activated as part of the Nexter Blocks. Check the Content tab to confirm that you've selected the correct content source and added images to the gallery. If everything seems correct, try refreshing the page or clearing your cache, as sometimes changes may not appear immediately.

**Q: What is the best way to set the width and height for items in the custom metro layout?**
A: To set the width and height for items in your custom metro layout, enter a Width:Height ratio in the Custom Layout field. Use a format like '1:2 | 2:1 | 2:2' to specify different dimensions for multiple items. This allows for a tailored layout that can enhance the visual appeal of your gallery.

**Q: Are there any limitations when using the Media Listing block for galleries?**
A: One limitation to be aware of is that you may need to experiment with the layout settings to achieve your desired appearance. The Custom Layout field requires trial and error to find the right Width:Height ratios that work best for your specific images. This can be a bit time-consuming but is necessary for optimal results.

**Q: How do I ensure my custom metro layout looks good on mobile devices?**
A: To ensure your custom metro layout looks good on mobile devices, test the layout after setting the Width:Height ratios. Adjust the column numbers in the Columns Manage tab to optimize the display for smaller screens. This is crucial as mobile users may have a different viewing experience, and a responsive design will enhance usability.