Template:Stack
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
badloAt its simplest:
{{stack|<objects>}}
Alternatively, using {{stack begin}}
, {{stack mid}}
and {{stack end}}
:
{{stack begin}} <object> {{stack mid}} <object> ... {{stack end}}
Previous usage suggests {{stack mid}} is not always needed. Thus, <object>
may simply be a string of wikicode for many images/templates.
Optional parameters
badlo{{stack| <objects> | float=left/right | clear=true/false}}
or
{{stack begin | float=left/right | clear=true/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).
You can also explicily list multiple arguments, which is then identical to the {{stack begin}}, {{stack mid}} and {{stack end}} version.
{{stack| float=left/right | clear=true/false
- |1=<object(s)>
- |2=<object(s)>
- |3=<object(s)>, etc. up to 9 parameters in the current version
}}
- NB This multiple argument version does include extra vertical whitespace between each (set of) <object(s)>.
Examples
badlo=====''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:
The result of this is show 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).=====''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 ...
Without {{stack}}
badloLipsum
badloLorem ipsum dolor sit amet, consectetur adipiscing 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
badloLorem ipsum dolor sit amet, consectetur adipiscing 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
badloLorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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}}
badloLipsum
badloLorem ipsum dolor sit amet, consectetur adipiscing 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
badloLorem ipsum dolor sit amet, consectetur adipiscing 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
badloLorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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}}
badloLipsum with second table wider
badlo
|
Lorem ipsum dolor sit amet, consectetur adipiscing 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
badloSample table 3 |
---|
Example 3a |
Lorem ipsum dolor sit amet, consectetur adipiscing 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
badloLorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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
badlo
|
Lorem ipsum dolor sit amet, consectetur adipiscing 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
badloSample table 3 |
---|
Example 3a |
Lorem ipsum dolor sit amet, consectetur adipiscing 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
badloLorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 mid}}
badloLipsum with second table wider
badlo
|
Lorem ipsum dolor sit amet, consectetur adipiscing 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
badloSample table 3 |
---|
Example 3a |
Lorem ipsum dolor sit amet, consectetur adipiscing 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
badloLorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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
badlo
|
Lorem ipsum dolor sit amet, consectetur adipiscing 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
badloSample table 3 |
---|
Example 3a |
Lorem ipsum dolor sit amet, consectetur adipiscing 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
badloLorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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.
Note
badloObviously 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 {{stack mid}}, at least in one example, was resolved by removing table style align=right
from tables between {{stack begin}} and {{stack end}}.
However {{stack mid}} may still be useful for tables that would otherwise prefer to use the multiple argument Template:Tl3 option, which should be identical to using {{stack begin}}, {{stack mid}} and {{stack end}} where the latter easily allows the {| ... |} table syntax (which must begin on the start of the line).
More examples
badlo{{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
badlo{{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
|
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 {{stack}}
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 {{stack}}
's (first) parameter. Because the infobox and image were also stacked together, {{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 {{stack}}
call, such as in a stub or an article with many stacked images near the bottom. Using {{stack}}
is extremely efficient, due to being a short template which uses builtin tag <table> to float the boxes.
Stack template family
badlo- {{Stack}}
- {{Stack begin}}
- {{Stack mid}}
- {{Stack end}}
See also
badlo- {{Double image}}, which places images side by side horizontally.
- {{Multiple image}}, providing both vertical and horizontal layouts for multiple images.
- {{Superimpose}}, which places one image over another.
- {{Superimpose2}}, which can place up to fifty image layers over one another.