Blocks » Gallery Block

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

Table of Contents

1. Video Tutorial
2. Add the Gallery Block
3. Add Your Images
4. Add Images to Existing Gallery
5. Block Toolbar
6. Block Settings
   1. Columns
   2. Crop Images
   3. Link Settings
7. Reorder Images in a Gallery
8. Add Image Captions

Video Tutorial

↑ Table of Contents ↑

Add the Gallery Block

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.

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Add Your Images

When you add a Gallery block, you’re given 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.

↑ Table of Contents ↑

Add Images to Existing Gallery

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.

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

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.

↑ Table of Contents ↑

Block Toolbar

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

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:

• Change the gallery to another block such as Image, Slideshow, or another gallery format.
• Align left, right, or center (and wide and full widths if supported by the theme.)
• Add to add more images
• More options

📌

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.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

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:

A gallery without cropped images:

Link Settings

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

• Attachment Page: This will lead anyone who clicks on your image to your site’s attachment page. This is an informational page about your image, which includes the image, the caption, the image description, and a comment field.
• Media File: This loads the images in a full-screen carousel, which your visitors can go through one image at a time. View Media Settings to adjust the carousel settings.
• None (default): This makes your images unclickable, so they don’t link to anything at all.

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):
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.

↑ Table of Contents ↑

Reorder Images in a Gallery

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.

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:

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:

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.

Copy, duplicate, or delete images using the expanded toolbar settings.

↑ Table of Contents ↑

Add Image Captions

After adding images to your gallery, you can caption each image by clicking on that image, then clicking the Add caption area:

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 tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

The advanced section lets you add a CSS class to your block.

Versatile plans and pricing

• Free

  

  Best for students

• Personal

  

  Best for hobbyists

• Premium

  

  Best for freelancers

• Business

  

  Best for small businesses

Choose a plan