How to I make a numbered list continue after an image?

Using Ghost
1

I’m creating tutorial articles for my website, and they involve step-by-step numbered lists with images in between.

Unfortunately the number sequence doesn’t continue after an image has been inserted. I’ve tried using a markdown card instead, but as soon as it’s saved it always begins at number 1 again.

Has anyone found a way to get round this?

2

It’s not possible to put an image within a <ol> tag as a child of that tag. It /is/ possible to put an image a child of an <li>, but I think you’re going to struggle to get the Ghost editor to do that in a way that isn’t an HTML card.

So two options:

  1. Create the ol and li parts as html. Your opening tag should look like: <ol start="3">. Use the Ghost editor for the images. I tested this, and although it looks wrong in the editor, it is correct on preview. See images below

  2. Ditch the <ol> element. Make a bulleted (ul) list, and start each item with: Step 1, Step 2, etc. That’ll be 100% Ghost editor, but not quite what you were going for.

Option 1 results:
With html card open:

image
image793×295 5.92 KB

With html card not open:
image
image695×298 5.56 KB

Actual result on preview. (Yes, my whole site’s background is pink on my test site. I dunno why I left it that way…)
image

1 Like