Text Links on Gallery Images in Gutenberg

Here’s something you can’t do in the WordPress Classic Editor – put clickable links on top of images, including in an image gallery.

Discover the endless possibilities of how you can use this unique Gutenberg feature.

Thank You

Thanks so much to Gutenberg Ninja course member Kathleen Rupp of Karupped for sharing this great find.

Text Links on Images

One of the best new features Gutenberg brings to WordPress is the ability to easily add text links on top of images.

While the feature was originally intended for Cover Images and CTAs (Calls to Action), it created a side benefit for image galleries to adopt the feature as well.

Example of a CTA

It’s super simple to create an eye catching CTA in Gutenberg with a background image that has a colored opacity layer over it.

And then adding clickable text and/or a button with your offer as shown below.

Links on Gallery Images

Neither the Classic Editor nor Gutenberg allow images in Galleries to be made clickable.

But, you can include a caption with a link in the Classic Editor, however, you have to enter the raw link code to do it (i.e. a href=).

But, thanks to the overlay feature in Gutenberg, you can place text links directly on images when using the Gallery block.

And, there is an easy link dialogue box to enter the URL, just as you can in a post.

Example of Text Link on Gallery Images

You get the same opacity layer effect on gallery images as you do on cover images, which helps the text link stand out.

The Possibilities are Endless

Another new feature Gutenberg brings to WordPress is Reusable Blocks.

In fact, I think it is the most powerful feature in Gutenberg.

It’s super easy to turn an image gallery into a Reusable block that you can place anywhere on your site and use over and over again.

Top and Related Categories

How would you like a strip of images at the bottom of every post with your top categories?

Or maybe a strip of images for related categories to help move your site visitors through more of your site?

It’s easy to do with a Reusable Gallery block!

(FYI, there are other blocks that can show a strip of images for your latest posts, even filtered by category too. No plugin required.)

Resources Page

A page full of links is boring.

How about using thumbnails in a gallery to draw eye-catching interest to those links?

Seasonal Page

Think Pinterest board cover images. You can make your own gallery of images that link to specific categories and arrange them by season.

This is a fantastic way for DIY, Craft, and Foodie bloggers to show off all the seasonal topics you cover and all in one place.

Products

Of course, product images are a natural fit for a gallery.

DIYers, how about a gallery of the products you affiliate at the end of your posts?

Or a gallery of more posts in that how-to series to see even more of your affiliated products?

And a gallery of your downloadable digital products is a perfect fit for this.

You can use it on a standalone page or slip it into any post, any time by just making it a Reusable block.

What Can You Do with Galleries?

I’m very excited about all the new possibilities Gutenberg brings to the table, especially innovations like text links on images.

This is the kind of real-world tutorial I offer my Gutenberg Ninja course.

It’s the fastest, easiest way to get going with Gutenberg and learn-by-doing with tutorials on things you can actually put to use right away on your site.