In this article I will provide a short guide on how to put two external hosted images on Flickr side by side in a WordPress blogpost using the Gutenberg block editor.
Images side by side options with Gutenberg Block Editor
I’ve recently made the switch from the classic editor to the Gutenberg Block Editor ion all WordPress powered websites I publish content on. I think it took me two articles to get used to the block thinking instead of a Microsoft Word like text editor way of thinking. The switch to Gutenberg Block Editor also saved me a couple of simple plugins.
There are two options two work with two (or more) images side by side in a WordPress post:
- Gallery Block in Gutenberg Editor
- Columns Block in Gutenberg Editor
Gallery Block in Gutenberg Editor
The most obvious and versatile option for images in your WordPress media gallery is the Gallery Block option. The Gallery block also has the option to upload images to the WordPress media gallery. However I’ve decided a long time ago to host the images for my WordPress websites on Flickr. In all posts I will “insert media from url” and unfortunately this option is not available in the Gallery Block. You can read excellent information on using the Gallery Block on the go gutenberg website. The team from Ultimate Blocks have an excellent step by step guide for side-by-side images with the Gallery Block.
Columns Block in Gutenberg Editor
You can see that in a couple of recent publications, which include Apps for Google Android that I use two screenshots side by side. The App screenshots are externally hosted images on Flickr, and I must admit that with the classic editor adding these was always painful and labor-intensive.
- Sony WH-1000XM3 Bluetooth Headphones with Noise Cancelling
- Headspace Guide to Mindfulness & Meditation – Andy Puddicombe
- Jumbo Foodcoach App – Build your own nutrition plan for cycling and running
- Management Drives App – Individual Profile Remo Knops
With the Columns Block in the Gutenberg Block Editor this process of adding screenshots to a review has become easier for me to do. And most important, yes it works with externally hosted images on Flickr,
Step by step guide How to add two external hosted images side by side in equal split columns.
Time needed: 2 minutes.
How to add two external hosted images side by side in equal split columns.
- Select the columns block from the Gutenberg Editor List
- Select the two column equal split or 50 / 50 option (there are also 30 / 70 and 70 / 30 split options available)
- You now see two add block options a block in each column;
- Add the image block and select the “insert from URL” option to add externally hosted images from Flickr;
- Set all the necessary settings like attributes, centered alignment and link to;
- The result can be seen in the Polar Flow App on Google Android screenshots in the Polar Vantage M review;
Concluding thoughts and wrap-up
The Columns Block in Gutenberg Block Editor provides a faster and more efficient way of adding externally hosted images (on Flickr) to a WordPress blogpost. With a centered alingment per column this gives a clean integration of Google Android App screenshots.
The fun part is that you can create a reusable block as well, so you don’t need to repeat the steps 1 – 4 but simply insert the block and add the image-URL’s. So when you haven’t started using Gutenberg, than this would be a nice point to start.
How do you work with multiple images side by side on a WordPress website ?