A gallery is a great way to showcase multiple images at once. The best part is that when the user clicks on one of the images, it uses a lightbox to display a larger version of the image or video. The lightbox fills the screen and dims out the rest of the webpage, similar to a pop-up window but better. How cool is that? Here’s an example:

I’m sure you are comfortable with how to insert an image on your blog post or page using the Add Media feature. In case you are not, you can learn more from OIT’s WordPress DIY Guide: Working with images and video. Once you’ve learned how to add photos and video, you go a step further by using the gallery feature.

Table of contents

Video Guide

Gallery block starting screen with message "Drag images, upload new ones, or select files from your library." Below the message are Upload and Media Library buttons.
Figure 1. New gallery block.
WordPress' "Add to gallery" screen. Several thumbnails of images are loaded, with some selected with checkmarks. Current selected image has settings on right of screen for alt text, title, caption. Add to gallery button is in the lower left hand corner.
Figure 2. Create Gallery screen, with some images selected.
  1. Insert a Gallery Block. On the gallery block, you can either upload a batch of images with the Upload button or select files from the Media Library (figure 1). In this case, we will select Media Library.
  2. Choose your images from the “Create Gallery” screen (figure 2).
    • You can select images already uploaded to your gallery, or you can upload new ones.
    • Make sure that the Title field is filled out with something that makes sense for your image, and not random letters and numbers generated by your camera.
    • If you leave Alt Text empty, WordPress will automatically use the image Title for your image’s alt text. Alt text must be provided for accessibility compliance, so make sure either the Title or Alt Text field are filled out with an accurate and concise description of your image.
  3. Once you are good with your selection of images, click the Create a new gallery button.
  4. On the next screen, you will be able to drag and drop the images to order them the way you want, pretty neat. Also notice “Caption this image…” written under individual images. This will allow you to type a caption that appears on each image.
  5. Once you have your images arranged and captioned, click the Insert Gallery button.

The Gallery Block settings are located on the right side of the page when the gallery block is selected (figure 3 and figure 4). The Gallery Block has two tabs under its settings: Settings and Style.

First tab of Gallery settings. Includes options for columns, crop images, link to, open in new tab, and image size.
Figure 3. Gallery settings first tab: Settings.
First tab of Gallery settings for Styles. Includes options for square images, background color, and block spacing.
Figure 4. Gallery settings second tab: Styles.

Settings tab

  • Columns: The number of columns your thumbnails will display in. I would suggest between 3-4 columns so it will look good on mobile view.
  • Crop Images: When toggled on, the images will crop to align with each other. If turned off, images will maintain their original proportions.
  • Link To: Select “Media File” from the dropdown to make images appear in a lightbox overlay when the thumbnails are clicked. Make sure that “Media File” is selected and not “Attachment Page”. “Attachment Page” will take your visitors to a new page each time they select an image, which is not the best experience.

Styles tab

  • Styles: Select our custom option for “Square Images” to crop all gallery images as a square.
  • Background Color: Select a background color for the gallery block using colors from the theme palette.
  • Block Spacing: Use the slider to adjust the amount of space shown between the gallery images.

Need help?

If you have any questions about your CAES or Extension WordPress site, please let us know by contacting the CAES Web Team at caesweb@uga.edu.

Posted in: