Adding images to your WordPress site can be transformative. Visually appealing images make content more engaging and drive higher conversion rates. Just look at these stats:
-
Articles with images get 94% more views than articles without. [Source: Buffer]
-
Posts with images generate 86% higher engagement on social media. [Source: Track Maven]
-
Web pages with images rank higher on Google compared to text-only pages. [Source: HubSpot]
It‘s clear that using images effectively is crucial for any WordPress site.
But here‘s the problem…
If your images are not aligned and formatted properly, they end up looking sloppy and unprofessional.
As a reader, nothing is more annoying than pictures awkwardly stuffed between text or galleries that are completely misaligned.
Trust me, I‘ve been building websites for over 15 years. Improperly aligned images are one of the hallmarks of an amateur site.
Thankfully, the WordPress block editor makes it really easy to add and align images beautifully.
In this comprehensive guide, I‘ll show you how to:
- Effortlessly insert images into your content
- Align your images left, right, or center
- Adjust image widths and make them full-screen
- Display two images side-by-side
- Perfectly align galleries, covers, and more
- Embed external images from Instagram, Facebook, etc.
- Troubleshoot any alignment issues
Let‘s dive in…
Contents
Getting Started with Image Blocks
The first step is adding an image block to your post or page.
Within the block editor, click on the "Add block" button and select the "Image" block type.
Alternatively, you can simply type "/image" and the block will be automatically inserted. Much faster!
This adds a placeholder image block. Next, you need to insert your actual image using one of three methods:
Upload Files: Click this button to upload an image file directly from your computer. Once uploaded, it will be automatically inserted.
Media Library: This opens your WordPress media library where you can choose a previously uploaded image to insert.
Insert from URL: Paste the URL of an image from any website to embed it.
Once added, you‘ll see the image appear in the block along with a formatting toolbar above it. This toolbar lets you align your image in different ways.
Let‘s look at each alignment option…
Aligning Your Images in WordPress
Being able to quickly align images in different ways is powerful. It lets you control how images appear relative to text.
The image block toolbar provides the following formatting options:
- Align Left
- Align Center
- Align Right
- Wide Width
- Full Width
Let‘s explore what each one does.
Align Left and Right
Aligning an image left or right will make text wrap around it. This creates a nice interplay between text and images.
For smaller images, text will wrap closely on either side. For wider images, text will move below it leaving some white space.
Aligning images left or right is great for:
- Breaking up long blocks of text
- Adding visual highlights in your content
- Improving readability
Here‘s an example of a right-aligned image with text wrapping:
[Example image showing right-aligned image with text wrap]See how the text curves neatly around the image? It adds nice variation for the reader.
Align Center
This alignment places the image smack in the center of the text content. The image sits on its own line with text appearing above and below.
Centered images work well for:
- Separating text into different sections
- Adding visuals between paragraphs or text blocks
- Drawing attention to important images
Here is a center-aligned image:
[Example of center-aligned image]Centered images stand out more than left/right aligned ones.
Wide Width
Setting an image to wide width expands it to be larger than the standard text column. This makes the image more prominent.
For example, you may want to set a key image in your content to wide width to make it stand out more.
Full Width
This aligns the image to the full width of the text column from edge to edge. The image will occupy its own row.
Full width images are great for:
- Section breaks in long articles
- Photo galleries
- Striking hero images at the top of pages
- Large infographics and data visualizations
- Other prominent visuals
Here is an example of a full width image:
[Example of full width image]See how it captures the reader‘s attention? Use full width selectively for maximum impact.
And that covers the built-in image alignment options in the block editor!
As you can see, it makes aligning images intuitive. No more guessing with your text wrap and alignment settings.
Next, let‘s look at aligning images perfectly next to text.
Aligning Images Next to Text
Placing an image next to text in a fluid two-column layout is quite common. Think author profile pictures, icons next to tips, product images with descriptions, etc.
Previously, this was difficult to achieve in WordPress. You had to mess around with float settings and text wrapping. And getting everything to align properly was a pain.
Thankfully, the WordPress block editor makes this dead simple using the "Media and text" block.
To use it:
-
Insert a Media and Text block
-
Upload an image to the left column
-
Add your text to the right column
That‘s it! The image and text will align perfectly side-by-side like magic. No messy float settings needed.
You can also switch the columns to show the image on the right instead. The settings provide options to adjust column widths as well.
Setting the whole block to "Wide width" or "Full width" will expand it further.
Here is an example of an image aligned next to text using the media and text block:
[Example of image aligned next to text]Not only does it align them properly, but the block editor is also smart enough to adjust the image height relative to the text length.
So if you change the text content later, the image will auto-adjust its height to match. This ensures the two columns remain aligned properly.
The block editor does all the heavy-lifting for you!
Next, let‘s look at how to align galleries.
Aligning Image Galleries
Adding image galleries is a breeze with the WordPress block editor. No clunky shortcodes needed.
Simply insert a "Gallery" block and upload the images you want to display. By default, this creates a nice grid layout.
From the block toolbar, you can align the entire gallery left, center, or right just like individual images.
Setting the gallery to "Wide width" or "Full width" is also possible to make it span the content area.
The block settings provide additional options like:
- Switching between grid and carousel layouts
- Choosing the number of columns
- Cropping thumbnails to consistent sizes
- And more
Here is an example of a 2-column image gallery aligned to the center:
[Example of centered 2-column gallery]With this kind of flexibility, you can create any gallery layout you need!
However, if you want even more advanced gallery features, consider using dedicated gallery plugins like Envira, Modula, or Gallery Block. These integrate seamlessly with the block editor.
The alignment options stay the same regardless of plugin or method used.
Next, let‘s look at how to align full background images also known as "covers".
Aligning Full Background Image Covers
Full background images are commonly used in modern web design. They add visual interest and help break up long sections of content.
Also known as "covers", these are large images that span the entire width and height of the browser. You then overlay text on top of the cover image.
The WordPress block editor makes it easy to add cover images and align them properly.
Simply insert a Cover block and upload your desired background image. You can align the block left/center/right like other images.
The settings allow you to:
- Overlay text on top of the cover
- Darken/lighten the image with color overlays
- Make the image fixed for a parallax effect
- And more
Here is an example of a full width cover image with overlaid text:
[Cover image example]With the cover block‘s flexibility, you can create eye-catching designs like hero sections and featured areas to make portions of your content stand out.
This is much easier than hacking together background image solutions!
Next, let‘s look at embedding external images from social media and photo sharing sites.
Embedding External Images
The WordPress block editor provides dedicated blocks to embed images from external sites like:
- Behance
- Flickr
- SmugMug
- 500px
- And many more
For example, let‘s look at embedding an Instagram photo.
Add an Instagram block to your post and simply paste the URL of the Instagram post you want to embed. The image will be automatically pulled into your post.
You can then align the Instagram image left/right/center, set it to wide width, etc. It behaves just like a normal image block!
Here is an example of an embedded Instagram image:
[Instagram embed example]This same method works for Facebook, Twitter, YouTube, Flickr, and all other media sites with WordPress embed blocks.
Being able to easily align embedded images unlocks more creative possibilities for your content!
Now let‘s look at displaying images side-by-side.
Showing Images Side-by-Side
Showing two images side-by-side is great for before-after comparisons, progress pics, multiple products shots, and more.
The easiest way to do this is with the Gallery block.
Simply insert a gallery block, add two images, and select the "Columns: 2" layout from the sidebar.
This will automatically display your two images next to each other. To adjust their sizes, check the "Crop images" option.
And that‘s it! With just a few clicks, you can show two properly sized images side-by-side:
[Example of two images side-by-side]The block editor‘s flexibility makes these kinds of creative layouts possible.
Troubleshooting Image Alignment Issues
Aligning images properly is easy with the block editor. But issues can still pop up occasionally.
Here are some common problems and how to fix them:
Images Overlapping Text: This happens when text wrapping is disabled. Select the image and click the "Wrap text" toggle in the sidebar settings to enable wrapping.
Uneven Image Sizes: Some images may appear larger than others in galleries. Go to the gallery settings and check "Crop images" to force consistent thumbnail sizes.
Big Gaps Around Images: Increase the image size to fill more space or enable the "Bleed" option when aligning images left/right.
Can‘t Align Center/Full Width: Check that text blocks are aligned to the center. Text blocks must also span full width for images to do so.
Image Too Small/Big: Open the image block settings and adjust the image dimensions manually for finer control over sizing.
Block Overlaps Content Below: Some themes have fixed block spacing. Switch to the default WordPress theme to see if it resolves overlap issues.
And those are some common alignment gotchas along with fixes! Let me know if any other issues pop up.
Final Thoughts
Well, that wraps up this ultimate guide on aligning images in WordPress!
To quickly recap:
- The block editor makes aligning images left, right, center, wide width, and full width incredibly easy
- You can perfectly align images next to text using the media and text block
- Galleries are a breeze to create and align
- Background cover images help make sections more visually compelling
- And you can embed and align external images from Instagram, Facebook, etc.
Properly aligned images make your content more appealing while also looking professional.
So go forth and add lots of beautiful images to your next WordPress site! Let me know if you have any other questions.
