Vorlage:Galerie: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
Zeile 4: Zeile 4:
  
 
-->{{#vardefine:id|{{#regex: {{{caption|xy}}}|/\w{4}/}}}}<!--
 
-->{{#vardefine:id|{{#regex: {{{caption|xy}}}|/\w{4}/}}}}<!--
 +
 +
grid oder flex? (Flex zentriert gleichartige Elemente, Grid ermöglicht verschiedene Größen)
 +
 +
-->{{#vardefine:display|{{{display|grid}}}}}<!--
 
-->{{#vardefine:rw|{{{rw|100}}}}}<!--
 
-->{{#vardefine:rw|{{{rw|100}}}}}<!--
 
-->{{#vardefine:rh|{{#if:{{{rh|}}}
 
-->{{#vardefine:rh|{{#if:{{{rh|}}}
Zeile 18: Zeile 22:
 
-->{{#css:
 
-->{{#css:
 
#grid_{{#var:id}} {
 
#grid_{{#var:id}} {
     display: grid;  
+
     display: {{#var:display}};  
 
     grid-template-columns: repeat({{#var:repeat}}, {{#var:rw}}px);   
 
     grid-template-columns: repeat({{#var:repeat}}, {{#var:rw}}px);   
 
     {{#var:rh}}
 
     {{#var:rh}}
Zeile 59: Zeile 63:
 
: Text: caption
 
: Text: caption
 
: grid: rw, rh [Einheit=px], gap, gapY [Einheit dazuschreiben], repeat [Zahl, default = auto-fit]
 
: grid: rw, rh [Einheit=px], gap, gapY [Einheit dazuschreiben], repeat [Zahl, default = auto-fit]
: Position:  center[center=1], margin [left und right, mit Einheit]
+
: Layout:  center[center=1], margin [left und right, mit Einheit]
 
(Grid-items in diaX.2 können auch mit style= positioniert werden.)
 
(Grid-items in diaX.2 können auch mit style= positioniert werden.)

Version vom 11. April 2020, 15:31 Uhr

Beliebige Menge von Bildern in einem Grid anzeigen.

{{galerie| caption= 16 Arhats | rw= 100 | rh= 200 |   
 {{DiaX.2|rw=150|img=luohan1.jpg|style="grid-area:1/1/3/3;"}}
 {{DiaX.2|rw=150|rh=300|img=luohan2.jpg}}
 ...
 }}

Parameter:

Bilder: 1
Text: caption
grid: rw, rh [Einheit=px], gap, gapY [Einheit dazuschreiben], repeat [Zahl, default = auto-fit]
Layout: center[center=1], margin [left und right, mit Einheit]

(Grid-items in diaX.2 können auch mit style= positioniert werden.)