Template:Gallery layout
- Sample content
- Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
- Sample content
- Sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
- Sample content
- Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.
- Sample content
- Nisi ut aliquip ex ea
commodo consequat.
{{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.
Usage
[edit]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}}
Content blocks
[edit]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:
- Sample content
- Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
- Sample content
- Sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
- Sample content
- Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.
- Sample content
- Nisi ut aliquip ex ea
commodo consequat.
See also
[edit]- Help:Gallery tag, for images
- {{Gallery}}, an advanced version of the gallery tag (for images); its "See also" section lists additional image arrangement templates
- {{Cleanup gallery}}, to mark unencyclopedic galleries
- {{Gallery items}}, similar to this template
- {{Div flex row}}, similar to this template but more alignment options