UPDATE – Please note that this article was written before the release of the new WordPress block editor (a.k.a. “Gutenberg”). For a more up-to-date approach, see my article: Adding a Row of Image Links with the WordPress Block Editor.
It’s quite common to want a page layout like the example below, with a row of three images, each of which links to a different page of the website (nails, make up and hair, in my example).
The images might not necessarily be photographs. Although it’s not generally a good idea to use images of text on a website, you may want to do this in cases like this, where the images are not just plain text but eleborate, decorative text, with an added texture, combined with decorative elements.
As I mentioned in my previous blog post, Alternatives to WordPress Page Builders, it isn’t strictly necessary to use a plugin to add a row of image links, but simply inserting the images into the page isn’t as simple as it sounds. It can be quite tricky to get them nicely lined up and correctly sized.
My other blog posts suggested a couple of ways that plugins could be used to add images in columns, but I thought it might be an idea to give some more detailed, step-by-step instructions.
The Lightweight Grid Columns Plugin
This free plugin, by Tom Usborne, is my favourite way to easily arrange content into columns.
The plugin generates shortcodes that surround your images and text and that can look a bit intimidating if computer code makes you nervous. But the shortcodes are automatically generated by the plugin; you don’t need to write the code yourself.
Once you’ve installed and activated the plugin, a new button is added to the WordPress visual editor screen.
Clicking this button starts the process of generating the shortcode for a column. I needed to repeat this process three times, to produce all three columns. A nice feature of this plugin is that you can specify what percentage of the screen is taken up by the column on different sized devices. So, I chose 33% for large screens, but for mobile phones I used a value of 100% because I wanted the images to stack on top of each other rather than being a row of three tiny photos.
If I’d been going to put text in the three columns, I could have added it to the content box, but for my images I left that blank.
The third time I added a column, I ticked the “last column in row” box because my third image will end the row.
At this stage, the shortcodes (the stuff in square brackets) had been generated but I had yet to add my images to the columns.
I started by positioning my cursor in the middle of the first pair of shortcode brackets and then clicking “Add Media”.
As I added the image, I gave it a caption, centre aligned it and linked it to the “Nails” page. Using appropriate “Alt Text” should help screen readers to correctly describe the link to their users.
I added the other two images in between the remaining pairs of shortcodes.
And that’s it! That was all I needed to do to create the example layout shown at the top of this blog post.
Styling the Images with CSS Code
If I wanted to make the images look a bit prettier, I could give them a class and use CSS to style them.
Note that, as it stands, the code above will change the appearance of all the captions on the website.
Using a Gallery Plugin
I wouldn’t suggest that you install a gallery plugin merely to enable you to display a row of image links, but if you are already using such a plugin elsewhere on your site then you may be able to use it for this purpose too.
Here’s how the free Foogallery plugin could be used to create a grid of photos each linking to a different page on the site.
I started by adding a new gallery.
As before, as I added images to the gallery, I could choose a custom url for the image to link to, then I made sure the “Custom URL” button was specified in the gallery settings.
I chose always to display the captions and to have a link icon showing when the image was hovered over.
As before, the plugin added a new button to the visual editor, making it easy to insert the gallery into a page.
Here’s the result, with the mouse hovering over the first image in the gallery to demonstrate the hover effect.
Using a Page Builder Plugin
Page Builder plugins are specifically designed to make it easy to lay out elements on a page and any page builder you choose should easily cope with adding a row of three photos linking to pages on the site.
I feel that it’s not really necessary to use a page builder for this purpose, but if you also want to include other modules or widgets on the page, or if you’d like areas of the page to be full width and maybe to have their own background or style, then a page builder could make this easier.
Here’s how I used the free, lite version of the Beaver Builder page builder plugin to add my three linked images.
I launched the page builder and dragged my large top image onto the page.
Then I dragged a row of three columns below this…
… and dragged a photo module into the first column.
This enabled me to add a link to the photo.
I repeated this process for the other two photos, and dragged in a column of text between the two rows of photos.
I published my post, but decided to reduce the padding between the various modules as I felt they were too widely spaced.
This is the result.
Conclusion
Any of these three methods will work as an easy way to add a row of three linked images to a page.
Personally, I would choose the Lightweight Grid Columns plugin as the most straightforward method for a page as simple as my example.
