Vorlage:W503: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Zeile 1: | Zeile 1: | ||
− | {{#vardefine: | + | Testbild |
− | |{{{ | + | <div class='testbild' style='background: #eee; padding: 1em; max-width: 48em;' ><!-- |
+ | --><onlyinclude><!-- | ||
+ | |||
+ | Bilder | ||
+ | |||
+ | -->{{#vardefine: img1 |{{{1|backyardshrine.jpg}}} }}<!-- | ||
+ | -->{{#vardefine: img2 |{{{2|umenomiya_shrine.jpg}}} }}<!-- | ||
+ | -->{{#vardefine: img3 |{{{3|schrein_torii_komainu.jpg}}} }}<!-- | ||
+ | |||
+ | Gesamtbreite | ||
+ | |||
+ | -->{{#vardefine:rwAll | {{{rwAll|500}}} }}<!-- | ||
+ | |||
+ | Format grid | ||
+ | |||
+ | -->{{#vardefine:grid | ||
+ | |{{#ifeq: {{{format|}}} | right | 1/2/3 | 1/1/3 | ||
+ | }} | ||
}}<!-- | }}<!-- | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | Standardweite Einzelbild, rw | |
− | + | ||
− | + | -->{{#vardefine:rw | {{#expr: {{#var:rwAll}}*48/100 }} }}<!-- | |
− | + | ||
− | + | Weite kleine Bilder | |
− | + | ||
− | + | -->{{#vardefine:rw2 | {{#var:rw}} }}<!-- | |
− | + | -->{{#vardefine:rw3 | {{#var:rw}} }}<!-- | |
− | + | ||
+ | Standardhöhe Einzelbild, rh | ||
+ | |||
+ | -->{{#vardefine:rh | {{#expr: {{#var:rwAll}}*32/100 }} }}<!-- | ||
+ | -->{{#vardefine:rh2 | {{#var:rh}} }}<!-- | ||
+ | -->{{#vardefine:rh3 | {{#var:rh}} }}<!-- | ||
+ | |||
+ | Standardhöhe großes Bild, rh1 | ||
+ | |||
+ | -->{{#vardefine:rh1 | {{#expr: {{#var:rh}} * 2.15 }} }}<!-- | ||
+ | |||
+ | reference, ref | ||
+ | |||
+ | -->{{#vardefine:ref | ||
+ | |{{#if: {{{4|{{{5|}}} }}} | | {{#ifeq: {{{ref|}}}| 1|{{ref|bild={{{1|}}}}}{{ref|bild={{{2|}}}}}{{ref|bild={{{3|}}}}} }} }} | ||
+ | }}<!-- | ||
+ | |||
+ | Caption: | ||
+ | |||
+ | -->{{#vardefine:caption | ||
+ | |{{#if: {{{caption| }}} | ||
+ | |<div class= 'bildtext caption'>{{#var:ref}} {{{caption|}}}</div> }} | ||
+ | }}<!-- | ||
+ | |||
+ | HTML | ||
− | + | --><div class='w500x {{{hell|}}}' style='width:{{#expr:{{#var:rwAll}}+8}}px; {{{style|}}}'> | |
− | < | + | <div style='display: grid; |
− | | {{{ | + | grid-template-columns: 48% auto; |
+ | grid-gap: 10px 4%;'> | ||
+ | <div style='grid-area: {{#var:grid}}'> | ||
+ | {{DiaX | ||
+ | | {{#var:img1}} | ||
+ | | {{{4|}}} | ||
+ | | rw= {{#var:rw}} | ||
+ | | rh= {{#var:rh1}} | ||
+ | | w= {{{w1|}}} | ||
+ | | top= {{{top1|0}}} | ||
+ | | left= {{{lr1|{{{left1|0}}}}}} | ||
+ | | right= {{{lr1|{{{right1|0}}}}}} | ||
+ | | ref= {{{ref|}}} | ||
+ | }} | ||
+ | </div> | ||
+ | <div> | ||
+ | {{DiaX | ||
+ | | {{#var:img2}} | ||
+ | | {{{5|}}} | ||
+ | | rw= {{#var:rw2}} | ||
+ | | rh= {{#var:rh2}} | ||
+ | | w= {{{w2|}}} | ||
+ | | top= {{{top2|0}}} | ||
+ | | left= {{{lr2|{{{left2|0}}}}}} | ||
+ | | right= {{{lr2|{{{right2|0}}}}}} | ||
+ | | ref= {{{ref|}}} | ||
+ | }} | ||
+ | </div> | ||
+ | <div style='align-self: end;'> | ||
+ | {{DiaX | ||
+ | | {{#var:img3}} | ||
+ | | {{{6|}}} | ||
+ | | rw= {{#var:rw3}} | ||
+ | | rh= {{#var:rh3}} | ||
+ | | w= {{{w3|}}} | ||
+ | | top= {{{top3|0}}} | ||
+ | | left= {{{lr3|{{{left3|0}}}}}} | ||
+ | | right= {{{lr3|{{{right3|0}}}}}} | ||
+ | | ref= {{{ref|}}} | ||
}} | }} | ||
− | </ | + | </div> |
+ | </div> | ||
+ | {{#var:caption}}</div><!-- | ||
+ | |||
+ | Vorlage Ende | ||
− | + | --></onlyinclude></div> | |
− | + | ---- | |
− | + | Parameter: | |
− | + | : Div: hell, style, format=[right] | |
− | + | : Bild: 1, 2, 3, w, rh, top, right, left, lr | |
− | + | : Text: 4, 5, 6, ref, caption | |
− | -- | ||
− | Parameter: |