One of the things I love to do is to keep exploring how I can test new features on WordPress. In May 2021, I launched my podcast and when I created its companion page on my website, I wanted a convenient way for people to be able to click on an image and be directly taken to a relevant episode.
But I wasn’t able to do it with the built-in Gutenberg editor. In short, I realized that I was unable to add what I call custom links to different images in a specific gallery of images in WordPress.
So in this tutorial I’m going to show you how you can direct an image in a gallery to go to a specific link of your choice using a very simple plugin. This works only on self-hosted WordPress, by the way.
Here’s the complete video of the process, but if you’d rather read the written version of the tutorial, keep reading below.
STEP 1- Add this Plugin
Go to your plugins page and click on ‘Add New’.
Search and find the Responsive Grid Gallery with Custom Links Plugin.
In the video above, you’d notice that I have already activated it. Otherwise you will see the option to ‘Install’ and then ‘Activate’ the plugin.
Every time you add a plugin, ensure that it is:
1. Compatible with your version of WordPress
2. Recently updated
3. Has a decent number of good ratings/reviews
STEP 2: Configure the settings in the plugin
Once you’ve installed and activated the plugin you’ll see something called the responsive grid gallery option under your settings over here.
There are two things which you need to keep in mind:
One is called Gallery Items and the other is called Gallery Templates.
STEP 3: Create a Gallery Template
The first thing we’re going to be talking about is the gallery template. Now in the gallery template you can create a template of your own. So whenever you decide to add a new template you can decide how many columns you wanted to have.
I typically recommend a three-column grid because it’s easier for you to structure it and you can decide if you want to have any spaces between the images so you can give a left and right margin as well as a bottom margin. I just pick 1% as the standard space option for all three.
Next, give the gallery name. For instance, if you notice in my list of gallery templates, I have created a few templates.
I called the first one the three row grid and the next one ‘Episode 4 to 6’. In hindsight, I should have used the latter option for the first template too, as it makes it easier for you to remember what images should go in which gallery.
STEP 4: Create Gallery Items
We now come to adding items to our grid gallery. Since you have a 3-image gallery, we will be adding 3 images of our choice to each template.
Upload the images you want to your media library. Label them at your convenience.
In this example, you’d observe that I have uploaded 6 images, each linking to a separate episode.
When I’m creating my gallery, I am going to assign a specific episode link to each image, as seen in the illustration below.
Remember to name the gallery item. Give it an easy-to-remember name such as the Episode number of your podcast.
Now select the template that you want to add the gallery item to from the drop down list to the right of the page.
STEP 5: Insert the Shortcode into your website
Now, after adding the gallery images to the template, head over to the gallery template and select the shortcode of the template in question.
Copy the shortcode and head over to the page on your website where you want to include the gallery template.
Using the Gutenberg block editor, choose the ‘shortcode’ block and enter the code.
Hit ‘Update’ or ‘Save’ on the top right of your WordPress dashboard.
When you click the preview of your page, you’d see the images showing up with the links to the respective URLs that you’ve added.
And that’s it. All done!
Shailaja V
Hi, I’m Shailaja, a blogger who’s been writing since 2007. My interests include books of all kinds, digital minimalism, veganism, health, nutrition, fitness and staying open to learning all the time. Welcome! Click here if you’d like an email when I publish new posts
Enjoyed this article? I welcome you to let me know your thoughts on this post via email here: shailaja@shailajav.com