Gallery

Learn how to add and customize a gallery block to display multiple images in an organized and visually appealing layout.

The Gallery block makes it super easy to add multiple photos and arrange them neatly in a gallery format. You have full control over the number of columns and image sizes within the gallery.

To add a Gallery block:

  • Click on the ‘+’ icon for Block Inserter.
  • Select ‘Gallery’ block from the options.
  • Alternatively, type /gallery and hit Enter.

Block toolbar

Each block comes equipped with its own set of tools to tweak and tune it right from the editor.

The Gallery block features toolbars for individual images and the entire gallery. Here are the key options in the Gallery block toolbar.

Transform to

The ‘Transform to’ button lets you change an image into other things like ‘Image’, ‘Columns’ or ‘Group’ easily. This button changes how your text looks so you can make your writing look just right with a simple click.

Drag & Move

Use the six-dot icon to drag your block, or the up and down arrow buttons let you move a block one position higher or lower.

Alignment

The ‘Alignment’ tool lets you adjust the width of your gallery block. Simply click the icon, and a menu will appear with options. You can set your image to no alignment, max 1200px wide, or full width. This feature helps you customize your gallery to look exactly how you want with ease. Additionally, you can align your gallery to the left, center, or right.

Enhance your gallery by adding a caption. This feature allows you to provide context or additional information about the entire gallery, making your content more informative and engaging.

Add more images

Add more images to your gallery to enrich your visual content by clicking the ‘Add’ button. You can select new images from ‘Open Media Library’ or ‘Upload’.

More Options

The More options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate, remove, or edit your block as HTML.

Block settings

Settings

  • Resolution: Select the desired size of the source images to ensure optimal display quality.
  • Link To: Use the dropdown box to choose where your images link to: ‘Attachment page’, ‘Media file’, or ‘None’.
  • Crop: Toggle the crop option to fit images to a uniform size.
  • Order: Toggle the option to randomize the order of images in your gallery.

Styles

  • Margin: Adjust the outer spacing around your gallery to create the desired separation from other elements on the page.
  • Block spacing: Set the spacing between individual images within your gallery to ensure a balanced and aesthetically pleasing layout.

Advanced

Add HTML anchors or CSS classes for unique styles or navigation. The HTML anchor settings allow you to create a unique anchor text for the Group block, enabling you to link it to another web page.

Additional resources