Editing Incubator escapee wiki:Extended image syntax (section)

==Section 2==
[[File:Westminstpalace.jpg|thumb|70px|left|Figure 2.1 ('''left''')]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</syntaxhighlight>

<div style="display:flex; flex-flow: row wrap; text-align: left;">
{{Inline block|width=38em|style=border: 1px solid #a2a9b1; padding: 0.5em; margin: 0.5em; flex: 25em;|2=div|1=
'''The problem''':
{{Fake heading|Section 1}}
[[File:Westminstpalace.jpg|thumb|70px|right|Figure 1.1 ('''right''')]]
[[File:Westminstpalace.jpg|thumb|70px|right|Figure 1.2 ('''right''')]]
[[File:Westminstpalace.jpg|thumb|70px|right|Figure 1.3 ('''right''')]]
[[File:Westminstpalace.jpg|thumb|70px|right|Figure 1.4 ('''right''')]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{{Fake heading|Section 2}}
[[File:Westminstpalace.jpg|thumb|70px|left|Figure 2.1 ('''left''')]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
}}
{{Inline block|width=38em|style=border: 1px solid #a2a9b1; padding: 0.5em; margin: 0.5em; flex: 25em;|2=div|1=
'''Setting alignment of final image to none''':
{{Fake heading|Section 1}}
[[File:Westminstpalace.jpg|thumb|70px|right|Figure 1.1 ('''right''')]]
[[File:Westminstpalace.jpg|thumb|70px|right|Figure 1.2 ('''right''')]]
[[File:Westminstpalace.jpg|thumb|70px|right|Figure 1.3 ('''right''')]]
[[File:Westminstpalace.jpg|thumb|70px|right|Figure 1.4 ('''right''')]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{{Fake heading|Section 2}}
[[File:Westminstpalace.jpg|thumb|70px|none|Figure 2.1 ('''none''')]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
}}
{{Inline block|width=38em|style=border: 1px solid #a2a9b1; padding: 0.5em; margin: 0.5em; flex: 25em;|2=div|1=
'''Using gallery tags for large numbers of images''':
{{Fake heading|Section 1}}
<gallery widths="70px" heights="50px">
Westminstpalace.jpg|Figure 1.1
Westminstpalace.jpg|Figure 1.2
Westminstpalace.jpg|Figure 1.3
Westminstpalace.jpg|Figure 1.4
</gallery>
For more information on the gallery tag, see '''[[Help:Gallery tag]]'''.
{{Fake heading|Section 2}}
[[File:Westminstpalace.jpg|thumb|70px|left|Figure 2.1 ('''left''')]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
}}
</div>

===Using "upright"===
[[File:Westminstpalace.jpg|thumbnail|upright|left|alt=A large clock tower and other buildings line a great river.|The "<code>upright</code>" option is about 75% of thumbnail width.]] [[File:Westminstpalace.jpg|thumb|upright=1.5|right|alt=A large clock tower and other buildings line a great river.|The "<code>upright=1.5</code>" option]] The <code>upright</code> option works in combination with the <code>thumbnail</code> or <code>thumb</code> option to resize an image to about 75% of the width of a plain <code>thumbnail</code>. This is useful for displaying images in [[Page orientation|"portrait" orientation]], since such tall and narrow images tend to look too large when scaled to the same width as "landscape" oriented images. The <code>upright</code> option scales larger or smaller in step with user screen resolution. The relative size can be determined with a multiplier such as <code>upright=''x''</code>. If ''x''=1 then the image is standard thumbnail width. ''E.g.'', <syntaxhighlight lang="wikitext" inline>[[File:Westminstpalace.jpg|thumbnail|upright|left|alt=A large clock tower and other buildings line a great river.|The "<code>upright</code>" option is about 75% of thumbnail width.]]</syntaxhighlight> (shown on the left) and <syntaxhighlight lang="wikitext" inline>[[File:Westminstpalace.jpg|thumb|upright=1.5|right|alt=A large clock tower and other buildings line a great river.|The "<code>upright=1.5</code>" option]]</syntaxhighlight> (shown on the right).
{{clr}}

===Using frame===
[[File:Westminstpalace.jpg|frame|alt=A large clock tower and other buildings line a great river.|The Palace of Westminster]] With this option, the embedded image is shown with its actual size enclosed by a frame, regardless of the "thumb" or "size" attribute, and the caption, if any, is visible in the frame. Without the options <code>left</code>, <code>center</code>, and <code>none</code>, the image is normally on the right: <code><nowiki>[[File:Westminstpalace.jpg|frame|alt=A large clock tower and other buildings line a great river.|The Palace of Westminster]]</nowiki></code>.{{clr}}
With none of the options other than <code>''size''px</code> and <code>''alternate (caption) text''</code>, an embedded image is rendered inline.

===Using alignment "none" thumbnails in tables===

The option <code>none</code> can be used to have thumbnails without left- or right-alignment. This is probably most useful for [[Wikipedia:How to use tables|tables]]. This is an example:

{| class="wikitable"
|+ London's palaces
|-
| Palace of Westminster || [[File:Westminstpalace.jpg|thumb|none|100px|alt=A large clock tower and other buildings line a great river.|From the Thames]] || <code><nowiki>[[File:Westminstpalace.jpg|thumb|none|100px|alt=A large clock tower and other buildings line a great river.|From the Thames]]</nowiki></code>
|-
| Buckingham Palace || [[File:Buckingham Palace 2003.jpg|thumb|none|100px|alt=Grand city building below beautiful blue sky and clouds|Queen's home]] || <code><nowiki>[[File:Buckingham Palace 2003.jpg|thumb|none|100px|alt=Grand city building below beautiful blue sky and clouds|Queen's home]]</nowiki></code>
|}

===Formatting and links in captions===

[[File:Westminstpalace.jpg|right|thumbnail|alt=A large clock tower and other buildings line a great river.|This is the [[Palace of Westminster]] in London]]

You can put links in the caption text, as demonstrated in this image:

<syntaxhighlight lang="wikitext">[[File:Westminstpalace.jpg|right|thumbnail|alt=A large clock tower and other buildings line a great river.|This is the [[Palace of Westminster]] in London]]</syntaxhighlight>

Just make sure the number of opening and closing square brackets are right. One extra or missing would mean the entire image syntax line would not work.
{{clear}}

[[File:Westminstpalace.jpg|right|thumbnail|alt=A large clock tower and other buildings line a great river.|<div style="text-align: center">This is <span style="color: green">the </span><br /> [[Palace of Westminster]]<br /> '''in <span style="color: red">London</span>'''</div>]]

Additional caption formatting options are possible; all normal formatting should just work.

<syntaxhighlight lang="wikitext">[[File:Westminstpalace.jpg|right|thumbnail|alt=A large clock tower and other buildings line a great river.|<div style="text-align: center">This is <span style="color: green">the </span><br /> [[Palace of Westminster]]<br /> '''in <span style="color: red">London</span>'''</div>]]
</syntaxhighlight>

{{clear}}

=== 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.