How to Show WordPress Image Gallery in Custom Metro Layout?

Key Takeaways

  • Utilizes the Media Listing block from Nexter Blocks to create a custom metro layout for WordPress image galleries.
  • Selects 'Images' from the Type section and 'Metro' from the Layout tab to configure the gallery display.
  • Enters a Width:Height ratio in the Custom Layout field to define item dimensions and achieve desired layout structure.
Table of Contents

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.

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

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.

How to Show WordPress Image Gallery in Custom Metro Layout?

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.

About the Author

Photo of Aditya Sharma CMO of Nexter
CMO at POSIMYTH Innovations · Nexter · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!