Template:Stack documentation: Difference between revisions

Revision as of 04:21, 22 March 2012

Latest revision as of 21:40, 4 October 2024

(41 intermediate revisions by 20 users not shown)

Line 1:

<noinclude>

{{ombox |text=This template serves as the shared documentation for {{tl|Stack}}, {{tl|Stack begin}}, and {{tl|Stack end}}.}}

</noinclude>

This template can be used to stack images and other floating content such as infobox templates without causing problems with spacing and floating. Enter a string of images/templates as the first parameter to have them stack without generating floating errors or spacing errors. You can stack many objects from the top of a section and not force further subsections to space out.

{{TOClimit|3}}

=== Basic usage ===

== Usage ==

Using {{tld|stack}},

At its simplest:

<pre style="overflow: auto">

<syntaxhighlight lang="wikitext">

{{stack|<objects>}}

</syntaxhighlight>

</pre>

or, alternativelyAlternatively, using {{tld|stack begin}}/ and {{tld|stack end}}:

<syntaxhighlight lang="wikitext">

<pre style="overflow: auto">

{{stack begin}}

<objectobjects>

{{stack mid}}

<object>

...

{{stack end}}

</syntaxhighlight>

</pre>

Previous usage suggests <nowiki>{{stack mid}}</nowiki> is not always needed. Thus,The <code><object></code> may simply be a string of wiki codewikicode for many images / templates.

==== Optional parameters ====

<syntaxhighlight lang="wikitext">

:<code><nowiki>{{</nowiki>stack| <objects> | float=left/'''right''' | clear=true/'''false'''<nowiki>}}</nowiki></code>

{{stack| <object(s)> | float=left or right | clear=true or false | margin=true or false}}

</syntaxhighlight>

or

<syntaxhighlight lang="wikitext">

:<code><nowiki>{{</nowiki>stack begin | float=left/'''right''' | clear=true/'''false'''<nowiki>}}</nowiki></code>

{{stack begin | float=left or right | clear=true or false | margin=true or false}}

</syntaxhighlight>

where

:*<code>float=</code> ''left'' or ''right'' (default is '''right''')

:*: This option can be used to float the stack to the left or right of the page

:*<code>clear=</code> ''true'' or ''false'' (default is '''false''')

:*: This option can be used to force the stack to the far left or right (e.g., near an infobox).

*margin= ''true'' or ''false'' (default is '''false''')

*: This option can be used to add a 1em margin to the left (for float right) or right (for float left).

You can also explicitly list multiple arguments:

<syntaxhighlight lang="wikitext">

{{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

}}

</syntaxhighlight>

* This multiple argument version does include extra vertical whitespace between each (set of) <code><object(s)></code>.

== Examples ==

<!--

-->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="wikitext">

===Basic examples===

=====''Lipsum''=====

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 acheive this layout, without using a stack template, we could try the following code

[[File:Simple shapes example.png|thumb|right|Example 1a]]

<pre>

[[File:Simple shapes example.png|thumb|right|Example 1b]]

=====Lipsum=====

[[File:Example.png|thumb|right|Example 1a]]

[[File:Example.png|thumb|right|Example 1b]]

... text ...

=====''Lorem''=====

[[File:ExampleSimple shapes example.png|thumb|left |Example 1c]]

... text ...

=====''Ipsum''=====

... text ...

</syntaxhighlight><!--

</pre>

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

-->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:<!--

<pre>

=====Lipsum=====

--><syntaxhighlight lang="wikitext">

{{stack|

=====''Lipsum''=====

[[File:Example.png|thumb|right|Example 2a]]

{{stack |[[File:Simple shapes example.png|thumb|right|Example 2a]] [[File:Simple shapes example.png|thumb|right|Example 2b]]}}

}}

... text ...

=====''Lorem''=====

[[File:ExampleSimple shapes example.png|thumb|left |Example 2c]]

... text ...

=====''Ipsum''=====

... text ...

</syntaxhighlight><!--

</pre>

The result of this is show 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).

-->The result of this is shown 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}}

====Without stack ====

=====Lipsum=====

[[File:Example.png|thumb|right|Example 1b]]

[[File:Example.png|thumb|right|Example 2b]]

{{anchor|Without stack}}

{{lipsum}}

====Without {{tlf|stack}}====

=====''Lipsum''=====

[[File:Simple shapes example.png|thumb|right|Example 1a]]

[[File:Simple shapes example.png|thumb|right|Example 1b]]

{{Str left|{{Lorem ipsum span}}|124}}

=====''Lorem''=====

[[File:ExampleSimple shapes example.png|thumb|left |Example 3b1c]]

{{lipsum}}

=====''Ipsum''=====

{{lipsum}}

{{lipsum}}

{{clear}}

{{anchor|With stack}}

{{-}}

====With {{tlf|stack }}====

----

=====Lipsum=====

=====''Lipsum''=====

{{stack|

{{stack|[[File:Simple shapes example.png|thumb|right|Example 2a]] [[File:Simple shapes example.png|thumb|right|Example 1a2b]]}}

{{Str left|{{Lorem ipsum span}}|124}}

[[File:Example.png|thumb|right|Example 2a]]

}}

{{lipsum}}

=====''Lorem''=====

[[File:ExampleSimple shapes example.png|thumb|left |Example 3a2c]]

{{lipsum}}

=====''Ipsum''=====

{{lipsum}}

{{lipsum}}

{{clear}}

====With {{tlf|stack begin}} and {{tlf|stack end}}====

{{-}}

====With=''Lipsum'' stackwith beginsecond table wider=====

=====Lipsum with second table wider=====

{{stack begin}}

{| class="wikitable"

! Sample table 1

|-

| Example 1a

|-

| Example 1b

|}

{|class=wikitable

!Sample wider table 2

|-

|Example 2a

|-

|Example 2b

|}

{| class="wikitable"

{{stack end}}

! Sample wider table 2

{{lipsum}}

=====Lorem=====

{|

!Sample table 3

|-

|Example 3a2a

|}

{{lipsum}}

=====Ipsum=====

{{lipsum}}

{{lipsum}}

{{-}}

=====Lipsum with first table wider=====

{{stack begin}}

{|class=wikitable

!Sample wider table 1

|-

|Example 1a2b

|-

|Example 1b

|}

{|class=wikitable

!Sample table 2

|-

|Example 2a

|-

|Example 2b

|}

{{stack end}}

{{lipsum}}

=====''Lorem''=====

{| style="background:whitesmoke;"

{|

! Sample table 3

|-

| Example 3a

|-

|Example 3a

|}

{{lipsum}}

=====''Ipsum''=====

{{lipsum}}

{{lipsum}}

{{clear}}

=====''Lipsum'' with first table wider=====

{{-}}

====With stack begin and mid====

=====Lipsum with second table wider=====

{{stack begin}}

{| class="wikitable"

! Sample wider table 1

|-

| Example 1a

|-

| Example 1b

|}

{{stack mid}}

{|class=wikitable

!Sample wider table 2

|-

|Example 2a

|-

|Example 2b

|}

{| class="wikitable"

{{stack end}}

! Sample table 2

{{lipsum}}

=====Lorem=====

{|

!Sample table 3

|-

| Example 3a2a

|}

{{lipsum}}

=====Ipsum=====

{{lipsum}}

{{lipsum}}

{{-}}

=====Lipsum with first table wider=====

{{stack begin}}

{|class=wikitable

!Sample wider table 1

|-

| Example 1a2b

|-

|Example 1b

|}

{{stack mid}}

{|class=wikitable

!Sample table 2

|-

|Example 2a

|-

|Example 2b

|}

{{stack end}}

{{lipsum}}

=====''Lorem''=====

{| style="background:whitesmoke;"

{|

! Sample table 3

|-

| Example 3a

|-

|Example 3a

|}

{{lipsum}}

=====''Ipsum''=====

{{lipsum}}

{{lipsum}}

{{clear}}

{{-}}

====''NB''====

''Obviously these current examples '''don't''' show any difference between with and without mid'' except for probably ''unwanted'' vertical space.

In fact, the reason for creating {{tl|stack mid}}, at least in [http://en.wikipedia.org/w/index.php?title=Colorado_River&diff=483291966&oldid=483039105 one example], was resolved by removing [[Help:Table#Tables|table style]] <code>align=right</code> from tables between {{tl|stack begin}} and {{tl|stack end}}.

However {{tl|stack mid}} may still be useful for tables that would otherwise prefer to use the multiple argument {{tl3|stack|one|two|three...}} option, which should be identical to using {{tl|stack begin}}, {{tl|stack mid}} and {{tl|stack end}} where the latter easily allows the <nowiki>{| ... |}</nowiki> [[Help:Table|table syntax]] (which must begin on the start of the line).

===More examples===

{{tlf|Stack}} can also be used to float 1one or more images across a page.

{{stack |[[File:ExampleSimple shapes example.png|50px80px]]}}

{{stack |[[File:ExampleSimple shapes example.png|50px120px]]}}

<presyntaxhighlight stylelang="width: 25em;wikitext" style="overflow: auto;">

{{stack|[[File:ExampleSimple shapes example.png|50px80px]]}}

{{stack|[[File:ExampleSimple shapes example.png|50px120px]]}}

</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. The{{tlf|Stack}}'s operation of Template:stack is very quick, usingas theit uses an [[HTML]] &lt;table> featureto ofachieve theits [[HTML]] [[markup language]]effects.

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

Because auto-floating of portal boxes could cause a loss of margin control, the [[Template:stack]] can be used, as needed in some articles, when floating a portal box would look better alongside an infobox (or right-side image).

{| class={infobox

| '''label1=Infobox'''

<br>Line|data1=line 1 <br />Lineline 2 <br />Lineline 3 <br />Lineline 4 <br />L5line 5 <br />L6line 6 <br />L7line 7 <br />L8line 8 <br />L9line 9

}}

[[File:Mona Lisa, by Leonardo da Vinci, from C2RMF retouched.jpg|thumb|right|60px|Test image]]

{| class="wikitable"

|style="width:33.0em<!--(was 420px)-->;"|

This is a wikitable serving as a typical left-aligned table. The overlap on left-aligned tables had been a frequent problem when other boxes nearby were set to "float:right". So this is a test of how well a floating portal-box would avoid overlapping onto a left-side table.

|}

{{stack |{{portal|Animals}}{{portal|Cats}}}}

[[File:Mona Lisa, by Leonardo da Vinci, from C2RMF retouched.jpg|thumb|right|60px|Test]]

{| class=wikitable

The example here uses {{tld|stack}} to float two portal boxes (Animals, Cats) as follows:

| width=420px|

{{clear}}<syntaxhighlight lang="wikitext">

A '''wikitable''' here, as a typical left-side table. The overlap on left-side tables had been a frequent problem with allowing other boxes to "float:right" on a page. So this is a test of how well a floating portal-box would avoid overlapping onto a left-side table.

{{stack |{{portal|Animals}}{{portal|Cats}} }}

|}

</syntaxhighlight>

{{stack|{{portal|Animals}}{{portal|Cats}} }}

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 being after the image.

The example here uses {{tld|stack}} to float 2 portal boxes (for Animals & Cats), as follows:

:* <nowiki>{{stack |{{portal|Animals}}{{portal|Cats}} }}

</nowiki>

The 2 portal-boxes are stacked together, and floated together as a stack, by both being listed in parameter 1 to {{tld|stack}}. Although the 2 portal-boxes were specified ''below'' the [[Mona Lisa]] image, because the infobox+image were also stacked together, then the {{tld|stack}} moved the 2 portal-boxes, even higher, alongside the infobox.

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.

=== Stack templatestemplate family ===

* {{tl|Stack}}

* {{tl|Stack begin}}

* {{tl|Stack end}}

=== SeeTracking alsocategory ===

* {{clc|Pages using stack with unknown parameters}}

* {{tl|Double image}} places images side by side horizontally

== See also ==

* {{tl|Multiple image}} allows both vertical and horizontal layouts

* {{tl|Multiple image}}, providing both vertical and horizontal layouts for multiple images.

* {{tl|Superimpose}}—places one image over another

* {{tl|Superimpose2Superimpose}}—places, upwhich toplaces 50one image layers over one another.

* {{tl|Superimpose2}}, which can place up to fifty image layers over one another.

* [[Wikipedia:Extended image syntax#The many-floating-objects problem]]

<includeonly>

<!-- Shared categories go here: -->

</includeonly><noinclude>

[[Category:TemplateDocumentation documentationshared content templates]]

</noinclude>