Adding a Row of Image Links with the WordPress Block Editor

Some time ago, I wrote a blog post giving instructions for adding a row of image links to a WordPress website. The methods I described should still work, but now that the new WordPress block editor (a.k.a. “Gutenberg”) has been released, I would expect it to be easier to carry out this task without using the plugins I had looked at before.

I thought I’d write a new post to give an update in the light of the changes, and this accidentally turned into a mini review of some third party blocks plugins.

WARNING: Sticking with the standard WordPress Columns block (as described in the next section) should be fine, but it’s been brought to my attention that, until a fix is found, it’s risky to use third party container or layout blocks as if you disable the plugin, the contents of the block could be lost. Note that I’m not talking about individual blocks here, such as advanced image blocks. This problem is related to row / column / container / layout blocks which contain other blocks within them.

Using a Columns Block

It seems to me that the most straight forward way to add a row of images that link to other pages (or even other websites) ought to be to use a Columns block. I tried this on a test site to see just how easy it was.

The first step was to add a Columns block to my page.

Then, on the right of the screen, I adjusted the number of columns to three. I also added an additonal CSS class because I knew I was going to want to change the style of the images later – but that step is optional.

This gave me three columns into which I could insert blocks.


I added an Image block to each column, and included captions for the images.

I wanted the images to be centre aligned within their columns.

Clicking on each Image block enabled me to add alt text and links.

This was all I needed to do in order to add the three linked images that I wanted. The process was fairly quick and easy, as long as I was satisfied with the default appearance of the images and their captions.

Since I had given the Columns block an additional CSS class, I was able to style it by adding some CSS rules to the Additional CSS area of the customiser. This did involve a bit of trial and error, but I ended up with the code below.

/** appearance of image links **/

.jb-image-links .wp-block-image img {outline: 1px solid #ffffff; outline-offset: -6px;}

.jb-image-links .wp-block-image figcaption
{color:#ffffff; font-size:32px; text-align:center; background-color: #EF677B; padding: 2px; margin-top: -2px; }

Here’s the result.

I checked that the three images stacked vertically on smaller screens, which was the behaviour I wanted to see.

Using a Blocks Plugin

If all you want to do is add a row of images, each of which links to a website page, then the method above should be sufficient. There’s something to be said for keeping things simple as it’s easier to make things consistent – e.g. all buttons on the website having the same colour, text size and padding, rather than each block being styled individually. But, if you’d like the images, and their captions, to look a bit more interesting then you might be tempted to use a plugin rather than try to figure out the CSS code yourself.

The new block editor has opened up the possibility for developers to offer blocks plugins to extend the basic WordPress editor in numerous ways. There is a lot of potential but it’s all still fairly new, so it’s too early to say which plugins will end up being the best ones to use. Here are a few that I will be keeping an eye on:

Advanced Gutenberg

The Advanced Gutenberg plugin, from JoomUnited claims to add over 20 new blocks and options.

Its Advanced Image block could be used to add an image with a title displayed on top, and with a coloured hover overlay.

As of mid-February 2019, Advanced Gutenberg has 7000+ active installations and an average rating of 4.8 out of 5, with fifteen 5 star reviews.

Atomic Blocks

This free plugin provides eleven blocks, including a post grid that could be used to show posts, but not pages.

I thought the Call To Action block might work for my purposes, if I used my photos as background images, but it didn’t quite work out. If I wanted to use this plugin, then I would end up having to add some padding using CSS to make the photos taller.

That’s not to suggest that this isn’t a good plugin if the blocks that it does include are useful to you.

As of mid-February 2019, Atomic Blocks has 10,000+ active installations and an average rating of 4.8 out of 5, with fifteen 5 star reviews.

Caxton

Caxton is a collection of blocks by Pootlepress. I quite liked the Pootlepress page builder plugin when I looked at it in November 2017 and, when considering a plugin, it’s always reassuring to be familiar with other products by the same developer.

Caxton is a free plugin. I don’t know whether a pro version will be released in the future, as with some of the other Pootlepress plugins.

I wouldn’t be surprised if more blocks are added to the plugin, but for now, I can’t see one that is very relevant to my image links exercise. There is a Posts Grids block which could be useful if you want to link to posts rather than pages, and the Layouts block looks very interesting as a way to have a lot of control over the exact layout of a page (but note the warning at the top of this article about content in layouts being lost if plugins are disabled).

As of mid-February 2019, Caxton has 800+ active installations and an average rating of 4.3 out of 5, with eight 5 star reviews.

CoBlocks

This is another free plugin that is likely to have more blocks added to it as time goes by. As with Caxton, there wasn’t a block that was just right for what I was trying to achieve (the Features block is for displaying icons, rather than images) but the Rows block would be an alternative way to arrange the layout of a page with more precision than the basic columns (but note the warning at the top of this article about content in layouts being lost if plugins are disabled).

As of mid-February 2019, CoBlocks has 2000+ active installations and an average rating of 4.7 out of 5, with twenty 5 star reviews.

Kadence

Kadence Blocks has both free and pro versions, and it creates a good first impression. Features such as the ability to deactivate unneeded blocks are a good sign.

Its version of a row layout block even includes a library of prebuilt layouts (but note the warning at the top of this article about content in layouts being lost if plugins are disabled) .

Unlike some of the other plugins I’ve looked at, Kadence has a very customisable Info Box block that will allow me to show an image (or icon), title and text, all linked to another web page. Just as an experiment, I added rounded corners, a pink background and a shadow, and changed the size of the title.

As of mid-February 2019, Kadence has 10,000+ active installations and an average rating of 4.9 out of 5, with fifteen 5 star reviews.

Stackable

Stackable is a free plugin with 22 blocks by Gambit Technologies, Inc – the team behind the Page Builder Sandwich plugin. Like Kadence, Stackable allows you to disable blocks that you aren’t using.

The Image Box block appeared at first sight to be exactly what I was looking for…

… although its images are background images, which means that they are cropped and don’t retain their size and aspect ratio. Also, there was no way to change the size of the title, without CSS code.

The Card block did the same thing, i.e. the image was a background image.

However, the Feature Grid block turned out to be more what I was looking for. Note that the Feature Grid block is not a container for other blocks so you do not need to worry about losing content if the plugin is temporarily deactivated.

Here’s the end result, if I did not include the optional title and description.

As of mid-February 2019, Stackable has 6,000+ active installations and an average rating of 4.9 out of 5, with seventy three 5 star reviews.

Ultimate Addons for Gutenberg

The Ultimate Addons plugin is from Brainstorm Force, the developers of the highly regarded Astra theme. They have also produced some free starter sites using Astra and this plugin. I own Brainstorm Force’s Ultimate Addons for Beaver Builder plugin, so I was interested to investigate this Gutenberg one.

As at the time of writing, there are 18 blocks and, yet again, there is an option to deactivate unused blocks.

The Advanced Columns block has various options, including spacing, borders, background colours and shape dividers, and contains child Column blocks, which can be individually configured (but note the warning at the top of this article about content in layouts being lost if plugins are disabled).

The example below uses the standard WordPress Image blocks inside an Advanced Columns block with a background colour and shape divider.

As an alternative to the straightforward Image Block, the Ultimate Addons Info Box block can contain either an image or an icon, plus text and an optional button. There are several options for customising its appearance and it can be linked to a web page.

As of mid-February 2019, Ultimate Addons for Gutenberg has 20,000+ active installations and an average rating of 5 out of 5, with thirty nine 5 star reviews.

Conclusion

I didn’t set out to write a review of the various blocks plugins but this exercise has given me an introduction to some of them.

If all you want to do is add some linked images with captions, in the default style for your theme, then the standard WordPress columns block and image block will be sufficient.

If you’d like more control over the appearance of your blocks, then most of the plugins I’ve looked at here are worth considering. Based on my brief play with them, I shouldn’t really make a recommendation, but so far I feel that Kadence, Stackable and Ultimate Addons for Gutenberg offer the most options.

For extra blocks to help with my specific exercise –

  • Advanced Gutenberg’s Advanced Image block, Kadence’s Info Box block, Stackable’s Feature Grid block or Ultimate Addons’ Info Box block add more options for displaying the linked images.
  • Caxton’s Layouts block, CoBlock’s Rows block, Kadence’s Layout block, Stackable’s Container block or Ultimate Addons’ Advanced Columns block could be used to give more flexibility than just 3 equal width columns – but I would be wary about using those features until the possible bug leading to disappearing content has been fixed.

More Tutorials

1 thought on “Adding a Row of Image Links with the WordPress Block Editor”

Leave a comment