Vorlage:Galerie: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (38 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | <!-- | + | <onlyinclude><!-- |
Variable | Variable | ||
| − | -->{{#vardefine:id|{{{ | + | -->{{#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: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( | + | 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}} .dia { | ||
| + | width:{{#var:item-width}}; | ||
| + | {{#var:item-margin}} | ||
| + | } | ||
| + | .galerie .caption { | ||
| + | padding: .8em 0 1.2em; | ||
} | } | ||
| − | + | p + .galerie { | |
| − | + | margin-top: 2rem; | |
| − | |||
} | } | ||
}}<!-- | }}<!-- | ||
| Zeile 32: | Zeile 77: | ||
--><div class=galerie> | --><div class=galerie> | ||
<div id=grid_{{#var:id}}>{{{1|}}}</div> | <div id=grid_{{#var:id}}>{{{1|}}}</div> | ||
| − | <div class=caption>{{#var:caption}}</div> | + | <div class='bildtext caption'>{{#var:caption}}</div> |
| − | </div> | + | </div><!-- |
| + | |||
| + | Dokumentation | ||
| + | |||
| + | --></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: | ||
| + | : Bilder: <nowiki>{{{1|}}}</nowiki> | ||
| + | : 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.) | ||
Aktuelle Version vom 6. November 2023, 17: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.)