{{Gallery layout}}
is a wrapper (or wrapper start tag) for blocks of arbitrary display: inline-block
content (usually images generated by templates) to have them display in a style similar to <gallery>...</gallery>
output: The blocks are auto-centered on one line, and wrap only as necessary to fit the window width, re-centering upon wrapping.
Demo: Test the sample content at the top of the Template:Gallery layout page by changing your browser window width to very narrow, medium, and very wide.
As a total wrapper, use |1=
(a.k.a. |content=
) to introduce the blocks of formatted content.
{{Gallery layout|1=
[First block of content here]
[Second block here]
[Third block here]
}}
As a wrapper-start tag, it is used with the {{Gallery layout end}}
closing tag. Depending upon the content, the above method may not work; try this approach in such a case.
{{Gallery layout}}
[First block of content here]
[Second block here]
[Third block here]
{{Gallery layout end}}
The easy way to do a content block is to wrap each with {{Gallery layout content}}
:
{{gallery layout content|1=
Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit.
}}
or, if this doesn't work due to complex content:
{{gallery layout content}}
Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit.
{{gallery layout content end}}
Manual CSS method: A content block can also be formed by adding specific CSS to an arbitrary HTML element that normally has a css display type of block (i.e., it will not work on an inline element like <span>
). The element must simply have the following CSS: display: inline-block;
. This can be done as a <div>...</div>
wrapper (which is what {{gallery layout content}}
is), added directly to an element such as a <blockquote>
, or added as a template parameter to pass CSS to a meta-template, depending on the application.
The demo at the top of the Template:Gallery layout page can be manually reproduced with the following:
{{Gallery layout|1=
<div style="display: inline-block;">
;Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit.
</div>
<div style="display: inline-block;">
;Sample content: Sed do eiusmod tempor incididunt<br />ut labore et dolore magna aliqua.
</div>
<div style="display: inline-block;">
;Sample content: Ut enim ad minim veniam,<br />quis nostrud exercitation ullamco laboris.
</div>
<div style="display: inline-block;">
;Sample content: Nisi ut aliquip ex ea<br />commodo consequat.
</div>
}}
Output:
© MMXXIII Rich X Search. We shall prevail. All rights reserved. Rich X Search