WordPress Image Galleries
There are good plugins for presenting image galleries, but WordPress has a native option. It provides a nice feature that can enhance a webpage, but it can also be a bit confusing to set up! Here are some instructions to help steer you through WordPress image galleries.
We are assuming some knowledge of WordPress, gained either from the reader’s own experience of from our First Steps page.
Using the gallery block
Everything starts with choosing the right block from the editing area of a page or post.
Go to the blocks list by clicking the Plus button, and choose Gallery from under the Media heading. Now you can either upload new images, or go to the Media Library to fetch those previously uploaded.
Click on all the images you want to include in your gallery, and a little tick will appear in the top right-hand corner of each. On the bottom right-hand corner of your screen, click Create Gallery.
The next screen allows you to add captions and to rearrange the pictures by dragging and dropping. When you’re ready, click the Insert Gallery button, bottom right:
For the set of images we chose, here is the result on the front end. Captions, where present, appear over the picture near the bottom:
This is a six-image gallery to which WordPress has applied its own default settings. While it’s quite decorative, you may decide it needs a bit of refining.
The problem with grouped images
The main challenge when presenting images in a group is that they can differ vastly in their aspect ratio. Aspect ratio describes the relationship of an image’s width to its height: where the height is greater than the width, the image is described as “portrait format”. In the opposite case, it is “landscape format”. Pictures that have very different formats are inherently difficult to display attractively side by side.
Let’s examine how WordPress handles this problem and see if we can tweak the defaults a bit.
Harnessing the gallery options
In the editing screen, click on the gallery block to reveal the settings. These should appear in the right sidebar; if they don’t, click the gear icon at the top right of the screen.
But beware: clicking randomly on a gallery doesn’t automatically select the whole gallery. If your click lands on an image, the selection will apply to just that image and the options in the right sidebar will relate to that image only.
Instead, you can select the whole gallery by either —
- clicking on a space in between images, or —
- clicking first on an image and then choosing the “Select Gallery” icon above the image:
The columns setting
With the whole gallery selected, a different set of options now appears in the right sidebar. The columns refer to the number of images in a single row. The default, 3, works well for six images. If you choose 4 with only six images in the gallery, WordPress will try to fit them into a simple rectangular shape:
Try adding more images to see what happens. With the whole gallery selected, scroll down below it to the Upload / Media library buttons. Here you can add more pictures and re-order them, or write a caption for the whole gallery.
To remove an image from the gallery, highlight it and click on the three vertical dots in the selection above the image. Choose Remove Image.
To crop or not to crop
Another gallery setting refers to cropping. Where there are clashing aspect ratios, WordPress presents cropped versions of all the images so that they all fit into an attractive whole. This happens automatically because the Crop Images button, just below the Columns setting, is always on by default. The pictures appear regular, but the full image can’t always be seen.
If instead you want to show the images whole and in their proper aspect ratio, turn off Crop Images. WordPress then sets the “columns” by giving each image in a row the same width regardless of its actual size. With our eclectic set of six images in three columns, this is the front-end result:
This layout has its charms but it won’t please everyone. If you don’t want your photos to be cropped or to appear irregular, we recommend you use a photo editor to give them all the same aspect ratio before you upload them. Here is an example, in a gallery of four photos in two columns:
A nice regular result!
Enlarging the images with a lightbox plugin
A lightbox enables your website visitors to enlarge the images in a gallery by clicking on them. It includes arrows that allow users to skip from image to image within the gallery. It is well worth using a lightbox if the images end up either very small or only partially visible due to cropping.
While WordPress does not (currently) provide a lightbox, several plugins will do the job instead. We like Lightbox for Gallery and Image Block because it works seamlessly with the WordPress image and gallery blocks.
In order for this to work, once the plugin is uploaded and activated, each image needs to be linked to its larger version in the Media Library. This can be done for the gallery as a whole in the settings. Under the Crop Images button, click inside the “Link To” box and choose Media File.
When the page is updated, the images should expand when clicked on. Here is the church image from our gallery, enlarged:
The arrows at the side allow easy scrolling within the gallery.
More options from Applegreen
We hope you enjoyed learning about WordPress image galleries. Applegreen can spice up your galleries with extra features and styling: contact us if you want to take your WordPress gallery to the next level.
Category: WordPress Help
← Previous post: SEO and Keyword Placement in WordPress
→ Next post: Website hygiene with Wordpress