Back to Support Content and Media Blocks Gallery Block

Gallery Block

Use the Gallery block to display multiple photos together. The Gallery block contains individual Image blocks for each image and arranges them attractively.

Video Tutorial

To add the Gallery block, click on the + Block Inserter icon and search for “gallery”. Click it to add the block to the post or page.

💡

Using your keyboard, you can also type /gallery on a new line and press enter to quickly add a new Gallery block.

GIF showing the process of typing /gallery to insert a Gallery block.

For more, visit our detailed instructions on adding blocks.

Add Your Images

When you add a Gallery block, you’re given two options: Upload and Select Images:

The Gallery block shows two options: Upload and Select Images.

Upload allows you to upload a new image or multiple images from your computer to your website.

Select Images lets you choose from previously uploaded images in your Media Library, or choose from Google Photos, the Pexels Free Photos library, or Openverse.

You can add more images to a gallery you have already created by doing the following:

Step 1: Select the Gallery block. There are a couple of ways to select the Gallery block.

Either, click on an image in the Gallery block and then click the Select Gallery icon in the toolbar above the image.

Or, click List View at the top left of your editor, and select the Gallery block from the outline.

A box drawn around the List View icon with an arrow pointing to the "Gallery" block in the List View sidebar.

Step 2: Click Add in the toolbar above the Gallery block to add more images.

A box drawn around the Add link in the Gallery block toolbar.

Once you click Add you can select Open Media Library to add images you have already uploaded (or access the free media options) or Upload to upload new images to your gallery.

Block Toolbar

When you click on the block, a toolbar of options will appear:

A gallery is selected and the alignment options expanded.
The gallery toolbar supports multiple alignments including wide and full width depending on the theme.

The Gallery block has the following options in its toolbar:

📌

If you do not see the option to change the width of the block to wide or full-width and your theme supports these options, it is possible the block has been added to a Group block. You can learn more about the Group block here.

Block Settings

You will find additional block settings in the right sidebar when you click on the block. If you do not see the sidebar, you may need to click the Settings icon in the top-right corner to bring up the settings. This icon looks like a square with two uneven columns:

The settings icon in the Editor with a black background and the tooltip "Settings" below it.
Click the Settings icon to open the block settings

When you click on an image in the gallery, you will have selected an individual Image block inside the gallery. If you need to navigate back to the Gallery block settings, there are several ways to do so:

  1. Click on the white space between the images.
  2. Select the Gallery block using List View.
  3. Select Gallery from the breadcrumbs at the bottom of the screen:

The Gallery block has the following settings:

Columns

You can choose how many columns your Gallery block will have.

You can select between 1 column and 8 columns. You can only select as many columns as you have images, so if you add 4 images, you’ll be given the option for a maximum of 4 columns. This number will increase as you add more images until you reach the maximum of 8.

Your images will automatically arrange themselves into the best configuration according to the number of columns you select. Try changing the number of columns to see what you like best.

Crop Images

You can select whether or not you’d like your gallery images to be cropped. This option is useful if you have images of varying sizes and shapes.

If the images in your gallery are different sizes, cropping the images will give the images a more uniform appearance as shown below. If you do not wish to crop the images but still want the images to appear the same size, make sure to upload image files that already have the same size.

A gallery with cropped images:

An example of a gallery with cropped images, showing all images with a uniform size.

A gallery without cropped images:

An example of a gallery with uncropped images, showing uneven image sizes.

In the Gallery block settings, there are three options for linking the gallery:

Alternatively, you may wish to link individual images in the gallery to different pages. You can link an image by following these steps:

  1. Click on the image you wish to link.
  2. In the toolbar that appears, click the link icon (it looks like a link from a chain):image toolbar with the link icon highlighted
  3. Click the pencil icon to edit the link.
  4. Paste the URL you wish to link the image to, or use the search box to select a published page on your site.
  5. Press Enter on your keyboard to confirm the change.

For more on linking individual images, see our Image block guide.

The images are added to the Gallery in the order that you selected them originally. You’ll notice a number next to each image when you select it. This number indicates what order the image will appear in your Gallery block.

GIF showing how to Reorder Images in the Gallery

You can also reorder the gallery images after you have created the gallery. To do this, click on any gallery image and use the left/right arrows to reorder the images:

Reordering images in the Gallery block by using the arrows in the Block Toolbar above the Gallery.

Alternatively, you can click on an image and choose the drag option (the icon looks like six dots) from the toolbar to move your image:

An arrow pointing to the Move icon in the Block Settings toolbar.
Use the Drag option in the toolbar to move images.

To copy images, duplicate them, or remove an image, click on the three dots on the upper right of the toolbar and select the option you desire.

An arrow pointing to an expanded More Settings menu in the Block Settings toolbar.
Copy, duplicate, or delete images using the expanded toolbar settings.

Add Image Captions

After adding images to your gallery, you can caption each image. Click an image in your gallery, and click the caption icon in the Block Settings Toolbar above the image. You can remove captions by clicking the icon again.

A box drawn around the caption icon in the image Block Settings toolbar in the Gallery.

If you have written captions for images in the Media Library and then add the Gallery block, the Gallery block will show the captions you wrote. However, if you add captions to the images in the Media library after adding the Gallery block, those captions will not appear in the Gallery block. In that case, you can either type the captions manually on the Gallery block or remove and re-add the block so that it will use the captions from the Media library.

Advanced

The advanced settings allow you to create an HTML anchor for the current block which can be used to create a hyperlink to it, add additional CSS classes and also add/remove space from top/bottom of the block.

Learn more about HTML anchors here and learn more about adding additional CSS classes to blocks here.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!