Images and Ordered Lists

byPjGermain

15K followers

Updated 9 years ago

Inserting Images within Ordered Lists

The Visual editor interface within WordPress is pretty cool. It's pretty much What You See is What You Get (WYSIWYG).

But, there are a few drawbacks to this.

And, when I first began blogging, I knew I wanted to created some lists of great information. Bulleted lists are typically not a problem.

BUT.....

Numbered lists can be an issue. ESPECIALLY if you have a long one and want to insert an image without messing up the numbering order:

You may not be able to see the image well, but with a numbered list, of course, when you hit the Enter key to insert an image, the remainder of the list started with a "1" again.

UGH!

I fought with this for a long time, so I'm here to teach you a wee trick to correct this and hopefully save you a BUNCH of frustration.

After clicking the Enter key to insert your image, Switch over to the TEXT editor and search just below the image where the code is for the numbered list.

It will look something like this:

< ol >

That's the Begin code for Ordered List.

The ending code will be way below it and appear like this:

< /ol >

But, find the first one I mentioned above and change it slightly to pick up the next number in your sequence. For example, my last number was 12. So, below the image, I want it to pick up with 13.

So, I'll change the OL code to appear like this (within the text editor)"

< ol start ="13 >

Here's an image in case the above doesn't turn out the way I intended:

Then, when I switch back over to the Visual editor, I see this:

And, boom! We're all set!

I hope this helps. It was killing me years ago!

Also, for Bullets (instead of numbers) the HTML code is just slightly different:

Cheers!

pj