Site icon BookerTalk

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.

Exit mobile version