Vorlage:W502: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
 
(21 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 10: Zeile 10:
 
Bildtext kurz
 
Bildtext kurz
  
-->{{#vardefine:text1
+
-->{{#vardefine:text1  
| {{#if: {{{3|}}}
 
 
| {{#if: {{{ref|}}}|{{ref|bild={{{1|}}} }} }} {{{3|}}}
 
| {{#if: {{{ref|}}}|{{ref|bild={{{1|}}} }} }} {{{3|}}}
}}
 
 
}}<!--   
 
}}<!--   
-->{{#vardefine:text2
+
-->{{#vardefine:text2  
| {{#if: {{{4|}}}
+
| {{#if: {{{ref|}}}|{{ref|bild={{{2|}}} }} }} {{{4|}}}  
| {{#if: {{{ref|}}}|{{ref|bild={{{2|}}} }} }} {{{4|}}}
 
}}
 
 
}}<!--   
 
}}<!--   
 +
 +
Standardweite Einzelbild, stw, rw
  
Caption:
+
-->{{#vardefine:stw|{{#if:{{{max|}}}|700|500 }}}}<!--
 +
-->{{#vardefine:rw|{{#if:{{{max|}}}|340|240 }}}}<!--   
 +
-->{{#vardefine:rw1 | {{{rw1|{{#var:rw}} }}} }}<!--
 +
-->{{#vardefine:rw2 | {{{rw2|{{#var:rw}} }}} }}<!--
  
{{#vardefine:caption
+
Prozent rw1, rw2
|<div class= 'bildtext caption clear'>{{#if: {{{caption| }}}
+
240 > % von 500
|{{#if: {{{ref|}}}
+
340 > % von 700
| {{#if:{{{3|}}}|<!-- do nothing -->
 
|{{ref | ref={{{ref|}}} | bild={{{1|}}} }} {{ref | ref={{{ref|}}} | bild={{{2|}}} }}
 
}}
 
}} {{{caption|}}} }}</div>
 
}}   
 
  
Standardweite Einzelbild, rw
+
-->{{#vardefine:rw1%
240 = 48% von 500
+
| {{#expr: {{#var:rw1}}*100/{{#var:stw}} }}
 
+
}}<!--
-->{{#vardefine:rw
+
-->{{#vardefine:rw2% 
| {{{rw|{{{rahmen_w|240 }}}}}}
+
| {{#expr: {{#var:rw2}}*100/{{#var:stw}} }}  
 
}}<!--
 
}}<!--
-->{{#vardefine:rw1 | {{{rw1|{{{rahmen_w1|{{#var:rw}}}}}}}} }}<!--
 
-->{{#vardefine:rw2 | {{{rw2|{{{rahmen_w2|{{#var:rw}}}}}}}} }}<!--
 
 
Prozent rw1
 
 
-->{{#vardefine:rw1%
 
| {{#if: {{{rw1|{{{rahmen_w1|}}}}}} | {{#expr: {{#var:rw1}}/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 79: Zeile 56:
  
 
-->{{#vardefine:caption
 
-->{{#vardefine:caption
|{{#if: {{{caption| }}}  
+
| {{#if: {{{caption| }}}  
|<div class='bildtext caption'>{{#if: {{{ref|}}}| {{#if:{{{3|}}}||{{ref|ref={{{ref|}}}|bild={{{1|}}} }} }}{{#if:{{{4|}}}||{{ref|ref={{{ref|}}}|bild={{{2|}}} }} }} }} {{{caption|}}}</div>
+
|<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 {{{hell|}}}'>
+
--><div class='imgWrap {{{hell|}}}'><div class='i500  {{#var:max}}' style='
<div class='ileft' 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 97: Zeile 93:
 
  | r={{#var:r1}}
 
  | r={{#var:r1}}
 
  | b={{#var:b1}}
 
  | b={{#var:b1}}
 +
| showPopup={{#var:showPopup}}
 
  }}
 
  }}
</div>  
+
</div><div class=spaceDiv></div>
{{DiaX.2
+
<div style=''>
 +
{{Dia
 
| img= {{#var:img2}}
 
| img= {{#var:img2}}
 
| text={{#var:text2}}
 
| text={{#var:text2}}
Zeile 108: Zeile 106:
 
  | r={{#var:r2}}
 
  | r={{#var:r2}}
 
  | b={{#var:b2}}
 
  | b={{#var:b2}}
  | border={{{border|}}}  
+
  | showPopup={{#var:showPopup2}}  
  | ref={{{ref|}}}
+
  }}
}}<!--   
+
</div><!--   
-->{{#var:caption}}</div><!--   
+
--></div>{{#var:caption}}</div><!--   
  
 
CSS
 
CSS
  
-->{{#css:
+
-->{{#css:  
 
}}<!--
 
}}<!--
  
Zeile 128: Zeile 126:
 
: Bild2: 2, w2, rw2, rh2, t2, r2, l2, lr2
 
: Bild2: 2, w2, rw2, rh2, t2, r2, l2, lr2
 
: Text: 3, 4, caption, ref
 
: Text: 3, 4, caption, ref
 +
 +
rw1 und rw2 ändern die Proportionen, sollten aber zusammen 480 ergeben (500 - 4%)

Aktuelle Version vom 5. November 2023, 16: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%)