Another Fine
Marketing Blog

Request a consultation

Stacking images vertically in WordPress the right wayHave you ever tried to line up images on your website so they sit vertically?

What you will find, when using a content management system like WordPress is you will get them looking just fine in the editing screen but then find they are all skewed when you look at the page publicly.

Well, I have the answer for you, and you won’t believe how simple it is.

Before I share though,  a quick word of clarification.

Quite a number of our clients use image gallery plugins like NextGEN Gallery.

This plugin lets you quickly and easily build galleries of images without any of the woes of trying to balance pictures in free flowing pages or posts.

The trick I’m about to show you, really just applies if you are trying to stack a page with some images aligned to the left and some words aligned to the right.

Why do images not align sometimes?

The reason it can be hard to get your images to play nicely when stacking them vertically is that content management systems like WordPress actually store the words and pictures you enter quite separately behind the scenes.

This is what makes these sites so powerful.

It also means that what you see is not always what you get because when a page or post is brought together to be displayed on someone’s computer, the words, the pictures and the website design or theme are all brought together at that moment.

This means the nicely spaced line of text in the text editor will have a shorter or longer space on the actual page than it did in the building or administration area.

As a result, it will push other text and images around accordingly.

You almost never need to worry about this, except when you are stacking numerous images together, wrapped with words.

Because they are likely to be pushed to different spaces by other elements, the images can suddenly be indented and spread across the page in a waterfall formation, rather than anchoring themselves to the side of the page.

Our answer is to use a little code.

One line of code can solve your probelms

All we need to do, when stacking a page, is to insert a little piece of code between each combination of image and text, to tell the website to treat these items as separate entities and to start any new image and text combinations in a fresh position on the side of the page.

The code you need is:

<br style=”clear: both;” />

There is one trick though, you need to enter this little line of code when your editing screen is in the Text mode rather than the Visual mode.

So here is how you might use it.

You start your page or post with lots of text.

Then you insert your images at the far left of any paragraph you want them aligned with.

Once you have finished your page, click the Text tab at the top, right of your editing screen.

Find the gaps between groupings of images and text, enter your cursor, add a new line, and paste in that code.

Then click back to the Visual tab and Update your page or post.

You should find your stack of images is now behaving as it should.

I’ll leave you with two examples, using text from a literary filler text generator using HG Wells’ War of the Worlds.

Images stacked the WRONG way

wrong way The undulating common seemed now dark almost to blackness, except where its roadways lay grey and pale under the deep blue sky of the early night. It was dark, and suddenly void of men. Overhead the stars were mustering, and in the west the sky was still a pale, bright, almost greenish blue. The tops of the pine trees and the roofs of Horsell came out sharp and black against the western afterglow. The Martians and their appliances were altogether invisible, save for that thin mast upon which their restless mirror wobbled. Patches of bush and isolated trees here and there smoked and glowed still, and the houses towards Woking station were sending up spires of flame into the stillness of the evening air.

wrong wayNothing was changed save for that and a terrible astonishment. The little group of black specks with the flag of white had been swept out of existence, and the stillness of the evening, so it seemed to me, had scarcely been broken.

wrong wayIt came to me that I was upon this dark common, helpless, unprotected, and alone. Suddenly, like a thing falling upon me from without, came–fear.

With an effort I turned and began a stumbling run through the heather.

 

 

wrong wayThe fear I felt was no rational fear, but a panic terror not only of the Martians, but of the dusk and stillness all about me. Such an extraordinary effect in unmanning me it had that I ran weeping silently as a child might do. Once I had turned, I did not dare to look back.

I remember I felt an extraordinary persuasion that I was being played with, that presently, when I was upon the very verge of safety, this mysterious death–as swift as the passage of light–would leap after me from the pit about the cylinder and strike me down.

Image stacked the RIGHT way

Stacking images vertically in WordPress the right wayThe undulating common seemed now dark almost to blackness, except where its roadways lay grey and pale under the deep blue sky of the early night. It was dark, and suddenly void of men. Overhead the stars were mustering, and in the west the sky was still a pale, bright, almost greenish blue. The tops of the pine trees and the roofs of Horsell came out sharp and black against the western afterglow. The Martians and their appliances were altogether invisible, save for that thin mast upon which their restless mirror wobbled. Patches of bush and isolated trees here and there smoked and glowed still, and the houses towards Woking station were sending up spires of flame into the stillness of the evening air.


Stacking images vertically in WordPress the right wayNothing was changed save for that and a terrible astonishment. The little group of black specks with the flag of white had been swept out of existence, and the stillness of the evening, so it seemed to me, had scarcely been broken.


Stacking images vertically in WordPress the right wayIt came to me that I was upon this dark common, helpless, unprotected, and alone. Suddenly, like a thing falling upon me from without, came–fear.

With an effort I turned and began a stumbling run through the heather.


Stacking images vertically in WordPress the right wayThe fear I felt was no rational fear, but a panic terror not only of the Martians, but of the dusk and stillness all about me. Such an extraordinary effect in unmanning me it had that I ran weeping silently as a child might do. Once I had turned, I did not dare to look back.

I remember I felt an extraordinary persuasion that I was being played with, that presently, when I was upon the very verge of safety, this mysterious death–as swift as the passage of light–would leap after me from the pit about the cylinder and strike me down.


And I will finish off with what the text looks like with the ‘magic’ code inserted, as seen in the Text view of the page:

text-with-spacer-code

Chat With Us On Messenger