Vorlage:W502: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
 
(15 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 17: Zeile 17:
 
}}<!--   
 
}}<!--   
 
   
 
   
Standardweite Einzelbild, rw
+
Standardweite Einzelbild, stw, rw
240 = 48% von 500
 
  
-->{{#vardefine:rw
+
-->{{#vardefine:stw|{{#if:{{{max|}}}|700|500 }}}}<!--
| {{{rw|{{{rahmen_w|240 }}}}}}
+
-->{{#vardefine:rw|{{#if:{{{max|}}}|340|240 }}}}<!--  
}}<!--
+
-->{{#vardefine:rw1 | {{{rw1|{{#var:rw}} }}} }}<!--
-->{{#vardefine:rw1 | {{{rw1|{{{rahmen_w1|{{#var:rw}}}}}}}} }}<!--
+
-->{{#vardefine:rw2 | {{{rw2|{{#var:rw}} }}} }}<!--  
-->{{#vardefine:rw2 | {{{rw2|{{{rahmen_w2|{{#var:rw}}}}}}}} }}<!--  
 
  
Prozent rw1
+
Prozent rw1, rw2
 +
240 > % von 500
 +
340 > % von 700
  
 
-->{{#vardefine:rw1%  
 
-->{{#vardefine:rw1%  
| {{#if: {{{rw1|{{{rahmen_w1|}}}}}} | {{#expr: {{#var:rw1}}/5 }}  
+
| {{#expr: {{#var:rw1}}*100/{{#var:stw}} }}  
| 48 }} }}<!--
+
}}<!--  
 
+
-->{{#vardefine:rw2%
Prozent rw2
+
| {{#expr: {{#var:rw2}}*100/{{#var:stw}} }}  
 
+
}}<!--
-->{{#vardefine:rw2%  
 
| {{#if: {{{rw2|{{{rahmen_w2|}}}}}} | {{#expr: {{#var:rw2}}/5 }}  
 
| 48 }} }}<!--
 
  
 
Standardhöhe, rh
 
Standardhöhe, rh
  
-->{{#vardefine:rh | {{{rh|{{{rahmen_h|250}}}}}} }}<!--
+
-->{{#vardefine:rh | {{{rh|250}}} }}<!--
-->{{#vardefine:rh1 | {{#expr: {{{rh1|{{{rahmen_h1|{{#var:rh}}}}}}}} }} }}<!--
+
-->{{#vardefine:rh1 | {{{rh1|{{#var:rh}} }}} }}<!--
-->{{#vardefine:rh2 | {{#expr: {{{rh2|{{{rahmen_h2|{{#var:rh}}}}}}}} }} }}<!--
+
-->{{#vardefine:rh2 | {{{rh2|{{#var:rh}} }}} }}<!--
 
 
right
 
 
 
-->{{#vardefine:r1 | {{#if: {{{w1|}}}
 
| {{#expr: {{#var:rw1}} - ({{{w1|}}}  + {{{left1|0}}} ) }}
 
| 0
 
}} }}<!-- 
 
-->{{#vardefine:r2 | {{#if: {{{w2|}}}
 
| {{#expr: {{#var:rw2}} - ({{{w2|}}}  + {{{left2|0}}} ) }}
 
| 0
 
}} }}<!--
 
  
 
Abstände
 
Abstände
  
 
-->{{#vardefine:t1|{{{t1|{{{top1|}}}}}}}}<!--     
 
-->{{#vardefine:t1|{{{t1|{{{top1|}}}}}}}}<!--     
-->{{#vardefine:l1|{{{l1|{{{left1|{{{lr1|}}}}}}}}}}}<!--     
+
-->{{#vardefine:l1|{{{l1|{{{left1|{{{lr1|0}}}}}}}}}}}<!--     
-->{{#vardefine:r1|{{{r1|{{{right1|{{{lr1|{{#var:r1}}}}}}}}}}}}}<!--  
+
-->{{#vardefine:r1|{{{r1|{{{right1|{{{lr1|0}}}}}}}}}}}<!--  
 
-->{{#vardefine:b1|{{{b1|}}}}}<!--
 
-->{{#vardefine:b1|{{{b1|}}}}}<!--
  
 
-->{{#vardefine:t2|{{{t2|{{{top2|}}}}}}}}<!--     
 
-->{{#vardefine:t2|{{{t2|{{{top2|}}}}}}}}<!--     
-->{{#vardefine:l2|{{{l2|{{{left2|{{{lr2|}}}}}}}}}}}<!--     
+
-->{{#vardefine:l2|{{{l2|{{{left2|{{{lr2|0}}}}}}}}}}}<!--     
-->{{#vardefine:r2|{{{r2|{{{right2|{{{lr2|{{#var:r2}}}}}}}}}}}}}<!--  
+
-->{{#vardefine:r2|{{{r2|{{{right2|{{{lr2|0}}}}}}}}}}}<!--  
 
-->{{#vardefine:b2|{{{b2|}}}}}<!--     
 
-->{{#vardefine:b2|{{{b2|}}}}}<!--     
  
Zeile 70: Zeile 56:
  
 
-->{{#vardefine:caption
 
-->{{#vardefine:caption
|<div class='bildtext width100 {{#if: {{{caption|}}}|caption}}'>{{{caption|}}}</div>  
+
| {{#if: {{{caption| }}}
}}<!--  
+
|<div class='bildtext caption'>{{{caption|}}}</div>
 +
}}
 +
}}<!--   
 +
 
 +
class
 +
 
 +
-->{{#vardefine:max|{{#if:{{{max|}}}|imax }}}}<!-- 
 +
 
 +
-->{{#vardefine:showPopup
 +
| {{#ifeq:{{{noviewer|}}}|1
 +
  | 0
 +
  | {{{ref|0}}}
 +
  }}
 +
}}<!--   
 +
 
 +
-->{{#vardefine:showPopup2
 +
| {{#var:showPopup}}
 +
}}<!--  
 +
 
  
 
HTML  
 
HTML  
  
--><div class='i500 wFlex {{{hell|}}}'>
+
--><div class='imgWrap {{{hell|}}}'><div class='i500  {{#var:max}}' style='
<div style='width: {{#var:rw1%}}%;'>
+
display:grid;
{{DiaX.2
+
grid-template-columns: {{#var:rw1}}fr 20fr {{#var:rw2}}fr;
 +
'>
 +
<div style=''>
 +
{{Dia
 
| img={{#var:img1}}
 
| img={{#var:img1}}
 
| text={{#var:text1}}
 
| text={{#var:text1}}
Zeile 86: Zeile 93:
 
  | r={{#var:r1}}
 
  | r={{#var:r1}}
 
  | b={{#var:b1}}
 
  | b={{#var:b1}}
 +
| showPopup={{#var:showPopup}}
 
  }}
 
  }}
</div>  
+
</div><div class=spaceDiv></div>
<div style='width: {{#var:rw2%}}%;'>
+
<div style=''>
{{DiaX.2
+
{{Dia
 
| img= {{#var:img2}}
 
| img= {{#var:img2}}
 
| text={{#var:text2}}
 
| text={{#var:text2}}
Zeile 98: Zeile 106:
 
  | r={{#var:r2}}
 
  | r={{#var:r2}}
 
  | b={{#var:b2}}
 
  | b={{#var:b2}}
  | ref={{{ref|}}}
+
  | showPopup={{#var:showPopup2}}  
 
  }}
 
  }}
 
</div><!--   
 
</div><!--   
-->{{#var:caption}}
+
--></div>{{#var:caption}}</div><!--   
</div><!--   
 
  
 
CSS
 
CSS

Aktuelle Version vom 5. November 2023, 17:49 Uhr

Testbild

Kasuga lanterns3.jpg
Kasuga4.jpg

Parameter:

Div: hell
Bilder: rw, rh
Bild1: 1, w1, rw1, rh1, t1, r1, l1, lr1
Bild2: 2, w2, rw2, rh2, t2, r2, l2, lr2
Text: 3, 4, caption, ref

rw1 und rw2 ändern die Proportionen, sollten aber zusammen 480 ergeben (500 - 4%)