Vorlage:DiaX.2: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
(41 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{titel|{{PAGENAME}}}}  
+
{{titel|{{PAGENAME}}}}
Testbild
+
 +
Das Bild passt sich an die Größe des umgebenden DIV an. Standardmäßig ist eine div-Dimension von 1:2 angegeben (dies vor allem für Vorlage:Galerie).
 +
 
 +
Testbild:
 
<div class='testbild'><!--
 
<div class='testbild'><!--
 
--><onlyinclude><!--
 
--><onlyinclude><!--
Zeile 6: Zeile 9:
 
VARIABLE
 
VARIABLE
  
-->{{#vardefine: img |{{{img|okuninushi_hokusai.jpg}}} }}<!--   
+
-->{{#vardefine: img  
-->{{#vardefine: id | i_{{#regex: {{#regex: {{#var:img}} |/[^\.]+/}}|/ /|_}} }}<!--   
+
|{{{img|okuninushi_hokusai.jpg}}}  
 +
}}<!--   
 +
-->{{#vardefine: img_id
 +
| i_{{#regex: {{#regex: {{lcfirst:{{#var:img}}}} |/[^\.]+/}}|/ /|_}}  
 +
}}<!--   
  
 
Bildtext kurz
 
Bildtext kurz
Zeile 23: Zeile 30:
 
Standardweite, rw
 
Standardweite, rw
  
-->{{#vardefine:rw|{{#if:{{{rw|}}}|{{{rw|}}}|500}}}}<!--
+
-->{{#vardefine:rw|{{{rw|500}}}}}<!--
 +
 
 +
Standardhöhe, rh
 +
(padding-top: Umrechnung von px in % der Weite)
 +
urspr: {{{rh|300}}}
 +
 
 +
-->{{#vardefine:rh|{{{rh|{{#expr: {{#var:rw}}*2}}}}}}}<!--
 +
 
 +
Abstände 
 +
 
 +
-->{{#vardefine:t
 +
|{{#if:{{{t|}}}
 +
|{{#ifeq: {{#var:rh}} | auto | {{{t|}}}px
 +
|{{#expr: {{{t|}}}/{{#var:rh}}*100}}%
 +
|0}}}}}}<!--
 +
-->{{#vardefine:r
 +
|{{#if:{{{r|}}}
 +
|{{#expr: {{{r|}}}/{{#var:rw}}*100}}%
 +
|0}}}}<!-- 
 +
-->{{#vardefine:l
 +
|{{#if:{{{l|}}}
 +
|{{#expr: {{{l|}}}/{{#var:rw}}*100}}%
 +
|0}}}}<!-- 
 +
-->{{#vardefine:b
 +
|{{#if:{{{b|}}}
 +
|{{#ifeq: {{#var:rh}} | auto | {{{b|}}}px
 +
|{{#expr: {{{b|}}}/{{#var:rh}}*100}}%
 +
|0}}}}}}<!--  
 +
 
 +
Bildweite, w
  
Standardhöhe, rh (padding-top)
+
-->{{#vardefine:w
 +
|{{#expr: {{#expr:({{#var:rw}}-{{#var:l}}-{{#var:r}})*6/5}} round 0}}px
 +
}}<!-- 
 +
-->{{#vardefine:t
 +
|{{#if:{{{t|}}}
 +
|{{#ifeq: {{#var:rh}} | auto | {{{t|}}}px
 +
|{{#expr: {{{t|}}}/{{#var:rh}}*100}}%
 +
|0}}}}}}<!--
  
-->{{#vardefine:rh  
+
-->{{#vardefine:rh
| {{#if: {{{rh|}}}  
+
| {{#ifeq: {{#var:rh}} | auto | <!--do nothing-->
| {{#expr: {{{rh|}}}/{{#var:rw}}*100}}%  
+
| padding-top:{{#expr: {{#var:rh}}/{{#var:rw}}*100}}%  
 
}}
 
}}
 
}}<!--   
 
}}<!--   
Zeile 35: Zeile 78:
 
styles für innen
 
styles für innen
  
-->{{#vardefine:margin| margin-}}{{#vardefine:pos_innen| static}}<!--
+
-->{{#vardefine:margin| margin-}}<!--
-->{{#if: {{{rh|}}} | {{#vardefine:margin|}}{{#vardefine:pos_innen| absolute}} }}<!--  
+
-->{{#vardefine:pos_innen| static}}<!--
 
+
-->{{#if: {{#var:rh}}|{{#vardefine:margin|}}{{#vardefine:pos_innen| absolute}} }}<!--  
Abstände
 
 
 
-->{{#vardefine:t|{{#if:{{{t|}}}|{{{t|}}}|0}}}}<!-- 
 
-->{{#vardefine:r|{{#if:{{{r|}}}|{{{r|}}}|0}}}}<!-- 
 
-->{{#vardefine:b|{{#if:{{{b|}}}|{{{b|}}}|0}}}}<!-- 
 
-->{{#vardefine:l|{{#if:{{{l|}}}|{{{l|}}}|0}}}}<!--  
 
  
 
Bildweite, w
 
Bildweite, w
  
 
-->{{#vardefine:w  
 
-->{{#vardefine:w  
|{{#expr: {{#expr:({{#var:rw}}-{{#var:l}}-{{#var:r}})+6/5}} round 0}}px  
+
|{{#expr: {{#expr:({{#var:rw}}-{{#var:l}}-{{#var:r}})*6/5}} round 0}}px  
}}<!--  
+
}}<!--
 +
 
 +
style
 +
 
 +
-->{{#vardefine:style
 +
| {{#if: {{{style|}}} | style='{{{style|}}}'}}
 +
}}<!-- 
 +
 
 +
-->{{#vardefine:noviewer
 +
| {{#ifeq: {{{noviewer|}}} | 1 |noviewer}}
 +
}}<!-- 
  
 
HTML  
 
HTML  
  
--><div id='{{#var:id}}' class='imgBorder diax2'><!--
+
--><div id='{{#var:img_id}}' class='imgBorder diax2 {{#var:noviewer}}' {{#var:style}}><!--
--><div class='aussen' style='
+
--><div class='aussen' style='{{#var:rh}}'><!--
  padding-top:{{#var:rh}}
 
'><!--
 
 
--><div class='innen' style='
 
--><div class='innen' style='
 
   position:{{#var:pos_innen}};
 
   position:{{#var:pos_innen}};
   {{#var:margin}}top:{{{t|0}}}px;
+
   {{#var:margin}}top:{{#var:t}};
   {{#var:margin}}right:{{{r|0}}}px;
+
   {{#var:margin}}right:{{#var:r}};
   {{#var:margin}}bottom:{{{b|0}}}px;
+
   {{#var:margin}}left:{{#var:l}};
   {{#var:margin}}left:{{{l|0}}}px;  
+
   {{#var:margin}}bottom:{{#var:b}};
 
  '><!--
 
  '><!--
 
-->[[Bild:{{#var:img}}|{{#var:w}}|ohne|link=]]</div><!--
 
-->[[Bild:{{#var:img}}|{{#var:w}}|ohne|link=]]</div><!--
-->[[Bild:{{#var:img}}|75x75px|thumb|{{#var:anm}}]]
+
 
</div>{{#var:text}}</div><!--   
+
  Dummy-Bild mit Beschreibung für Media-Viewer:
 +
-->{{#if:{{#var:noviewer}}|<!--do nothing-->
 +
| [[Bild:{{#var:img}}|75x75px|thumb|{{#var:anm}}]]
 +
}}<!--
 +
--></div>{{#var:text}}<!--
 +
 
 +
Attribut für Bildlink
 +
 
 +
-->{{#set:uses_image={{#var:img_id}}
 +
}}</div></onlyinclude><!--   
  
 
CSS
 
CSS
  
 
-->{{#css:
 
-->{{#css:
.diax2 {
+
.testbild .diax2 {
  position: relative;
+
    width: 150px;
  margin-left: auto;
 
  margin-right: auto;
 
  max-width: 650px;
 
 
}
 
}
.diax2 .thumb .thumbinner,
+
}}</div>  
.diax2  .thumb .thumbinner a {
 
    position: absolute;
 
    top: 0;
 
    left: 0;
 
    bottom: 0;
 
    right: 0;
 
    width: auto!important;
 
    opacity: 0;
 
}
 
.diax2 .innen img {
 
    width: 100%;
 
    height: inherit;
 
}
 
.diax2 a {
 
    cursor: zoom-in;
 
}
 
.diax2 .bildtext {
 
    position: absolute;
 
    left: 0;
 
    right: 0;
 
    bottom: 0;
 
    padding: 4px .5em;
 
    line-height: 16px;
 
    background-color: rgba(0,0,0,0.5);
 
    color: #E3E3CA;
 
}
 
}}</onlyinclude></div>  
 
 
----
 
----
 
Parameter:
 
Parameter:
Zeile 112: Zeile 136:
 
  | (text)
 
  | (text)
 
  | rw= [px]
 
  | rw= [px]
  | rh= [px]
+
  | rh= [px, auto] <!-- default= rw -->
 
  | top=
 
  | top=
 
  | l=
 
  | l=
Zeile 120: Zeile 144:
 
  | style= (CSS)
 
  | style= (CSS)
 
  }}
 
  }}
  </nowiki>
+
  </nowiki><!--
 +
{{Spezial:Linkliste/{{FULLPAGENAME}}}}
 +
--><noinclude>
 +
=== Verwendung in anderen Vorlagen ===
 +
 +
{{Spezial:Linkliste/{{FULLPAGENAME}}|namespace=10}}
 +
 
 +
<templatedata>
 +
{
 +
"params": {
 +
"img": {},
 +
"text": {},
 +
"rw": {},
 +
"rh": {},
 +
"t": {},
 +
"r": {},
 +
"l": {},
 +
"b": {},
 +
"style": {},
 +
"noviewer": {
 +
"description": "Schaltet Popup-Funktion aus",
 +
"example": "1",
 +
"type": "boolean"
 +
}
 +
},
 +
"description": "Basisvorlage für diverse Bildformate"
 +
}
 +
</templatedata></noinclude>

Version vom 13. August 2022, 13:44 Uhr

DiaX.2

Das Bild passt sich an die Größe des umgebenden DIV an. Standardmäßig ist eine div-Dimension von 1:2 angegeben (dies vor allem für Vorlage:Galerie).

Testbild:

Okuninushi hokusai.jpg
Ōkuninushi heilt den Hasen von Inaba, dem Meeresungeheuer (wani) das Fell abgezogen haben. Hokusai interpretiert Ōkuninushi als Daikoku und die wani als Krokodile. Werk von Katsushika Hokusai (1760–1849). Edo-Zeit
Museum of Fine Arts, Boston

Parameter:

 {{DiaX.2
 | uzume-hokusai.jpg
 | (text)
 | rw= [px]
 | rh= [px, auto] <!-- default= rw -->
 | top=
 | l=
 | r=
 | lr=
 | b=
 | style= (CSS)
 }}
 

Verwendung in anderen Vorlagen

Basisvorlage für diverse Bildformate

Vorlagenparameter

ParameterBeschreibungTypStatus
Imgimg

keine Beschreibung

Unbekanntoptional
Texttext

keine Beschreibung

Unbekanntoptional
Rwrw

keine Beschreibung

Unbekanntoptional
Rhrh

keine Beschreibung

Unbekanntoptional
Tt

keine Beschreibung

Unbekanntoptional
Rr

keine Beschreibung

Unbekanntoptional
Ll

keine Beschreibung

Unbekanntoptional
Bb

keine Beschreibung

Unbekanntoptional
Stylestyle

keine Beschreibung

Unbekanntoptional
Noviewernoviewer

Schaltet Popup-Funktion aus

Beispiel
1
Booleschoptional