When inserting images into a post/page you may find that the size, alignment and spacing of the image(es) is not what you expected. Most solutions to issues related to these options are resolved by setting your alignment to center and the size to full. Learn more below.
Block editor
Image size
WordPress automatically creates a few different sizes of each image that you upload. Depending on the original size, there could be a thumbnail, medium, large and full size image to choose from. This is what you’ll see in the right sidebar of the block editor when you have an image block selected.
By default, uploaded images will use the “large” size. Most of the time the full size option will result in a better looking image so that is what we recommend.
Image alignment
Most of the time, you probably want to insert images with center alignment. Make sure that the “Alignment” setting on the image block is set to “Center. Alignment options for blocks is in the block toolbar.
Simply choose the image alignment you want. Center is the most common, but left and right alignment are useful when you want text to wrap around the side, and none alignment is useful if an image should appear right in-line with your text, like any other character of a sentence.
Image Spacing
A good reason to always center align images is that ProPhoto only applies it’s image spacing settings from the WordPress Content Module when images are centered and full size.
When “left” or “right” alignment is set for an image, it allows for text to wrap around the image. As a result, WordPress applies it’s own margins to the side and bottom of such images, so text doesn’t bump right up to edge of the photo. These default margins set by WordPress override the ProPhoto settings here.
Similarly, WordPress applies it’s own margin settings to images with “none” set for the alignment. (This is because images aligned “none” will behave just like a letter in a sentence – on the same line as text with no extra spacing or margin.) So again, the ProPhoto margin settings for post images will not be applied to images aligned “none.”
Fixing images you’ve inserted
What should I do if I insert an image and see that it is too small or misaligned?
All you have to is click on the image block in the page editor and choose the align option you desire.
That’s it! Your image will be updated to show as the new alignment or size you’ve chosen – update your page and you’re done.
What if I have a lot of images in a post at the wrong size or alignment?
Unfortunately, WordPress does not currently provide a convenient way to bulk change the size or alignment of images in multiple image blocks. You have to click on each image block separately. You might consider using a ProPhoto gallery. If you need the images inserted at full size you can choose that gallery style option.
What if my spacing doesn’t match my ProPhoto settings?
Since the reason for this is that your images have different alignment settings then “aligncenter” the solution is to center align each image and set it to full size.
Classic Editor
Image Size
WordPress automatically creates a few different sizes of each image that you upload. Depending on the original size, there could be a thumbnail, medium, large and full size image to choose from. This is what you’ll see in the right side of the image upload popup when you’re uploading photos:
(if you don’t see these options in the side pane, see if you can scroll down in the popup viewer)
By default, uploaded images will use the size setting of the last image you inserted. So if you insert a “medium” sized image, then the next batch of images you upload will default to the “medium” size. Following this scenario, clicking “insert into page” without first changing the size will result in all the images being inserted as “medium” which might not be what you intended. See below for methods you can use to fix improper image size in your posts.
Image Alignment
Just like image size, images will inherit the alignment of the last image you inserted. Most of the time, you probably want to insert images with center alignment. Make sure that the “Alignment” setting is set to “Center” before you insert. Again, these options appear when uploading photos, at the bottom of the side pane:
Simply choose the image alignment you want. Center is the most common, but left and right alignment are useful when you want text to wrap around the side, and none alignment is useful if an image should appear right in-line with your text, like any other character of a sentence.
If your desire is for images to appear side by side, you’ll have the best luck creating composite images before you upload them.
Image Spacing
A good reason to always center align images is that ProPhoto only applies it’s image spacing settings in “ProPhoto” > “Customize” > “Content Appearance” > “Text & Images” when images are centered:When “left” or “right” alignment is set for an image, it allows for text to wrap around the image. As a result, WordPress applies it’s own margins to the side and bottom of such images, so text doesn’t bump right up to edge of the photo. These default margins set by WordPress override the ProPhoto settings here.
Similarly, WordPress applies it’s own margin settings to images with “none” set for the alignment. (This is because images aligned “none” will behave just like a letter in a sentence – on the same line as text with no extra spacing or margin.) So again, the ProPhoto margin settings for post images will not be applied to images aligned “none.”
Fixing images you’ve inserted
What should I do if I insert an image and see that it is too small or misaligned?
Recent versions of WordPress have added a helpful quick-access buttons when you select a photo in your editor:
Click the alignment buttons to change the image alignment. Or, click the “Edit” button and a popup will appear, giving you all image options, including a size dropdown. Pick another size and click Update at the bottom of the popup.
That’s it! Your image will be updated to show as the new alignment or size you’ve chosen – update your page and you’re done.
What if I have a lot of images in a post at the wrong size or alignment?
In this case, changing each photo one-by-one is a huge waste of time. Instead, re-insert all of the images with the new size or alignment at once:
- Delete all the images in the editor.
- Click the “Add Media” button, find the first photo in the Library, and click on the image to select it. (use the filter dropdown box to show only the images Uploaded to this page)
- Now, click to select the new size/alignment along the right side where image settings are shown, and click to “Insert into page”
After that one image has been inserted at the new size, go back and select all the remaining images and insert as one big group – they should all be inserted with the same alignment and size you just used.
What is my spacing doesn’t match my ProPhoto settings?
Since the reason for this is that your images have different alignment settings then “aligncenter” the solution is to
- Delete all the images.
- Insert a single image at full size and center aligned.
- Delete that image.
- Go back to “Add Media” and select all your images and insert them all at once. They will inherit the size (full) and alignment (center) settings from the single image you just inserted.
- Make adjustments to image spacing in “ProPhoto > Customizer > Content > Content Images > Post Image Appearance”. It’s a good idea to keep the margin above to zero and put all your desired space in the setting for margin below.
