A gallery is a great way to show several images all together at once and the best part is when the user clicks on one of the images it will use lightbox (show larger images/videos will fill the screen and dim out the rest of the web page, sort of like a pop up window only better) to show larger images. How cool is that? Here’s an example:
Well I’m sure you will get comfortable with how to insert an image on your blog post or page (Add Media feature). In case if you are not, you can learn more on OIT’s Blogging DIY Guide: Working with images and video and get experience with it before you go a step further with using the gallery feature.
Adding a Gallery
- 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.
- 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.
- Once you are good with your selection of images, click the Create a new gallery button.
- On the next screen, you will be able to drag and drop the images to organize them. Pretty neat, and if you notice “Caption this image…” written under individual images this will allow you to type a caption if you haven’t typed caption already.
- Once you have your images arranged and captioned, click the Insert Gallery button
The Gallery Settings are located on the right side of the page when the gallery block is selected (figure 3).
- 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.
- 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.
Captions will show as text inside the image thumbnails by default. If you want to have the captions appear under the images:
- Click on of the images in the gallery to see the Gallery Settings on the right
- Scroll down to “Advanced” in the settings, you may need to expand it to see the options
- In the Additional CSS class(es) field, add: captionunderimg
- Add “captionunderimg” in the “Additional CSS class(es)” field (figure 4).
Here’s the resulting gallery, with captions under the thumbnails. Compare it with the gallery at the top of this article: