Vorlage:Galerie: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 16: | Zeile 16: | ||
-->{{#vardefine:justify-content|{{#if: {{{center|}}}|center|space-between}}}}<!-- | -->{{#vardefine:justify-content|{{#if: {{{center|}}}|center|space-between}}}}<!-- | ||
-->{{#vardefine:margin|{{{margin|0}}}}}<!-- | -->{{#vardefine:margin|{{{margin|0}}}}}<!-- | ||
| + | -->{{#vardefine:item-width|{{#ifeq: {{{display|}}}|flex | ||
| + | |{{#var:rw}}|100%}}}}<!-- | ||
| + | -->{{#vardefine:item-margin|{{#ifeq: {{{display|}}}|flex | ||
| + | |margin:5px;}}}}<!-- | ||
-->{{#vardefine:caption|{{{caption|}}}}}<!-- | -->{{#vardefine:caption|{{{caption|}}}}}<!-- | ||
| Zeile 25: | Zeile 29: | ||
grid-template-columns: repeat({{#var:repeat}}, {{#var:rw}}px); | grid-template-columns: repeat({{#var:repeat}}, {{#var:rw}}px); | ||
{{#var:rh}} | {{#var:rh}} | ||
| + | flex-wrap: wrap; | ||
column-gap: {{#var:gap}}; | column-gap: {{#var:gap}}; | ||
row-gap: {{#var:gapY}}; | row-gap: {{#var:gapY}}; | ||
| Zeile 31: | Zeile 36: | ||
} | } | ||
#grid_{{#var:id}} .diax2 { | #grid_{{#var:id}} .diax2 { | ||
| − | width: | + | width:{{#var:item-width}}; |
| + | {{#var:item-margin}} | ||
} | } | ||
.galerie .caption { | .galerie .caption { | ||
Version vom 11. April 2020, 15:54 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.)