Use the Gallery block to display multiple photos together. The Gallery block contains individual Image blocks for each image and arranges them attractively.
In this guide
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.
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.
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.
When you click on the block, a toolbar of options will appear:
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.
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:
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:
- Click on the white space between the images.
- Select the Gallery block using List View.
- Select
Galleryfrom the breadcrumbs at the bottom of the screen:
The Gallery block has the following settings:
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.
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:
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:
- Click on the image you wish to link.
- In the toolbar that appears, click the link icon (it looks like a link from a chain):
- Click the pencil icon to edit the link.
- Paste the URL you wish to link the image to, or use the search box to select a published page on your site.
- 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.
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:
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.
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.
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.
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.
