A Guide to WordPress Gutenberg Image Block

One of the most popular page builders for WordPress, Gutenberg comes with a library of ready-made elements, otherwise known as Gutenberg blocks. The blocks allow for smooth, streamlined and easy page-building experience as they are incredibly intuitive and practical. In this guide, we will do an overview of the Gutenberg Image Block and all that you can do with it.

The Default Image Block and How to Add It

In a nutshell, Gutenberg Image Block lets you add an image anywhere you want on your page or post. If you click on a plus button in your editor, a new field will open. Here you can access Image option. As you can see below, in this editor, you have separate options for adding Gutenberg Image Block and Gutenberg gallery block as well.

In Gutenberg, there are three different ways to add pictures. You can upload an image from your computer, choose an already existing image from your Media Library, or insert it from URL.

At first glance, image block contains the same options as classic editor’s Add media button. However, upon closer inspection, it is evident that this is only partly true. There are some new useful options that come with Gutenberg that will further ease your picture editing experience.

First one is an addition of small, blue dots on your image. Thanks to these dots, you can stretch the picture and increase and decrease its size in any way you prefer. Another new option is possibility of writing caption at the bottom of the image.

You can find all the basic settings right above the Image Block. On the other hand, more advanced image settings are located in the Block tab. These include Alt Text, Image size, Link Settings and Advanced.

• Alt Text – here you can add a short description of your image. However, you can leave this field blank if your image isn’t a core element of your content.
• Image size – there are possibilities of changing your image size to default sizes, such as Thumbnail, Medium, Large and Full Size. Another alternative is to add exact image dimensions in pixels, or determine desired size in percentage related to the original size. If you make any mistakes, you can always click on the Reset button.
• Link settings – here, you have four different options: None, Attachment page, Media File and custom url. None option lets you display the image without a link, while Attachment page links to a specific page on your site that has a purpose of providing information about the image in question. As for Media File, it opens the image by itself. The last option allows you to add a custom url for your image.
• Advanced – in this field you can add an additional CSS class and write your own custom styles.

Additional image bar options include image alignment (align it to the left, right or center) and Change block type. Choosing this option gives you an ability to transform your block to another compatible block with a single mouse click. For instance, you can change your block type to gallery, media&text, cover and file.

If you want to edit your image in the same way as you did in the classic WordPress editor, you can easily do so by clicking on the pencil icon to open the image in WordPress media library.

Now that’s all there is about the default Image Block, but you should know that there are some more advanced options out there, too.

Adding Images Using Qi Blocks for Gutenberg

Qi Blocks for Gutenberg is a rich collection of custom Gutenberg blocks that allow you to do so much more (and to better aesthetic results) than you’d normally do with default blocks. The collection can be downloaded for free from the official WordPress repository, giving you a wonderful set of 48 blocks for everything from creative and showcase elements, to business and SEO. For those that want even better options and more advanced features, there’s also the Qi Blocks Premium package with 33 additional blocks.

This time around, the block that interests us here is the Single Image block. You’d think that adding images to pages and posts is the simplest thing there is, but the Single Image block for Gutenberg allows you not just to do so with utmost ease, anywhere on your site, but it also comes with an array of exclusive options. For instance, you can pick various image actions, adjust the width, height, borders, alignment, set hover behavior, enable the lightbox, and much more.

Another amazing block that deserves our attention here is Parallax Image Showcase, which allows you to create dual image sections with images that move at different speeds on scroll, creating an exciting illusion of depth.

Then there’s the Image Hotspots block, with icons or other symbols placed on images, revealing info when the user hovers upon them.

Finally, the Image Slider block can help you create impressive, engaging sliders with your select images, adding a touch of dynamicity to your pages. With this block, you no longer need complicated, hard-to-customize slider plugins. You get everything you need in a single, intuitive and completely customizable block.

Conclusion

As we saw, there’s a lot you can do with the Image Block, whether you use the default one that comes with Gutenberg, or you opt for a third-party solution, like in the case of Qi Blocks for Gutenberg. Images are very important for any website, as they can often tell and do so much more than words. Thanks to Gutenberg, adding them to your posts and pages has never been easier.

We hope that you found this article to be helpful. If you liked it, please feel free to check out some of these articles as well!

• All About WordPress Gutenberg Blocks
• A Short Introduction to WordPress Gutenberg
• How to Get Through the WordPress 5.0 Release – Classic Editor and Gutenberg