Tiled Gallery Block

With Tiled Galleries you can display your image galleries in four styles: tiled mosaic, circular grid, square tiles, and tiled columns. The tiled mosaic and square tile layouts also have hover-over captions to save space while making captions accessible.

In order to use Tiled Galleries,  be sure to activate the Image CDN. To do that, go to Jetpack → Settings → Performance and activate Speed up image load times.

Here are some previews:

We also have an interactive post with these examples.

Creating a Gallery

To create a gallery, add a new Tiled Gallery block either with the in-post block selector or using the block selector in the post toolbar.

After adding the block, you can then add images to your gallery in the same way that you can add images to a regular image block: either upload from your computer or select them from your Media Library (or both). Once you’ve added images, you can use the block toolbar and the sidebar to add your customizations.

With the toolbar, you can use the change block type button to select the type of gallery you’d like to create. You can also change the block to one of the other image block types here.

The other buttons on the toolbar allow you to set the alignment for the gallery by selecting the appropriate option. You can use Edit to add and remove images.

You can deselect any you don’t want to include in the gallery by clicking on the X. Drag and drop the images to reorder.

Click Add to Gallery to add new images. When you’ve finished making changes to the images in the gallery, click Update gallery.

Block Sidebar

In the Block sidebar, you can expand the Styles section to change the gallery type and assign link behavior in the Tiled gallery settings section.

Tiled Galleries in the Classic Editor

To learn how to add galleries with the Classic Editor and use the layout options, see this gallery support page.

Define a specific width for your galleries

Tiled Galleries are built to fill your theme’s content width. You can define a specific $content_width value by adding the following code to your theme’s functions.php file:

if ( ! isset( $content_width ) ) {
    $content_width = 800;
}

If you do not feel comfortable editing theme files, you can also use this plugin: Custom Content Width.

If your theme doesn’t define a content width, Tiled Galleries will default to 500px wide. You can read more about the Content Width theme feature here.

If your theme already defines a $content_width value, but you would like to use a different value for Tiled Galleries only, you can use the tiled_gallery_content_width filter.

Display a single image in a gallery view

To make a single image on a post or page appear in a gallery view, edit the image and set the Link To display setting to “attachment page”. Now, when your image is clicked, it will appear in the gallery overlay view.

Tiled Gallery options do not appear

If you use the Cleaner Gallery plugin or a theme including this functionality, you won’t be able to use the Tiled Gallery features on your site. To solve this conflict, you can install this small plugin to deactivate Cleaner Gallery.

Missing Slideshow Option

If the Slideshow option is missing, you can get it back by enabling ‘shortcode embeds’ module in Jetpack.

Privacy Information

This feature is deactivated by default, as it accompanies our Image CDN feature. It can be deactivated any time by toggling the Serve images from our servers setting in the Performance & speed
at from Jetpack — Settings — Performance in your dashboard.

If you would like to toggle this feature independently of the Image CDN, you can follow the guide here.