Difference between revisions of "Template:Gallery layout/doc"
imported>SMcCandlish (rm. span reference) |
imported>Cedar101 m (-<code> +<source>) |
||
| Line 2: | Line 2: | ||
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) --> | <!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) --> | ||
| − | {{tlx|Gallery layout}} is a wrapper (or wrapper start tag) for blocks of arbitrary | + | {{tlx|Gallery layout}} is a wrapper (or wrapper start tag) for blocks of arbitrary {{code|display: inline-block}} content (usually images generated by templates) to have them display in a style similar to [[WP:Gallery|{{tag|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. | '''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. | ||
| Line 10: | Line 10: | ||
As a total wrapper, use {{para|1}} (a.k.a. {{para|content}}) to introduce the blocks of formatted content. | As a total wrapper, use {{para|1}} (a.k.a. {{para|content}}) to introduce the blocks of formatted content. | ||
| − | + | <pre> | |
{{Gallery layout|1= | {{Gallery layout|1= | ||
[First block of content here] | [First block of content here] | ||
| Line 16: | Line 16: | ||
[Third block here] | [Third block here] | ||
}} | }} | ||
| − | </pre | + | </pre> |
As a wrapper-start tag, it is used with the {{tlx|Gallery layout end}} closing tag. Depending upon the content, the above method may not work; try this approach in such a case. | As a wrapper-start tag, it is used with the {{tlx|Gallery layout end}} closing tag. Depending upon the content, the above method may not work; try this approach in such a case. | ||
| − | + | <pre> | |
{{Gallery layout}} | {{Gallery layout}} | ||
[First block of content here] | [First block of content here] | ||
| Line 26: | Line 26: | ||
[Third block here] | [Third block here] | ||
{{Gallery layout end}} | {{Gallery layout end}} | ||
| − | </pre | + | </pre> |
=== Content blocks === | === Content blocks === | ||
'''The easy way''' to do a content block is to wrap each with {{tlx|Gallery layout content}}: | '''The easy way''' to do a content block is to wrap each with {{tlx|Gallery layout content}}: | ||
| − | + | <pre> | |
{{gallery layout content|1= | {{gallery layout content|1= | ||
Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit. | Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit. | ||
}} | }} | ||
| − | </pre | + | </pre> |
or, if this doesn't work due to complex content: | or, if this doesn't work due to complex content: | ||
| − | + | <pre> | |
{{gallery layout content}} | {{gallery layout content}} | ||
Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit. | Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit. | ||
{{gallery layout content end}} | {{gallery layout content end}} | ||
| − | </pre | + | </pre> |
| − | '''Manual CSS method:''' A content block can also be formed by adding specific CSS to an arbitrary HTML element that normally has a css <samp>display | + | '''Manual CSS method:''' A content block can also be formed by adding specific CSS to an arbitrary HTML element that normally has a css <samp>display type of <samp>block</samp> (i.e., it will not work on an inline element like {{tag|span|o}}). The element must simply have the following CSS: display: inline-block;. This can be done as a {{tag|div}} wrapper (which is what {{tlx|gallery layout content}} is), added directly to an element such as a {{tag|blockquote|o}}, 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: | The demo at the top of the [[Template:Gallery layout]] page can be manually reproduced with the following: | ||
| − | < | + | <source lang="html"> |
{{Gallery layout|1= | {{Gallery layout|1= | ||
<div style="display: inline-block;"> | <div style="display: inline-block;"> | ||
| Line 64: | Line 64: | ||
</div> | </div> | ||
}} | }} | ||
| − | </ | + | </source> |
Output: | Output: | ||
Revision as of 01:56, 1 December 2017
| This is a documentation subpage for Template:Gallery layout. It contains usage information, categories and other content that is not part of the original template page. |
{{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
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
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
- 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