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
3 images
2 images
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>
