Template:Stack documentation View history

Pages with TemplateStyles errors Pages with broken file links Portal Documentation shared content templates
VisualWikitext
(→‎Without {{tlf|stack}}: fixed template code)
(Updates)
 
(2 intermediate revisions by the same user not shown)
Line 95: Line 95:
[[File:Simple shapes example.png|thumb|right|Example 1a]]
[[File:Simple shapes example.png|thumb|right|Example 1a]]
[[File:Simple shapes example.png|thumb|right|Example 1b]]
[[File:Simple shapes example.png|thumb|right|Example 1b]]
{{Str left|{{Lorem ipsum span}}|124}}
{{Str left|{{Lorem ipsum}}|124}}


=====''Lorem''=====
=====''Lorem''=====
Line 109: Line 109:
{{anchor|With stack}}
{{anchor|With stack}}


====With {{tlf|stack}}====
====With {{tlc|stack}}====
----
----
=====''Lipsum''=====
=====''Lipsum''=====
{{stack|[[File:Simple shapes example.png|thumb|right|Example 2a]] [[File:Simple shapes example.png|thumb|right|Example 2b]]}}
{{stack|[[File:Simple shapes example.png|thumb|right|Example 2a]] [[File:Simple shapes example.png|thumb|right|Example 2b]]}}
{{Str left|{{Lorem ipsum span}}|124}}
{{Str left|{{Lorem ipsum}}|124}}


=====''Lorem''=====
=====''Lorem''=====
Line 125: Line 125:
{{clear}}
{{clear}}


====With {{tlf|stack begin}} and {{tlf|stack end}}====
====With {{tlc|stack begin}} and {{tlc|stack end}}====
=====''Lipsum'' with second table wider=====
=====''Lipsum'' with second table wider=====
{{stack begin}}
{{stack begin}}
Line 199: Line 199:


===More examples===
===More examples===
{{tlf|Stack}} can also be used to float one or more images across a page.
{{tlc|Stack}} can also be used to float one or more images across a page.
{{stack |[[File:Simple shapes example.png|80px]]}}
{{stack |[[File:Simple shapes example.png|80px]]}}
{{stack |[[File:Simple shapes example.png|120px]]}}
{{stack |[[File:Simple shapes example.png|120px]]}}
Line 206: Line 206:
{{stack|[[File:Simple shapes example.png|120px]]}}
{{stack|[[File:Simple shapes example.png|120px]]}}
</pre>
</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.
It might take some experience to learn how the box area floats, in combination with various images or [[WP:Wikitables|wikitables]] on a page. {{tlc|Stack}}'s operation is very quick, as it uses an [[HTML]] &lt;table> to achieve its effects.


===Floating portal boxes===
===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.
{{tlc|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.
{{infobox
{{infobox
|label1=Infobox
|label1=Infobox

Latest revision as of 05:28, 5 September 2022

 This documentation has not been fully transcoded from Wikipedia and may contain missing templates in the instructions.


This template serves as the shared documentation for {{Stack}}, {{Stack begin}}, and {{Stack end}}.


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.

Usage

At its simplest: 

{{stack|<objects>}}

Alternatively, using {{stack begin}} and {{stack end}}: 

{{stack begin}}
<objects>
{{stack end}}

The <object> may simply be a string of wikicode for many images/templates.

Optional parameters

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

or 

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

where

  • float= left or right (default is right)
    This option can be used to float the stack to the left or right of the page
  • clear= 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: 

{{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
}}
  • This multiple argument version does include extra vertical whitespace between each (set of) <object(s)>.

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:

=====''Lipsum''=====
[[File:Simple shapes example.png|thumb|right|Example 1a]]
[[File:Simple shapes example.png|thumb|right|Example 1b]]
... text ...

=====''Lorem''=====
[[File:Simple shapes example.png|thumb|left|Example 1c]]
... text ...

=====''Ipsum''=====
... text ...

The result of this is shown in the 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:

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

=====''Lorem''=====
[[File:Simple shapes example.png|thumb|left|Example 2c]]
... text ...

=====''Ipsum''=====
... text ...

The result of this is shown in the 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).

Without {{stack}}

Lipsum
Example 1a
Example 1b

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem
Example 1c

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

With {{stack}}

Lipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem
Example 2c

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

With {{stack begin}} and {{stack end}}

Lipsum with second table wider

Page Template:Stack/styles.css has no content.

Sample table 1
Example 1a
Example 1b
Sample wider table 2
Example 2a
Example 2b

Template:Stack end Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem
Sample table 3
Example 3a

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lipsum with first table wider
Page Template:Stack/styles.css has no content.
Sample wider table 1
Example 1a
Example 1b
Sample table 2
Example 2a
Example 2b

Template:Stack end Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem
Sample table 3
Example 3a

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

More examples

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

{{stack|[[File:Simple shapes example.png|80px]]}}
{{stack|[[File:Simple shapes example.png|120px]]}}

It might take some experience to learn how the box area floats, in combination with various images or wikitables on a page. {{Stack}}'s operation is very quick, as it uses an HTML <table> to achieve its effects.

Floating portal boxes

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

No Title

Family

Arlyn (Mother) Gilbert Sr. (Father) Gilbert Jr. (Brother) Shane (Sister) Martin (Grandfather) Amada (Grandmother) Restituta (Grandmother-in-Law) Bienvenido (Grandfather-in-Law) Librada (Great Grandmother-in-Law) Maximo (Great Grandfather-in-Law)

File:Mona Lisa, by Leonardo da Vinci, from C2RMF retouched.jpg
Test image

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.

The example here uses Template:Tld to float two portal boxes (Animals, Cats) as follows: 

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

The two portal-boxes are stacked and floated together by both being listed as Template:Tld's (first) parameter. Because the infobox and image were also stacked together, Template:Tld moved the two portal-boxes alongside the infobox despite they are 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 Template:Tld call, such as in a stub or an article with many stacked images near the bottom. Using Template:Tld is extremely efficient, due to being a short template which uses builtin tag <table> to float the boxes.

Stack template family

Tracking category

See also

Retrieved from "https://beta.waze.com/wiki/Mauritius/index.php?title=Template:Stack_documentation&oldid=177249"