Adding and Aligning Images in The WordPress Block Editor

Published in WordPress.

With the WordPress block editor, Gutenberg, the way in which the images are included and aligned in posts and pages changes a bit compared to the classic editor. If you are not yet familiar with the block editor, here’s everything you need to learn to master how to insert and align images.

Insert a Block Containing an Image

When you are writing a post, if you want to insert an image, the block editor allows you to create the following block types:

  • Image,
  • Gallery,
  • Media and Text,
  • Cover (which I covered here)

When you want to insert any type of block in WordPress, it’s as easy as clicking the button + that you find in the upper left corner of the editor or just below or above any block and choosing the type of block you want to insert.

Common blocks of the Gutenberg editor.
Common blocks of the Gutenberg editor.

Alternatively, another very quick way to add any type of block is to use the shortcuts that begin with / followed by the letters of the block you are looking for. Simply, if you start writing /imag you will quickly get recommended the Image block :

Shortcut to add an image block
Shortcut to add an image block.

Depending on the type of block you have selected (Image, Gallery, Media and Text, and Background), one of the following blocks will appear:

As you can see, in the four types of blocks you can upload an image from your computer or select an image already loaded from the multimedia library (or multiple images, in the case of the Gallery block). You can also, only in the case of the Image block, insert an image by providing the URL of the image file, which is useful when you want to add gifs or images from another website.

For example, in the case of the Image block, if you click on the Upload button, you upload the image you want from your computer, enter its caption and select it, it will be inserted in the image block that you have created in the block editor.

Adding an image in gutenberg
Appearance of the block editor, image inserted in the block editor.

In the case of the Media and Text block and in the Cover type, the process is exactly the same. In the case of the Gallery type block, you can select one set of images at a time and then change the order in which they are displayed.

Align The Images

Let’s see the different alignment alternatives we have for the four previous blocks.

Image Alignment of the Image and Cover Blocks

When we insert an image into a type block Image or a type block Cover, we have 5 alignment options that are shown in the block toolbar :

  • Left alignment,
  • Centered alignment,
  • Right alignment,
  • Wide width, and
  • Full width
Types of alignment of an image.
Types of alignment of an image.

If your image is smaller than the width of the text, the left or right alignments will show the image with text next to it. But the centered alignment, as is the case in the previous image, does not add any text to its sides.

The wide width alignment will make the image be slightly larger than your text (if possible), as I show you in the following image:

Image inserted with Wide Wide alignment.

And the Full Width, shows the image occupying the entire width of the window. Below you can see the image in a block of type Cover:

Cover block occupying the full width.

This type of alignment is very useful for creating separations between sections of pages, as you can find in many of the pages of this website.

Image Alignment of the Media and Text Block

The Media and Text block is basically a block that adds an area with two columns: one for the image and the other for the text. In the toolbar of the block you have the option to indicate, on the one hand, if you want the width of the whole block to occupy the width of the text, the wide, or the full width. And on the other hand, if you want the image to be displayed to the right or to the left of the text.

Alignment of the Media and text block.
Alignment of the Media and text block.

Below I show you how the image is on the left with a wide-width block alignment.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat est hendrerit neque blandit semper. Mauris vel lectus nec urna sollicitudin sodales. Aenean at imperdiet risus. Etiam a enim justo. Cras mollis velit placerat laoreet cursus. Nulla accumsan quis eros sed rhoncus. Etiam ornare rhoncus finibus. Sed mollis lorem justo, eget maximus nunc tempus id. Proin a lacus urna. Nullam sed arcu quis justo tempus sodales. Morbi odio quam, ultricies ornare bibendum nec, laoreet vel neque. Vestibulum non dolor mattis, ultricies magna vitae, accumsan neque. Mauris leo lacus, tempus vel porttitor at, efficitur quis erat. Nunc quis porttitor odio, in ornare mi. Duis nec purus pellentesque, egestas quam at, bibendum augue. Donec dapibus pharetra lectus.

Alignment of Gallery Images

In the case of inserting an image gallery, the alignment options of the block are the same as in the case of an Image or Cover type block. In other words, when we talk about the alignment of a gallery it is as if you consider the entire gallery as a single image and decide how you want to align it.

The alignment of images between them is determined by indicating, in the block properties, the number of columns that you want the gallery to contain. Automatically, the block editor will align the images to fit what is indicated.

Galería de imágenes con 7 imágenes y 3 columnas.
Image gallery with 7 images and 3 columns.
Image gallery with 7 images and 3 columns.

In the previous image you can see how the images are aligned in a gallery that contains 7 images, if I want to show them in 3 columns.

And then I show you how the same gallery would look if I indicate that I want to show them in 4 columns and occupy the full width of the post:

As you can see, the results of how the images are aligned in the gallery are very good but if you need to make more complex alignment adjustments, you should consider installing some image gallery plugin, such as EnviraGallery.

And so far you’ve seen that inserting images and aligning them is very easy with the block editor and the results are fantastic.

Featured image of Markus Spiske on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.