How to Solve The Headache Of Image Alignment in WordPress
Thanks to all you bloggers who’ve taken up the offer I made in a post a few months ago to help with your blogging challenges. When I wrote the post Struggling With A Blogging Problem? Ask Me A Question I wasn’t sure what kind of problems might materialise. I wasn’t even sure if anyone would ask me a question!
But you have so I’m going to feature a few of them in coming weeks.
First of all, a problem that I hear many bloggers are struggling with because WordPress has pushed forward with WordPress Block Editor as the default editing programme.
Here’s how Carol who blogs at ReadingLadies describes her frustrations with the block editor image placement tools.
If you’re experiencing the same frustrations, here’s what I recommend. Bear in mind that I don’t claim to be an expert on Block Editor. What I’ve learned has come through trial and error. There may be easier/quicker solutions around so if you find them, please do let me know.
Tip #1: Ignore The Media & Text Block
WordPress now comes with a block called Media & Text. The description says it enables you to “set media and text side by side for a richer layout” . That might sound just the thing when you want to display a book cover and run text alongside.
But believe me. The result can be a mess.
Hence why I strongly advise you to Avoid this block unless you are prepared for pain.
The Media & Text block works a bit like a table with two columns. One for your image. The other for your text. You get to decide if you prefer the image to appear on the left or the right of that text.
But when you insert your image from the media library or the free photo option, the picture will appear to be enormous. Vertical images, like book covers, are particularly bad. Shrinking down your photo to a very small size before uploading, doesn’t get rid of the problem. The only way to fix it is to drag the corners of the image to a more acceptable size on the page.
But then you get a second problem. The space where you need to place your text has now got bigger. Why? Because the block is designed to take up the whole width of your page. So if you make one column (the image column) smaller, then the text column has to become larger. No big deal if you have a lot of text to include you might think.
But now comes another problem: the block is set up to use “large” size text (it’s 36 point I think). It’s far too big – more like the size of a heading than body copy. Here’s an example of how it will look. Over the top I think you’ll agree. And look how small that picture of George Eliot is in comparison.
LONDON. Michaelmas Term lately over, and the Lord Chancellor sitting in Lincoln’s Inn Hall. Implacable November weather.
You can change the text size. The proportion of text to image are better but your text is now surrounded by acres of white space.
LONDON. Michaelmas Term lately over, and the Lord Chancellor sitting in Lincoln’s Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
You can of course just add more text to fill up that space. This is the result I got. It’s an improvement but as Carol discovered, you’ll likely find it impossible to get the top and bottom edges of the text to align with the edges of the image.
LONDON. Michaelmas Term lately over, and the Lord Chancellor sitting in Lincoln’s Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snow-flakes gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers.
Something you could try to avoid this problem is to go into the block’s settings menu and change the line height of that text. It will add more white space between each line of text – printers call this leading. But it’s going to take a lot of fiddling about before you will get those edges to align.
I don’t know about you, but I have better things to do with my time than battle with this block.
Tip #2: Image Block
If you are still keen to align your text and image, there is a much simpler solution.
It involves using two of the standard blocks: the image block and the paragraph block.
Here’s what you do:
1.Add a paragraph block and insert your text
2 Add an image block above that paragraph block
3. Upload your image into this image block and align it right or left, depending on your preference
Once you have done step 3 you’ll find that the text below it automatically jumps up to run alongside the image.
LONDON. Michaelmas Term lately over, and the Lord Chancellor sitting in Lincoln’s Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snow-flakes gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers.
Apart from saving you time, this method has another distinct advantage over the Media & Text Block: it means that you can get text to wrap around the image – giving exactly the effect Carol wanted.
Thank you to Carol for asking the question. I hope that my answer has helped. Don’t forget, if you have a question about book blogging, just send me a message here . Technical questions about using WordPress, queries about how to encourage more comments, or how to find time to blog. The more the merrier.
You gave this hint in one of your original posts on the block editor, and it works well. I can imagine what they are thinking with the Media and Text block. But, I was very grateful when I read your hint.
You can always just stick with Classic Editor
Don’t get me wrong, although I am frustrated by that one block, I love so much else with Block Editor. It;s vastly superior to classic editor….
Saving this post. Great tips here! Mind you, I’m not really using the block editor. I’ve been copying old posts from before the block editor and using them as templates, and keeping them in my drafts. But even then, sometimes, I can’t get rid of a block! Damn them!
That’s odd – deleting a block should be quite easy. You just click on the three little dots in the formatting menu, then the drop down gives you the option to delete….
I have found using old posts as templates very tricky. It does seem to attracts a few problems – bugs perhaps – so that you seem to sometimes not have full Classic capability but not full Block ones either. I am converting to Block editor. Unlike Karen, I really can’t see that it’s hugely better, but it works, so I figure it’s better to use it now. the problem is that they’ll either get rid of Classic eventually or themes will stop supporting it. Either way, it’s probably better to go on your terms than theirs!
Good point… but I intend to hold out as long as I can…
And who knows, Classic may survive forever!
I think I’ll stick to classic editor as long as I can…. ;D
I know you’re going to hang on until the bitter end…
Sorry …Thanks for the tips
You’re welcome. If there’s anything you’re confused about/struggling with, just ask!
Yhanks for thr tips
Thanks for this. It is one of the problems which cause me to revert to the Classic editor.
I’m wondering if our old posts which we wrote many years ago will also have to be converted to the new Block Editor if they are changed.
When I go into one of my old posts it gives me the chance to convert to block editor. It’s very easy to do
Yes, it’s very easy to convert old posts to Block Editor, but do they look exactly the same as before or do you have to make some more changes to get it to look exactly the same as before? That would seem to be the major problem.
I just tested this out on a few old posts. Changing from classic to block editor made no difference to the way the post looked on the page.
Great tip! I keep going back to Classic Editor because I seem to do much less clicking and fiddling 🙂
Block editor is quite a lot more sophisticated than classic editor in that it gives you many more options for formatting but with that comes some issues. Quite a few of the new functions are a step too far for me and seem aimed more at designers.
Thank you for replying, your comment is pertinent and along the lines of what I suspect. WordPress seems to be pushing a smooth professional finish whereas I have no interest in turning my blog into lookalike pages from a magazine.
They do seem to be coming out with more and more design templates that create sites looking more like websites than blogs….
Thanks for the tip, I’ve just tried it and it works much better than the way I’ve been using
That’s music to my ears Karen, so glad it worked for you
Not a problem I’ve had with Classic editor but I’m sure I’ll be revisiting these posts when I’m forced to switch to Block Editor, Karen!
I hated the way classic editor handled images. If I was doing a post like Six Degrees where I wanted image and text to be close together, on my editing screen it would look perfect. But then when it went live it seemed the images had jumped all over the page
Oh it stresses me out to revisit this issue but THANKS for your help! Honestly, I’m using the Classic option again! When I work up my courage to return to the Block Editor, I’ll use your tips! Meanwhile, I’m going to edit my post and include this link to help others! You’re the BEST! THANK YOU!
Oh no!!! I gave up on Block Editor on my first effort too but on the second go, it was so much easier
I’m gathering my fortitude!
Might a glass of wine help?
👍😂