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.
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.
UPDATE: The icons that appear above images have changed since I first wrote this article. Links are now added to images by clicking on the image and choosing the chain link icon that is displayed alongside the three vertical dots.
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:
UPDATE: Also see my article “A Simple Page Layout With GenerateBlocks“. Another plugin that I keep seeing mentioned recently, but haven’t tried myself, is Getwid.
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.
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.
UPDATE: CoBlocks now has a Services block which would be ideal for my purpose.
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.
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.
UPDATE: Also see my article “A Simple Page Layout with the WordPress Block Editor“, in which I build a page using Kadence.
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 Feature Grid block turned out to be pretty much I was looking for.
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.
UPDATE: Also see my article “A Simple Page Layout with the WordPress Block Editor“, in which I build a page using Stackable.
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.
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.
Using a Columns Block (This gave me three columns into which I could insert blocks.) & Caxton.
Thanks for your guide. Its help me a lot.
There’s a plug-in for this function as well: https://wordpress.org/plugins/gallery-custom-links/