Simple gallery

We have two simple gallery options: the basic WordPress gallery and a manual version (which allows for non-thumbnail images).

Jump to a component:

WordPress galleries

WordPress galleries create a grid of thumbnail images. The images can’t have captions.

Styling

These galleries use square thumbnail images, which automatically wrap to additional rows when necessary. They have a maximum of 4 columns.

Responsive behavior for WordPress galleries

There’s a maximum of 4 columns on medium screens and a maximum of 3 columns on small screens.

How to use for WordPress galleries

See how to create a WordPress gallery.

Development info for WordPress galleries

Stylesheet location: /_source/styles/components/_block-grid.scss

Example of WordPress galleries

4 or more images

  • Cat bathing paw
  • Cat sitting outside
  • Cat wearing glasses
  • Grumpy tabby cat
  • Cat
  • Cat in the dark

3 images

  • Cat bathing paw
  • Cat wearing glasses
  • Cat

2 images

  • Cat bathing paw
  • Cat

Manual galleries

Manual galleries create a grid of images with optional captions. You can specify the desired number of columns that show on large screens. They’re very similar to WordPress galleries, but they can use full-sized images rather than the cropped thumbnail version WordPress uses, and allow for captions.

Styling

Image widths and spacing are automatically calculated based on the specified number of columns, and images automatically wrap to additional rows when necessary. These galleries look better if all the images are the same width and height.

There can be 2–12 columns, but most galleries should have 2–4 columns.

Responsive behavior for Manual galleries

The number of columns decreases proportionally on medium screens. All options have 2 columns on small screens.

How to use for Manual galleries

Add in the HTML (see “development info”). It’s best to use images with the same ratio. The images can link to other pages, their WordPress attachment page, or not link at all. If you use a caption for one image, you should use captions for all of them.

Development info for Manual galleries

Stylesheet location: /_source/styles/components/_block-grid.scss

Put the images in an unordered list with the block-grid class on the <ul>. Don’t use any sizing or alignment classes on the images. Try to use images with the same ratio.

Use class="block-grid-x", where “x” is the number of columns on large screens. The number of columns on medium and small screens is determined automatically by the CSS.

<ul class="block-grid-x">
  <li><img src="" alt=""></li>
  <li><img src="" alt=""><p class="wp-caption-text">Caption</p></li> <!-- optional captions -->
  ...
</ul>
Example of Manual galleries

Images only
  • Cat bathing paw
  • Cat
  • Cat wearing glasses
  • Grumpy tabby cat
With captions
  • Cat

    Cat bathing paw

  • Cat

    Cat wearing glasses

  • Cat

    Grumpy tabby cat