Vorlage:Galerie: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (30 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 3: | Zeile 3: | ||
Variable | Variable | ||
| − | -->{{#vardefine:id|{{#regex: {{{caption| | + | -->{{#vardefine:id |
| + | |{{#regex:{{#regex:{{#regex: {{{caption|xyz}}}|/\s/|_}}|/[\W]/|}}|/\w{3,15}/}} | ||
| + | }}<!-- | ||
| + | |||
| + | 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|{{{rh|100}}}}}<!-- | + | |
| + | rh wird von px in fr umgerechnet, wobei ein fr sich nach default-Höhe von diaX.2 richtet, also 200% von rw | ||
| + | |||
| + | -->{{#vardefine:rh | ||
| + | |{{#expr:{{{rh|100}}}/({{#var:rw}}*2)}}fr | ||
| + | }}<!-- | ||
| + | -->{{#vardefine:rh2 | ||
| + | |{{#if:{{{rh2|}}} | ||
| + | |{{#expr:{{{rh2|}}}/({{#var:rw}}*2)}}fr | ||
| + | }} | ||
| + | }}<!-- | ||
| + | -->{{#vardefine:rh | ||
| + | | grid-auto-rows: {{#var:rh}} {{#var:rh2}}; | ||
| + | }}<!-- | ||
| + | |||
| + | optional | ||
| + | |||
-->{{#vardefine:repeat|{{{repeat|auto-fit}}}}}<!-- | -->{{#vardefine:repeat|{{{repeat|auto-fit}}}}}<!-- | ||
-->{{#vardefine:gap|{{{gap|10px}}}}}<!-- | -->{{#vardefine:gap|{{{gap|10px}}}}}<!-- | ||
-->{{#vardefine:gapY|{{{gapY|{{{gap|10px}}}}}}}}<!-- | -->{{#vardefine:gapY|{{{gapY|{{{gap|10px}}}}}}}}<!-- | ||
| − | -->{{#vardefine:justify-content|{{# | + | -->{{#vardefine:justify-content|{{{justify-content|center}}}}}<!-- |
| + | -->{{#vardefine:grid-column-width|{{{grid-column-width| minmax({{#var:rw}}px, 1fr)}}}}}<!-- | ||
| + | -->{{#vardefine:margin|{{{margin|auto}}}}}<!-- | ||
| + | -->{{#vardefine:item-width|{{#ifeq: {{{display|}}}|flex | ||
| + | |{{#var:rw}}px|100%}}}}<!-- | ||
| + | -->{{#vardefine:item-margin|{{#ifeq: {{{display|}}}|flex | ||
| + | |margin:5px;}}}}<!-- | ||
-->{{#vardefine:caption|{{{caption|}}}}}<!-- | -->{{#vardefine:caption|{{{caption|}}}}}<!-- | ||
CSS | CSS | ||
| − | -->{{#css: | + | -->{{#css: |
| + | |||
| + | .galerie > div { | ||
| + | max-width: 780px; | ||
| + | margin: auto; | ||
| + | } | ||
#grid_{{#var:id}} { | #grid_{{#var:id}} { | ||
| − | display: | + | display: {{#var:display}}; |
| − | grid-template-columns: repeat({{#var:repeat}}, {{#var: | + | grid-template-columns: repeat({{#var:repeat}}, {{#var:grid-column-width}}); |
| + | {{#var:rh}} | ||
| + | flex-wrap: wrap; | ||
column-gap: {{#var:gap}}; | column-gap: {{#var:gap}}; | ||
row-gap: {{#var:gapY}}; | row-gap: {{#var:gapY}}; | ||
justify-content: {{#var:justify-content}}; | justify-content: {{#var:justify-content}}; | ||
| − | margin: 0 - | + | margin: 0 {{#var:margin}}; |
| + | max-width: {{{max-width|}}}; | ||
} | } | ||
| − | #grid_{{#var:id}} . | + | #grid_{{#var:id}} .dia { |
| − | width:{{#var: | + | width:{{#var:item-width}}; |
| − | + | {{#var:item-margin}} | |
} | } | ||
| − | .galerie .caption { | + | .galerie .caption { |
| − | padding: | + | padding: .8em 0 1.2em; |
| + | } | ||
| + | p + .galerie { | ||
| + | margin-top: 2rem; | ||
} | } | ||
}}<!-- | }}<!-- | ||
| Zeile 39: | Zeile 80: | ||
</div><!-- | </div><!-- | ||
| − | + | Dokumentation | |
--></onlyinclude> | --></onlyinclude> | ||
| + | Beliebige Menge von Bildern in einem Grid anzeigen. | ||
| + | |||
| + | <nowiki>{{galerie| caption= 16 Arhats | rw= 100 | rh= 200 | | ||
| + | {{Dia|rw=150|img=luohan1.jpg|style="grid-area:1/1/3/3;"}} | ||
| + | {{Dia|rw=150|rh=300|img=luohan2.jpg}} | ||
| + | ... | ||
| + | }}</nowiki> | ||
---- | ---- | ||
Parameter: | Parameter: | ||
| − | : Bilder: 1 | + | : Bilder: <nowiki>{{{1|}}}</nowiki> |
: Text: caption | : Text: caption | ||
| − | : grid: rw, rh [Einheit=px], gap, gapY [Einheit dazuschreiben], repeat [Zahl, default = auto-fit] | + | : grid: rw, rh [Einheit=px], rh2 [Einheit=px], gap, gapY [Einheit dazuschreiben], repeat [Zahl, default = auto-fit] |
| − | : | + | : Layout: center[center=1], margin [left und right, mit Einheit], grid-column-width [mit Einheit], max-width [Einheit dazuschreiben] |
| + | (Grid-items in dia können auch mit style= positioniert werden.) | ||
Aktuelle Version vom 6. November 2023, 16:23 Uhr
Beliebige Menge von Bildern in einem Grid anzeigen.
{{galerie| caption= 16 Arhats | rw= 100 | rh= 200 |
{{Dia|rw=150|img=luohan1.jpg|style="grid-area:1/1/3/3;"}}
{{Dia|rw=150|rh=300|img=luohan2.jpg}}
...
}}
Parameter:
- Bilder: {{{1|}}}
- Text: caption
- grid: rw, rh [Einheit=px], rh2 [Einheit=px], gap, gapY [Einheit dazuschreiben], repeat [Zahl, default = auto-fit]
- Layout: center[center=1], margin [left und right, mit Einheit], grid-column-width [mit Einheit], max-width [Einheit dazuschreiben]
(Grid-items in dia können auch mit style= positioniert werden.)