By making your WordPress posts and pages more engaging, images bring life to them. Many beginners, on the other hand, have trouble aligning images to their liking.
The new WordPress block editor (Gutenberg), which makes it easier to add and align images in WordPress, solves this problem.
We’ll show you how to add and align images in WordPress to make beautiful content layouts in this article.
In the WordPress Editor, you can align images.
Previously, WordPress’ default editor was a text area with editing buttons. Image alignment was a major flaw in the previous editor.
Even though images could be aligned to the left, right, or center, they didn’t always look good. Images didn’t always align, weren’t the right size, or just looked weird.
The Gutenberg block editor was introduced in WordPress 5.0 as a new WordPress post editor. It fixed a number of issues with the previous editor, including image alignment issues.
Let us look at how you could use a new editor to easily add as well as align images to make beautiful layouts for your posts or pages.
In WordPress, you can upload and align images.
You can use the following blocks in the new editor to add images to your WordPress posts and pages.
- Image
- Image inline
- Gallery
- Text & Media
- Cover
Let’s start with a straightforward image block.
To insert an image block, click the ‘Add new block’ button or type /image in the post editor.
Within the blank image block, there are three buttons.
You can upload an image from your computer, choose an image from the media library that has already been uploaded, or insert an image by providing the image file URL.
Then, select the image you want to upload from your computer by clicking the ‘Upload’ button.
WordPress will upload the image to your media library and insert it into the image block as soon as you select it.
In the right column, you’ll see a toolbar on top of your image and some image block settings. The toolbar that appears on top of the image will be used to align your image.
In the WordPress post editor, there are buttons for aligning images.
The image block’s toolbar contains the following image alignment options as buttons.
- Align to the left
- Center Alignment
- Right Alignment
- Large Width
- Width: Full
If your image isn’t wide enough, aligning it to the left or right will display text next to it. When you align it to the center, the image will be displayed on its own row, with no text on either side.
If you choose the wide width option, your image will be wider than the text area, and the full-width option will push it to the browser’s right and left edges.
How to Align an Image Perfectly Next to Text
You may need to perfectly align an image next to some text on a regular basis. The Media & Text block in the WordPress block editor makes this simple.
This block essentially adds a two-column area to the page. There are two columns: one for images (media) and the other for text content.
Simply upload your image and then type in the text you want to appear alongside it.
After you’ve added the image and text, you’ll notice that the block has more options. You have the option of making the entire block wider or full-width, as well as switching the image and text sides.
The image’s alignment will adjust to the height of the text in the next column automatically.
How to Align Images in a WordPress Gallery
A block for adding image galleries is also included in the WordPress post editor. This makes it simple to arrange images in a grid of rows and columns.
In the toolbar, the Gallery block has similar alignment options.
You have the option of aligning the entire gallery block to the left, centre, or right. You can also widen the row or make it a full-width row.
WordPress’s default gallery feature is quite good. Consider using a photo gallery plugin like Envira Gallery if you frequently add photo galleries to your WordPress posts and pages.
These plugins will give you more control over how images in your photo galleries are aligned, presented in popups, as well as styled.
In WordPress, how do I add two images side by side?
Adding both images to a Gallery block in a WordPress post is the simplest way to display them side by side.
To display both images next to each other, simply choose a 2-column layout for the gallery block. To ensure that both images are the same size, check the ‘crop thumbnail’ option.
In WordPress, There Are More Ways to Add and Align Images
You can use the Cover block to add a cover image in addition to the image, media, and text blocks and the gallery block.
Cover images are used in modern web design to create highly engaging content layouts. These images are used to draw attention to specific sections of a page.
The alignment options for the cover image block are the same as for an image block. In the block settings, you can add text over the image and choose an overlay colour. The best part is that you can enable the ‘Fixed Background’ option, which adds a parallax effect to the background.
Check out our article on the difference between featured images and cover images in WordPress to learn more about using cover images.
So far, we’ve discussed how to add images to your posts and pages directly. What about images retrieved from other websites?
This is also made simple by the block editor. It includes embed blocks for Instagram, Flickr, Imgur, Photobucket, and other popular social media sites.
To add an Instagram photo, for example, simply add the Instagram block to the post editor and enter the URL of the Instagram post you want to share.
WordPress will automatically download and embed the Instagram post for you. After that, you’ll be able to use the toolbar’s alignment options.
Embed blocks make it simple to embed videos in WordPress. After that, you can align videos in WordPress using the same options in the toolbar.
We hope that this article has really shown you how to add and also align images in the WordPress block editor with convenience. You might also be interested in our article on how to speed up WordPress by optimising images.
If you liked this post, please find and follow us on Instagram, Twitter and Facebook.
