Difference between revisions of "Template:Gallery layout/doc"

From blackwiki
Jump to navigation Jump to search
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 <code>display: inline-block</code> 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.   
+
{{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.
  
<code><pre>
+
<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></code>
+
</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.
  
<code><pre>
+
<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></code>
+
</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}}:
  
<code><pre>
+
<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></code>
+
</pre>
  
 
or, if this doesn't work due to complex content:
 
or, if this doesn't work due to complex content:
  
<code><pre>
+
<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></code>
+
</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</code> 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: <code>display: inline-block;</code>.  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.
+
'''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:
  
<code><pre>
+
<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>
 
  }}
 
  }}
</pre></code>
+
</source>
  
 
Output:
 
Output:

Revision as of 01:56, 1 December 2017

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