Tutorial

Meow Gallery turns your photos into beautiful, fast galleries: tiles, masonry, justified rows, squares, cascades, carousels and even a map. It works with the images you already have in WordPress, opens them in Meow Lightbox if you use it, and stays light on your pages.

In 30 seconds

  1. Add a Meow Gallery block to a post, pick your photos, choose a layout.
  2. Or build reusable galleries in Meow Apps → Gallery → Galleries & Collections.
  3. Set the default look of each layout once, in the Layouts tab.
JXTG Nippon Oil & Energy, Arida, WakayamaUsa Shrine, Usa, OitaTayo Park, Himeji, HyogoZao Snow Monsters, Zao, YamagataOtagi Nenbutsu-ji, Kyoto, KyotoOkawachiyama, Imari, SagaTassawa Fudo, Inawashiro, FukushimaHiyodori-zaka Bamboo Forest, Sakura, ChibaRyushu-in, TokyoMount Hachijo-Fuji, Hachijo, TokyoGujo Hachiman, Gujo, GifuSakura with Water Pump, Koriyama
  1. In a post or a page, add the Meow Gallery block.
  2. Pick your photos from the Media Library, or upload new ones.
  3. In the block sidebar, choose the layout, the order and the captions. The preview follows.
The Meow Gallery block in the editor with its settings: layout, animation, link, order and the manager galleries

Already using the classic WordPress gallery shortcode in your posts? Meow Gallery takes it over automatically (you can turn that off in the settings), so those galleries get the new look without editing a single post. The layouts are all on the live layouts page.

2. Reusable galleries and collections

In Galleries & Collections, create a gallery once and show it anywhere with the shortcode the manager gives you, ready to copy (it looks like [gallery id="â€Ķ"]). Change the gallery there, and every page that shows it follows. Group several galleries into a collection ([meow-collection id="â€Ķ"]) to show them as cards, perfect for a portfolio or a travel blog.

Meow Gallery Galleries & Collections: four reusable galleries with their shortcodes
A collection on a page: four galleries shown as cards, Old towns, Shrines & temples, Nature and Curious places

More in the docs: introduction ↗ and collections ↗.

3. Choose and tune the layouts

Six layouts are free: Tiles, Masonry, Justified, Square, Cascade and Horizontal. Each one has its default settings (spacing, row height, columns) in the Layouts tab, so every gallery looks right without touching it. You can still change any of them for a single gallery.

Meow Gallery Layouts tab: the default settings of Tiles, Justified, Masonry, Cascade, Horizontal and Square

Cascade is made for a mix of portrait and landscape photos: two portraits sit side by side, a landscape gets the whole width. See it, and every other layout, on the live layouts page.

4. Go further (Pro)

  • CarouselA sliding gallery with arrows and dots, great for a homepage or a product.
  • MapYour photos pinned where they were taken, from their GPS data.
  • Infinite scrollBig galleries load more photos as visitors scroll.
The Map layout: twenty photos pinned across Japan where they were taken

5. The shortcode

Everything the block does, the shortcode does too, for themes and page builders: [gallery ids="1,2,3" layout="justified"]. The most useful attributes:

  • layout: tiles, masonry, justified, square, cascade, horizontal, carousel or map.
  • captions: none, on-hover or always.
  • orderby: date, modified, title, filename, menu, ids, random or none, with order asc or desc.
  • Sources other than a list of IDs: id (a gallery from the manager), collection, tags, posts, latest_posts.

The full list is in the docs: shortcode parameters ↗ and dynamic sources ↗.

For developers

The mgl_sort filter lets you decide the order of the images yourself. It receives the list of image IDs, the images, the layout and the shortcode attributes. For example, to show the newest uploads first:

add_filter( 'mgl_sort', function ( $ids, $images, $layout, $atts ) {
  usort( $ids, function ( $a, $b ) {
    return get_post_time( 'U', true, $b ) <=> get_post_time( 'U', true, $a );
  } );
  return $ids;
}, 10, 4 );

For a random order, there’s no need for code: use orderby="random".

Stuck somewhere? The docs ↗ go deeper, and our support is here for the rest.