How to add a Gallery Block

The Gallery block allows you to easily add multiple photos and automatically arrange them in a gallery. You can control the number of columns and the size of the images in the gallery.

The Gallery block can be added to a page by clicking on the (+) Block Inserter icon and selecting the Gallery block.

Alternatively, you can type /gallery and press enter.

Block Toolbar

Each block has its own block-specific controls that allow you to manipulate the block right in the editor.

The gallery block has a toolbar for the individual images as well as a toolbar for the entire gallery block. 

For the gallery block

The main options in the Gallery Block Toolbar are:

• Transform to
• Block moving handles
• Change alignment
• Add button
• More options

Block moving handles

The block-moving handles allow you to move the block up and down the editor. Use the six dots icon to drag and drop the Gallery block and place it anywhere on the page. Alternatively, click on the up and down arrows to move the block up or down.

Adding images

The Add button in the gallery block lets you add images to the gallery. You have two options to add images to the gallery block: Open Media Library and Upload.

Upload allows you to upload a new image or multiple images to the Gallery block and to your media library. Media Library lets you select from previously uploaded images in your Media Library.

You can also drag & drop multiple images at the same time from your explorer or finder window into the gallery block.

Toolbar for images in the gallery

Move images

After you add images to the gallery block, you can change the order of images in the gallery. Click on an image and in the block toolbar use the move left and move right arrow handles to arrange the images as you like.

Add a link to an image

To add a link to an image, click the link icon in the block toolbar for the selected image. You can paste a URL for the link, type in the text field to search for a page. You can also link to the Media file of the image or the Attachment Page for the image.

You can change the link settings by clicking the down arrow in the top right corner. You can choose to open the link in a new tab, add CSS class for the link and link rel attribute, if needed.

Crop an image

Here’s a video showing how you can crop an image in the gallery, zoom in, rotate and crop by keeping the aspect ratio of the selected image.

Replace an image

You can replace images in your gallery with the Replace button in the block toolbar of the selected image. This will allow you to upload a new image to the media library or select another image from your library.

Remove an image

To remove an image from your gallery, select the image in the gallery and either click delete on your keyboard or select the three-dot menu on the block toolbar of the selected image and select “Remove Image”.

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon.

For the gallery block

Gallery settings

Columns

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

Select between 1 column and 8 columns. Keep in mind that you can only select as many columns as you have images.

This means that 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. Even if you add more images to the Gallery, you will not be able to add more than 8 columns.

Your images will automatically arrange themselves to look good no matter how many columns you select. Try changing the setting and see what you like best.

To change the setting you can either manually enter the number of columns you want or visually change the number by using the slider to drag the number up and down.

Crop images

You can select whether or not you’d like all of your images to be cropped in your Gallery block.

This option is useful if you have images of varying sizes and shapes. Cropping them will make the images in each row of the gallery the same size. You can toggle this option on and off to see which way you prefer.

Link to

You have 3 options for linking the images in your gallery: Attachment Page, Media File, and None. This determines what happens when your visitors click on the images in your gallery. You can also add custom links for each image from the block toolbar of the selected image.

• Attachment page: Selecting this option will link the image to its WordPress media 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: Selecting this option will link the image to the image file in the original size in a new browser window.
• None: Selecting this option will not link the image to anything.

Image sizes

The Image Size setting allows you to set all the images to the size you choose.

• Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
• Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
• Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
• Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.
• Note: For these images sizes to work, your theme needs to support them.