Template:Stack documentation: Difference between revisions

Content deleted Content added
Floating portal boxes: Add clear instead of width & overflow to fix mobile portrait (Android).
Tags: Mobile edit Mobile web edit Advanced mobile edit
 
(10 intermediate revisions by 9 users not shown)
Line 9:
 
At its simplest:
<syntaxhighlight lang="moinwikitext">
{{stack|<objects>}}
</syntaxhighlight>
 
Alternatively, using {{tld|stack begin}} and {{tld|stack end}}:
<syntaxhighlight lang="moinwikitext">
{{stack begin}}
<objects>
Line 23:
 
===Optional parameters===
<syntaxhighlight lang="moinwikitext">
{{stack| <object(s)> | float=left or right | clear=true or false | margin=true or false}}
</syntaxhighlight>
or
<syntaxhighlight lang="moinwikitext">
{{stack begin | float=left or right | clear=true or false | margin=true or false}}
</syntaxhighlight>
where
Line 39:
 
You can also explicitly list multiple arguments:
<syntaxhighlight lang="moinwikitext">
{{stack| float=left or right | clear=true or false | margin=true or false
|1=<object(s)>
|2=<object(s)>, etc. up to 9 parameters in the current version
Line 52:
-->To illustrate the utility of the stack templates, consider the following situation. We would like to have two right floating images at the top of the first section of our article (here, the ''Lipsum'' section), and one left floating image at the top of the second section (here, the ''Lorem'' section). To achieve this layout, without using a stack template, we could try the following code:<!--
 
--><syntaxhighlight lang="moinwikitext">
=====''Lipsum''=====
[[File:TestSimple shapes example.png|thumb|right|Example 1a]]
[[File:TestSimple shapes example.png|thumb|right|Example 1b]]
... text ...
 
=====''Lorem''=====
[[File:TestSimple shapes example.png|thumb|left|Example 1c]]
... text ...
 
Line 66:
</syntaxhighlight><!--
 
-->The result of this is shown in the ''[[#Without stack|without stack]]'' section below. Notice how the left floating image (Example 1c) is prevented from floating above the last right floating image (Example 1b). You may need to resize the width of your browser to fully appreciate the issue. To fix this problem, we can stack the two right floating images together, using the following code:<!--
 
--><syntaxhighlight lang="moinwikitext">
=====''Lipsum''=====
{{stack |[[File:TestSimple shapes example.png|thumb|right|Example 2a]] [[File:TestSimple shapes example.png|thumb|right|Example 2b]]}}
... text ...
 
=====''Lorem''=====
[[File:TestSimple shapes example.png|thumb|left|Example 2c]]
... text ...
 
Line 81:
</syntaxhighlight><!--
 
-->The result of this is showshown in the ''[[#With stack|with stack]]'' section below. Notice how by adding this stack template, the left floating image (Example 2c) can now float higher and is not blocked from floating higher than the top of the last right floating image (Example 2b).
{{clear}}
 
Line 87:
====Without {{tlf|stack}}====
=====''Lipsum''=====
[[File:TestSimple shapes example.png|thumb|right|Example 1a]]
[[File:TestSimple shapes example.png|thumb|right|Example 1b]]
{{Str left|{{Lorem ipsum span}}|124}}
''{{lipsum}}''
 
=====''Lorem''=====
[[File:TestSimple shapes example.png|thumb|left|Example 1c]]
''{{lipsum}}''
 
=====''Ipsum''=====
''{{lipsum}}''
 
''{{lipsum}}''
{{clear}}
 
Line 105:
----
=====''Lipsum''=====
{{stack|[[File:TestSimple shapes example.png|thumb|right|Example 2a]] [[File:TestSimple shapes example.png|thumb|right|Example 2b]]}}
{{Str left|{{Lorem ipsum span}}|124}}
''{{lipsum}}''
 
=====''Lorem''=====
[[File:TestSimple shapes example.png|thumb|left |Example 2c]]
''{{lipsum}}''
 
=====''Ipsum''=====
''{{lipsum}}''
 
''{{lipsum}}''
{{clear}}
 
Line 138:
|}
{{stack end}}
''{{lipsum}}''
 
=====''Lorem''=====
Line 147:
|-
|}
''{{lipsum}}''
 
=====''Ipsum''=====
''{{lipsum}}''
 
''{{lipsum}}''
{{clear}}
 
Line 174:
|}
{{stack end}}
''{{lipsum}}''
 
=====''Lorem''=====
Line 183:
|-
|}
''{{lipsum}}''
 
=====''Ipsum''=====
''{{lipsum}}''
 
''{{lipsum}}''
{{clear}}
 
===More examples===
{{tlf|Stack}} can also be used to float one or more images across a page.
{{stack |[[File:TestSimple shapes example.png|80px]]}}
{{stack |[[File:TestSimple shapes example.png|120px]]}}
<presyntaxhighlight lang="wikitext" style="width:25.0em;overflow:auto;">
{{stack|[[File:TestSimple shapes example.png|80px]]}}
{{stack|[[File:TestSimple shapes example.png|120px]]}}
</syntaxhighlight>
</pre>
It might take some experience to learn how the box area floats, in combination with various images or [[WP:Wikitables|wikitables]] on a page. {{tlf|Stack}}'s operation is very quick, as it uses an [[HTML]] &lt;table> to achieve its effects.
 
===Floating portal boxes===
{{tlf|Stack}} can be used to float a portal box beside an infobox (or other right-aligned item) when other methods might not work as anticipated.
{| class="{infobox"
| '''label1=Infobox'''
<br/>|data1=line 1 <br />line 2 <br />line 3 <br />line 4 <br />line 5 <br />line 6 <br />line 7 <br />line 8 <br />line 9
|}}
[[File:Mona Lisa, by Leonardo da Vinci, from C2RMF retouched.jpg|thumb|right|60px|Test image]]
{| class="wikitable"
Line 213:
|}
{{stack |{{portal|Animals}}{{portal|Cats}}}}
 
The example here uses {{tld|stack}} to float two portal boxes (Animals, Cats) as follows:
{{clear}}<syntaxhighlight lang="wikitext">
<pre style="width:32em; overflow:auto">
{{stack |{{portal|Animals}}{{portal|Cats}} }}
</syntaxhighlight>
</pre>
The two portal-boxes are stacked and floated together by both being listed as {{tld|stack}}'s (first) parameter. Because the infobox and image were also stacked together, {{tld|stack}} moved the two portal-boxes alongside the infobox despite their being specified after the image.
 
Normally, a portal-box would be stuck below the Mona Lisa image, causing this entire text section to format further below, and causing a large text-gap of empty whitespace to appear near the infobox. There is no limit to the number of portalboxes (or Commonscat boxes) which can be listed within a {{tld|stack}} call, such as in a stub or an article with many stacked images near the bottom. Using {{tld|stack}} is extremely efficient, due to being a short template which uses builtin tag &lt;table> to float the boxes.
Line 232 ⟶ 233:
* {{tl|Superimpose}}, which places one image over another.
* {{tl|Superimpose2}}, which can place up to fifty image layers over one another.
* [[Wikipedia:Extended image syntax#The many-floating-objects problem]]
 
<noinclude>