Images in an ordered list

[hoffie4]

I'm fairly new to Flare and HTML/CSS. I've just started building a project for an online knowledgebase and I'm having a bit of an issue when it comes to adding figures within ordered lists. I have created a bunch of instructions as ordered lists and after most list items there needs to be an image to go with the step. What is the best practice for doing this?

I've been adding the images by adding a <div> within the list item, and I know I can also get a similar result by doing Shift+Enter or ending the ordered list and then continuing it after the image and manually aligning the image with the list items. I'm just wondering if this is the best way to go about this or if I should be creating a li style/img style. Any help would be greatly appreciated. I just don't want to have to go back and change everything later because I didn't do it right the first time.


TL;DR - I want to have images within an ordered list and want to know the best way to do this so that they are aligned with the list items and not included in the numbering

[Nita Beck]

Welcome to the forums!

You need to add a paragraph block within the list item. No need to end the list, place the image, and then start a new list.

At the end of the list item after which you want to place an image, press Ctrl+; (semicolon). Alternatively, right-click the list item's block in the structure bars at the left and select Make Paragraph Items.

Now that you've got the paragraph block, you can add the image.

To make the next list item, make a new paragraph under the paragraph with the image and then press Shift+Tab. Alternatively, look for the little yellow block and left-pointing arrow and click that. That will return you to adding the next list item.

Check out this topic in the Flare 12 Help, which isn't specific to adding images within list items but is generally about the same same technique: http://webhelp.madcapsoftware.com/flare ... _Items.htm

I hope this helps. Keep asking questions!

[ChoccieMuffin]

I do as Nita says, but with an added little tweak. I have created a p.graphic that has a bit of extra space top and bottom for my graphics, and also "page-break-before:avoid". And to the introductory paragraph I also apply my generic style .KeepWithNext which has the attribute "page-break-after:avoid", so the two paragraphs stay together.

(Caveat: I have noticed that if the graphic appears in the first item of a list, the "keep together" trick doesn't work. No idea why.)

[hoffie4]

Thank you for your help. This worked as I wanted. I had actually tried this before, but I had been doing it wrong. I would add a new list item and then make it a paragraph item, which threw me off because it was still numbered. I wouldn't have thought to make the list item a paragraph item so that the step is also labelled with a p tag.

Also, thanks to @ChoccieMuffin for the tip. Did you create you p.graphic style under the paragraph style or the list item style?

[ChoccieMuffin]

Thank you for your help. This worked as I wanted. I had actually tried this before, but I had been doing it wrong. I would add a new list item and then make it a paragraph item, which threw me off because it was still numbered. I wouldn't have thought to make the list item a paragraph item so that the step is also labelled with a p tag.

Also, thanks to @ChoccieMuffin for the tip. Did you create you p.graphic style under the paragraph style or the list item style?

Not quite sure I understood you correctly, but I created p.graphic in my stylesheet and applied it to the paragraph that contains the image.

My list looks like this:

List.png

And the code behind it looks like this.

Code: Select all

<ol>
            <li class="KeepWithNext">
                <p>This is the introductory paragraph.</p>
                <p class="graphic">
                    <img src="../images/Save_button.png" />
                </p>
            </li>
            <li>This is the second list item.</li>
        </ol>