Vorlage:Galerie: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
 
(7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 3: Zeile 3:
 
Variable
 
Variable
  
-->{{#vardefine:id|{{#regex: {{{caption|xy}}}|/\w{3,6}/}}}}<!--
+
-->{{#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)
Zeile 11: Zeile 13:
  
 
-->{{#vardefine:rw|{{{rw|100}}}}}<!--
 
-->{{#vardefine:rw|{{{rw|100}}}}}<!--
-->{{#vardefine:rh|{{#if:{{{rh|}}}
+
 
| grid-auto-rows: {{{rh|}}}px}}}}<!--
+
  rh wird von px in fr umgerechnet, wobei ein fr sich nach default-Höhe von diaX.2 richtet, also 200% von rw
  Höhe zweite Reihe:
+
-->{{#vardefine:rh|{{#var:rh}} {{#if:{{{rh2|}}}
+
-->{{#vardefine:rh
| {{{rh2|}}}px}};}}<!--
+
|{{#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
 
   optional
Zeile 48: 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}} .diax2 {
+
#grid_{{#var:id}} .dia {
 
   width:{{#var:item-width}};  
 
   width:{{#var:item-width}};  
 
   {{#var:item-margin}}  
 
   {{#var:item-margin}}  
Zeile 68: Zeile 80:
 
</div><!--
 
</div><!--
  
Vorlage Ende
+
Dokumentation
  
 
--></onlyinclude>  
 
--></onlyinclude>  
Zeile 74: Zeile 86:
  
 
  <nowiki>{{galerie| caption= 16 Arhats | rw= 100 | rh= 200 |   
 
  <nowiki>{{galerie| caption= 16 Arhats | rw= 100 | rh= 200 |   
  {{DiaX.2|rw=150|img=luohan1.jpg|style="grid-area:1/1/3/3;"}}
+
  {{Dia|rw=150|img=luohan1.jpg|style="grid-area:1/1/3/3;"}}
  {{DiaX.2|rw=150|rh=300|img=luohan2.jpg}}
+
  {{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],  rh2 [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]
+
: Layout:  center[center=1], margin [left und right, mit Einheit], grid-column-width [mit Einheit], max-width [Einheit dazuschreiben]
(Grid-items in diaX.2 können auch mit style= positioniert werden.)
+
(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.)