How to Align Images in the WordPress Block Editor
With the WordPress Block Editor you can easily align images to make them more engaging. But how do you do that? With Gutenberg (the new WordPress editor) it is much easier to align the images. Gutenberg solves the issue of aligning images by making the process seamless. In this post we shall be looking at the steps you need to take when aligning the images in a WordPress post.
In the previous WordPress editor, a text area was used to align the images. You could align an image to the right, left or center. Needless to say, images did not align properly at times mostly because of their size. This is not the case with Gutenberg.
Adding images
With the new WordPress Block Editor, adding images is much easier. The editor comes with blocks for adding:
- Images
- Gallery
- Inline image
- Cover
- Media & text
To add an image, you simply click on ‘Add New Block’ button or simply type /image in the post editor. Three buttons will show up in the blank image block. You can then upload an image from your computer or insert an image file URL. Click on ‘Upload’ and select the image that you wish to upload. WordPress will upload the image to your media library and then insert it in the image block. Thereafter you will see a toolbar on top of the image and image block settings on the right. To align the image you need to use the toolbar that appears on top of the image.
The image block will provide you with the following image alignment options:
- Align left
- Align center
- Align right
- Wide width
- Full width
If the width of the image is small, aligning it to the right or left will bring up text next to it. Aligning to the center will put it on its own row with no text on its sides.
With the width option, your image will be made wider than the text area. The full-width option pushes the image to the right and left edges of your browser screen.
How to align an image perfectly
The Media & Text block makes it easy for you to align an image perfectly. The option adds two-column area: column for your media (image) and one for text content. You just upload the image and add the text that you want to be displayed next to it. More options will be available after adding the text and image. You will be able to make the block wider or full-width. You can also switch the sides of the text and images. The image’s alignment will adjust automatically to the height of your text.
Adding two images side by side
The easiest way of doing this is by adding the two images in the Gallery Block. You then select a 2-column layout for the gallery block for the two images to appear side by side. Checking the ‘crop thumbnail’ option will ensure the images are of the same size.
There are more ways to add and align images in WordPress. Don’t be boring. Try more alignment options on your free time. The possibilities with the new WordPress block editor are virtually unlimited.