Editing Incubator escapee wiki:Extended image syntax (section)

=== Interaction between left-floating images and lists ===
{{Shortcut|WP:EISL}}
List bullets and numbers can sometimes overlap left-floating images, and indented lines may not appear correctly when next to left-floating images. For example:

{{markup
| <syntaxhighlight lang="wikitext">
[[File:Westminstpalace.jpg|left|thumb|100px]]
<ol>
  <li>list item A1
    <ol>
      <li>list item B1</li>
      <li>list item B2</li>
    </ol>continuing list item A1
  </li>
  <li>list item A2</li>
</ol></syntaxhighlight>
|[[File:Westminstpalace.jpg|left|thumb|100px]]
<ol>
  <li>list item A1
    <ol>
      <li>list item B1</li>
      <li>list item B2</li>
    </ol>continuing list item A1
  </li>
  <li>list item A2</li>
</ol>
|<syntaxhighlight lang="wikitext">
[[File:Westminstpalace.jpg|left|thumb|100px]]
First line
:Second line
::Third line
:::Fourth line
</syntaxhighlight>
|[[File:Westminstpalace.jpg|left|thumb|100px]]
First line
:Second line
::Third line
:::Fourth line
}}

The {{tl|flowlist}} template enables lists to stay clear of these left-floating objects:
<syntaxhighlight lang="wikitext">
[[File:Westminstpalace.jpg|left|thumb|100px]]
{{flowlist}}
  <ol>
    <li>list item A1
      <ol>
        <li>list item B1</li>
        <li>list item B2</li>
      </ol>continuing list item A1
    </li>
    <li>list item A2</li>
  </ol>
{{endflowlist}}

{{flowlist}}
First line
:Second line
::Third line
:::Fourth line
{{endflowlist}}
</syntaxhighlight>
Renders as:
[[File:Westminstpalace.jpg|left|thumb|100px]]
{{flowlist}}
  <ol>
    <li>list item A1
      <ol>
        <li>list item B1</li>
        <li>list item B2</li>
      </ol>continuing list item A1
    </li>
    <li>list item A2</li>
  </ol>
{{endflowlist}}

[[File:Westminstpalace.jpg|left|thumb|100px]]
{{flowlist}}
First line
:Second line
::Third line
:::Fourth line
{{endflowlist}}
{{clear}}
This method will not work inside of a table, and if your list is longer than the floated element, then the list will not flow around the image like normal, but instead be one block, leaving white space below the floated element.