Template:Gallery_layout

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.

Template documentation[view] [edit] [history] [purge]

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

Template:Gallery_layout

Template:Gallery layout

Usage

Content blocks

See also

Share this article: