Vorlage:Img: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
 
(21 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 9: Zeile 9:
 
VARIABLE
 
VARIABLE
  
-->{{#vardefine: img |{{{1|{{{img|uzume-hokusai.jpg}}}}}} }}<!--   
+
-->{{#vardefine: img  
-->{{#vardefine: id | i_{{#regex: {{#regex: {{#var:img}} |/[^\.]+/}}|/ /|_}} }}<!--   
+
| {{{1|{{{img|uzume-hokusai.jpg}}}}}}  
 +
}}<!--   
 +
-->{{#vardefine: id  
 +
| i_{{#regex: {{#regex: {{lcfirst:{{#var:img}}}} |/[^\.]+/}}|/ /|_}}  
 +
}}<!--   
 +
 
 +
ref (var:ref_grid wird von parent-page geliefert)
  
Bildtext kurz (var:ref kann auch von parent-page geliefert werden)
+
-->{{#vardefine:ref
 +
|{{#if: {{{ref|{{#var:ref_grid}}}}}|{{ref|bild={{#var:img}} }}
 +
| }}
 +
}}<!--  
  
 +
Bildtext kurz
 
-->{{#vardefine:text
 
-->{{#vardefine:text
| {{#if: {{{2|{{{text|}}}}}}  
+
| {{#if: {{{2|{{{text|{{#var:ref}}}}}}}}  
|<div class='bildtext'>{{#if: {{{ref|{{#var:ref}}}}}|{{ref|bild={{#var:img}} }} }}{{{2|{{{text|}}}}}}</div>
+
|<div class='bildtext'>{{#var:ref}}{{{2|{{{text|}}}}}}</div>
 
}}
 
}}
 
}}<!--   
 
}}<!--   
Zeile 24: Zeile 34:
 
-->{{#vardefine:anm | {{File:{{#var:img}}}} }}<!--   
 
-->{{#vardefine:anm | {{File:{{#var:img}}}} }}<!--   
  
style für .diax2
+
style für .dia
  
 
-->{{#vardefine:style
 
-->{{#vardefine:style
Zeile 30: Zeile 40:
 
}}<!--   
 
}}<!--   
  
Standardweite, rw (var:rw kann auch von parent-page geliefert werden)
+
Standardweite, rw (var:rw_grid wird von parent-page geliefert)
  
 
-->{{#vardefine:rw
 
-->{{#vardefine:rw
|{{{rw|{{#if:{{#var:rw}}|{{#var:rw}}|200}} }}}
+
|{{#if:{{{rw|}}}|{{{rw|}}}
}}<!--
+
|{{#if:{{#var:rw_grid}}|{{#var:rw_grid}}|200}}  
 +
}} }}<!--
  
 
Standardhöhe, rh (var:rw kann auch von parent-page geliefert werden)
 
Standardhöhe, rh (var:rw kann auch von parent-page geliefert werden)
  
 
-->{{#vardefine:rh
 
-->{{#vardefine:rh
|{{{rh|{{#if:{{#var:rh}}|{{#var:rh}}|{{#expr: {{#var:rw}}*2 }} }} }}}
+
|{{#if:{{{rh|}}}|{{{rh|}}}
}}<!--  
+
|{{#if:{{#var:rh_grid}}|{{#var:rh_grid}}
 +
|{{#var:rw}}  
 +
}} }} }}<!--  
  
 
   padding-top: Umrechnung von px in % der Weite
 
   padding-top: Umrechnung von px in % der Weite
Zeile 53: Zeile 66:
 
     Bildweite = w
 
     Bildweite = w
  
 +
-->{{#vardefine:l | {{{l|{{{lr|0}}} }}} }}<!--
 +
-->{{#vardefine:r | {{{r|{{{lr|0}}} }}} }}<!--
 
-->{{#vardefine:w  
 
-->{{#vardefine:w  
|{{#expr: {{#expr:({{#var:rw}}-{{{l|}}}-{{{l|}}})*6/5}} round 0}}px  
+
|{{#expr:({{#var:rw}}-{{#var:l}}-{{#var:r}})*6/5 round 0}}px  
 
}}<!--   
 
}}<!--   
  
Zeile 65: Zeile 80:
 
   Abstände  in % von rw  
 
   Abstände  in % von rw  
 
    
 
    
-->{{#vardefine:t
+
-->{{#vardefine:m-t
 
|{{#if:{{{t|}}}
 
|{{#if:{{{t|}}}
 
|margin-top:{{#expr: {{{t|}}}/{{#var:rw}}*100 round 2}}%;
 
|margin-top:{{#expr: {{{t|}}}/{{#var:rw}}*100 round 2}}%;
 
}}}}<!--  
 
}}}}<!--  
-->{{#vardefine:r
+
-->{{#vardefine:m-r
|{{#if:{{{r|{{{lr|}}}}}}  
+
|{{#if:{{#var:r}}  
|margin-right:{{#expr: {{{r|{{{lr|}}}}}}/{{#var:rw}}*100 round 2}}%;
+
|margin-right:{{#expr: {{#var:r}}/{{#var:rw}}*100 round 2}}%;
 
}}}}<!--   
 
}}}}<!--   
-->{{#vardefine:l
+
-->{{#vardefine:m-l
|{{#if:{{{l|{{{lr|}}}}}}  
+
|{{#if:{{#var:l}}  
|margin-left:{{#expr: {{{l|{{{lr|}}}}}}/{{#var:rw}}*100 round 2}}%;
+
|margin-left:{{#expr: {{#var:l}}/{{#var:rw}}*100 round 2}}%;
 
}}}}<!--   
 
}}}}<!--   
-->{{#vardefine:b
+
-->{{#vardefine:m-b
 
|{{#if:{{{b|}}}
 
|{{#if:{{{b|}}}
 
|margin-bottom:{{#expr: {{{b|}}}/{{#var:rw}}*100 round 2}}%;
 
|margin-bottom:{{#expr: {{{b|}}}/{{#var:rw}}*100 round 2}}%;
}}}}<!--  
+
}}}}<!--
 
 
Bildweite, w
 
 
 
-->{{#vardefine:w
 
|{{#expr: {{#expr:({{#var:rw}}-{{{l|0}}}-{{{r|0}}})*6/5}} round 0}}px
 
}}<!--
 
  
 
HTML  
 
HTML  
  
--><div id='{{#var:id}}' class='imgBorder diax2' {{#var:style}}><!--
+
--><div id='{{#var:id}}' class='imgBorder dia showPopup' {{#var:style}}><!--
 
--><div class='aussen' style='{{#var:rh_aussen}}'><!--
 
--><div class='aussen' style='{{#var:rh_aussen}}'><!--
--><div class='innen' style='{{#var:pos_innen}} {{#var:t}} {{#var:r}} {{#var:l}} {{#var:b}}'><!--
+
--><div class='innen' style='{{#var:pos_innen}} {{#var:m-t}} {{#var:m-r}} {{#var:m-l}} {{#var:m-b}}'><!--
-->[[Bild:{{#var:img}}|{{#var:w}}|ohne|link=]]</div><!--
+
-->[[Bild:{{#var:img}}|{{#var:w}}|ohne]]</div></div>{{#var:text}}<!--
  
  Dummy-Bild mit Beschreibung für Media-Viewer:  
+
--><div class='fulltext'>{{#var:anm}}</div><!--
  
-->[[Bild:{{#var:img}}|75x75px|thumb|{{#var:anm}}]]<!--
+
Attribut für Bildlink
--></div>{{#var:text}}</div><!--
+
 
--></onlyinclude><!--   
+
-->{{#set:uses_image={{#var:id}}
 +
}}<!--
 +
--></div></onlyinclude><!--   
  
 
CSS
 
CSS
  
 
-->{{#css:
 
-->{{#css:
.testbild .diax2 {
+
.testbild .dia {
 
     width: 200px;
 
     width: 200px;
 
}
 
}
Zeile 124: Zeile 135:
 
  | style= <!-- CSS-Befehl -->
 
  | style= <!-- CSS-Befehl -->
 
  }}
 
  }}
  </nowiki>
+
  </nowiki><!--
 +
--><noinclude>
 +
=== Verwendung ===
 +
{{Spezial:Linkliste/{{FULLPAGENAME}}}}
 +
</noinclude>

Aktuelle Version vom 6. November 2023, 15:29 Uhr

Img

Das Bild passt sich an die Größe des umgebenden DIV an. Standardmäßig ist eine div-Dimension von 1:1 angegeben.

Testbild:

Uzume-hokusai.jpg
Darstellung der Ame no Uzume.
Werk von Katsushika Hokusai. Edo-Zeit, 1816. Internet Archive, Birmingham Young University.

Parameter:

 {{img
 | uzume-hokusai.jpg
 | (text)
 | rw=   <!-- Rahmenweite -->  
 | rh=   <!-- Rahmenhöhe, px oder auto, default= rw -->
 | t=    <!-- top (Abstand oben) -->
 | l=    <!-- left  -->
 | r=    <!-- right  -->
 | lr=   <!-- left and right  -->
 | b=    <!-- bottom  -->
 | ref=  <!-- 1 -->
 | style= <!-- CSS-Befehl -->
 }}
 

Verwendung