Vorlage:Galerie: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (19 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) | grid oder flex? (Flex zentriert gleichartige Elemente, Grid ermöglicht verschiedene Größen) | ||
-->{{#vardefine:display|{{{display|grid}}}}}<!-- | -->{{#vardefine:display|{{{display|grid}}}}}<!-- | ||
| + | |||
| + | |||
-->{{#vardefine:rw|{{{rw|100}}}}}<!-- | -->{{#vardefine:rw|{{{rw|100}}}}}<!-- | ||
| − | -->{{#vardefine:rh|{{#if:{{{ | + | |
| − | | grid-auto-rows: {{ | + | 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|{{{justify-content|center}}}<!-- | + | -->{{#vardefine:justify-content|{{{justify-content|center}}}}}<!-- |
| − | -->{{#vardefine:margin|{{{margin| | + | -->{{#vardefine:grid-column-width|{{{grid-column-width| minmax({{#var:rw}}px, 1fr)}}}}}<!-- |
| + | -->{{#vardefine:margin|{{{margin|auto}}}}}<!-- | ||
-->{{#vardefine:item-width|{{#ifeq: {{{display|}}}|flex | -->{{#vardefine:item-width|{{#ifeq: {{{display|}}}|flex | ||
|{{#var:rw}}px|100%}}}}<!-- | |{{#var:rw}}px|100%}}}}<!-- | ||
| Zeile 24: | Zeile 44: | ||
CSS | CSS | ||
| − | -->{{#css: | + | -->{{#css: |
| + | |||
| + | .galerie > div { | ||
| + | max-width: 780px; | ||
| + | margin: auto; | ||
| + | } | ||
#grid_{{#var:id}} { | #grid_{{#var:id}} { | ||
display: {{#var:display}}; | display: {{#var:display}}; | ||
| − | grid-template-columns: repeat({{#var:repeat}}, {{#var: | + | grid-template-columns: repeat({{#var:repeat}}, {{#var:grid-column-width}}); |
{{#var:rh}} | {{#var:rh}} | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Zeile 34: | Zeile 59: | ||
justify-content: {{#var:justify-content}}; | justify-content: {{#var:justify-content}}; | ||
margin: 0 {{#var:margin}}; | margin: 0 {{#var:margin}}; | ||
| + | max-width: {{{max-width|}}}; | ||
} | } | ||
| − | #grid_{{#var:id}} . | + | #grid_{{#var:id}} .dia { |
width:{{#var:item-width}}; | width:{{#var:item-width}}; | ||
{{#var:item-margin}} | {{#var:item-margin}} | ||
} | } | ||
| − | .galerie .caption { | + | .galerie .caption { |
| − | padding: | + | padding: .8em 0 1.2em; |
} | } | ||
p + .galerie { | p + .galerie { | ||
| Zeile 54: | Zeile 80: | ||
</div><!-- | </div><!-- | ||
| − | + | Dokumentation | |
--></onlyinclude> | --></onlyinclude> | ||
| Zeile 60: | Zeile 86: | ||
<nowiki>{{galerie| caption= 16 Arhats | rw= 100 | rh= 200 | | <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> | }}</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] | + | : Layout: center[center=1], margin [left und right, mit Einheit], grid-column-width [mit Einheit], max-width [Einheit dazuschreiben] |
| − | (Grid-items in | + | (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.)