Vorlage:Image modal: Unterschied zwischen den Versionen

Version vom 13. August 2015, 22:07 Uhr

Hilfe zum Umgang mit dieser Vorlage finden Sie auf der Seite {{Image modal}}.

Template documentation[view] [edit] [history] [purge]

Description

A much nicer way of adding images to your text. Instead of [[Bild:Carousel-palace.jpg|thumb|300px|Palace]] use this {{image modal|Bild:Carousel-palace.jpg|caption=Palace}}, which renders to: Hilfe zum Umgang mit dieser Vorlage finden Sie auf der Seite {{Image modal}}.

This can be used anywhere on your wiki, as long as you use a bootstrap skin.

Parameters

Description of the entity created by this template or of the function of this template

Vorlagenparameter
Parameter		Beschreibung	Typ	Status
Bildname	`image`	Name des Thumbnailbildes. ACHTUNG: Hier muss der volle Name aber ohne die eckigen Klammern angegeben werden. Also Bild:Test.jpg und nicht [[Bild:Test.jpg]]	Datei	erforderlich
Alternativtext	`alt`	Gibt den Alternativtext für das Bild an. Dieser wird angezeigt, wenn man mit der Maus über das Bild fährt oder wenn man einen Browser ohne Bildwiedergabe verwendet Standard Dateiname des Bildes ohne Bild:	Einzeiliger Text	vorgeschlagen
Bildunterschrift	`caption`	Unterschrift für das kleine Thumbnailbild. Wenn angegeben, wird automatisch ein Rahmen um das Bild gezeichnet	Einzeiliger Text	optional
Bildausrichtung	`align`	Gibt die Ausrichtung des Bildes im Textfluss an. Mögliche Werte sind: <leer>, none, center, left, right. Bei den letzten beiden wird automatisch ein Textfluss um das Bild herum durchgeführt. Standard right	Einzeiliger Text	optional
Thumbnailbreite	`size`	Breite des kleinen Vorschaubildes. Wenn angegeben, dringend die Maßeinheit px mit angeben. Standard 300px	Einzeiliger Text	optional
Überschrift des Pop-ups	`title`	Überschrifttext, der über dem Pop-up angezeigt wird. Standard Dateiname des Bildes ohne Bild:	Einzeiliger Text	optional
Großes Bild	`largeimage`	Falls der Klick auf das Vorschaubild nicht eine große Version des selbigen öffnen soll, sondern ein anderes Bild, kann dies hier angegeben werden Standard der als 'image' übergebene Wert	Datei	optional
Bildbeschreibung	`description`	Beschreibungstext, der unter der großen Version des Bildes angezeigt wird. Standard Wert des Parameters 'caption'	Wikitext	optional
Link auf Quelle unterdrücken	`suppresssourcelink`	Normalerweise erscheint unterhalb des Bildes ein Knopf mit Link auf die Quellseite des Bildes. Wird dies hier auf 'Yes' gesetzt, wird dieser Link nicht angezeigt. Standard No	Wahrheitswert	optional

Usage

{{image modal
| image=
| caption=
| align=
| thumbsize=
| title=
| largeimage=
| description=
| suppresssourcelink=
}}

The above documentation is transcluded from Vorlage:Image modal/doc. (edit | history)
Please add categories to the /doc subpage. Subpages of this template.

@@ Zeile 1: / Zeile 1: @@
 <!-- Start your template code here. for tipps and tools for template development, please refer to our help-section --><!-- first the plausibility tests
--->{{#if:{{{image|{{{1|}}}}}}||{{#vardefine:error|1}}<div class="alert alert-danger" role="alert"><strong>Achtung:</strong> Bei Nutzung der Vorlage ''image modal'' muss der Name eines Bildes angegeben werden. Entweder als ersten Parameter oder als Parameter ''image''</div>}}<!-- end of plausibility.
+-->{{#if:{{{image|{{{1|}}}}}}a||{{#vardefine:error|1}}<div class="alert alert-danger" role="alert"><strong>Achtung:</strong> Bei Nutzung der Vorlage ''image modal'' muss der Name eines Bildes angegeben werden. Entweder als ersten Parameter oder als Parameter ''image''</div>}}<!-- end of plausibility.
 -->{{#if:{{#var:error}}|{{template other||[[Category:Erroneous]]}}Hilfe zum Umgang mit dieser Vorlage finden Sie auf der Seite {{tl|Image modal}}.|<!-- everythings fine, start with defining some vars, and maybe defaulting them. we do this here, so you can easily change them
--->{{#vardefine:Image_modal_image:{{{image|{{{1}}}}}}}}<!--
+-->{{#vardefine:Image_modal_image|{{{image|{{{1|}}}}}}}}<!--
--->{{#vardefine:Image_modal_id:{{#if:{{#var:Image_modal_id}}|{{#expr:1+{{#var:Image_modal_id}}}}|0}}}}<!--
+-->{{#vardefine:Image_modal_id|{{#if:{{#var:Image_modal_id}}|{{#expr:1+{{#var:Image_modal_id}}}}|0}}}}<!--
--->{{#vardefine:Image_modal_smallcaption:{{{smallcaption|}}}}}<!--
+-->{{#vardefine:Image_modal_caption|{{{caption|}}}}}<!--
--->{{#vardefine:Image_modal_alt:{{{alt|{{BASEPAGENAME:{{#var:Image_modal_image}}}}}}}}}<!--
+-->{{#vardefine:Image_modal_alt|{{{alt|{{BASEPAGENAME:{{#var:Image_modal_image}}}}}}}}}<!--
--->{{#vardefine:Image_modal_align:{{{align|right}}}}}<!--
+-->{{#vardefine:Image_modal_align|{{{align|right}}}}}<!--
--->{{#vardefine:Image_modal_nofloat:{{{nofloat|}}}}}<!--
+-->{{#vardefine:Image_modal_thumbsize|{{{thumbsize|300px}}}}}<!--
--->{{#vardefine:Image_modal_thumbsize:{{{thumbsize|300px}}}}}<!--
+-->{{#vardefine:Image_modal_largeimage|{{{largeimage|{{#var:Image_modal_image}}}}}}}<!--
--->{{#vardefine:Image_modal_largeimage:{{{largeimage|{{#var:Image_modal_image}}}}}}}<!--
+-->{{#vardefine:Image_modal_title|{{{title|{{BASEPAGENAME:{{#var:Image_modal_image}}}}}}}}}<!--
--->{{#vardefine:Image_modal_title:{{{title|{{#var:Image_modal_image}}}}}}}<!--
+-->{{#vardefine:Image_modal_imagesize|{{{imagesize|}}}}}<!--
--->{{#vardefine:Image_modal_imagesize:{{{imagesize|}}}}}<!--
+-->{{#vardefine:Image_modal_suppresssourcelink|{{{suppresssourcelink|}}}}}<!--
--->{{#vardefine:Image_modal_suppresssourcelink:{{{suppresssourcelink|}}}}}<!--
+-->{{#vardefine:Image_modal_description|{{{description|{{{caption|}}}}}}}}<!-- done with the defaults. now put out the code: --><div class="vw-image-modal" data-toggle="modal" data-target="#vwImageModal{{#var:Image_modal_id}}">[[{{#var:Image_modal_image}}|link=|{{#var:Image_modal_thumbsize}}|{{#var:Image_modal_align}}|alt={{#var:Image_modal_alt}}|{{#if:{{#var:Image_modal_caption}}|thumb{{!}}{{#var:Image_modal_caption}}}}]]</div>
--->{{#vardefine:Image_modal_caption:{{{caption|{{{smallcaption|}}}}}}}}<!-- done with the defaults. now put out the code: --><div class="" data-toggle="modal" data-target="#vwImageModal{{#var:Image_modal_id}}">[[{{#var:Image_modal_image}}|link=|{{#var:Image_modal_thumbsize}}|{{#var:Image_modal_align}}|alt={{#var:Image_modal_alt}}]]</div>
 <div id="vwImageModal{{#var:Image_modal_id}}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
@@ Zeile 21: / Zeile 20: @@
          <h4 class="modal-title" id="myModalLabel">{{#var:Image_modal_title}}</h4>
        </div>
-       <div class="modal-body">
+       <div class="modal-body">[[{{#var:Image_modal_largeimage}}|class=img-responsive|alt={{#var:Image_modal_alt}}|{{#var:Image_modal_imagesize}}|{{#var:Image_modal_caption}}|link=]]
-        <div class="">[[{{#var:Image_modal_largeimage}}|alt={{#var:Image_modal_alt}}]]</div>
+         {{#if:{{#var:Image_modal_description|}}|<p>{{#var:Image_modal_description}}</p>}}
-         <p>Lots of scope here to write as much content as you like about your images, with the additional benefit of a close button and the ability to direct the viewer to another page.</p>
        </div>
        <div class="modal-footer">
+        {{#ifeq:{{#var:Image_modal_suppresssourcelink|no}}|yes||<div class="btn btn-primary"> Read more </div>}}
          <div class="btn btn-default" data-dismiss="modal">Close</div>
-        <div class="btn btn-primary">Read More</div>
        </div>
      </div>
    </div>
-</div>
+</div><!-- end of {{#if:{{#var:error}}| .. else ...-->}}<!--Last line of your template code--><noinclude>
-<!-- these be the parameters:
-{{#var:Image_modal_}}
-image
-alt
-smallcaption
-align   (cant cope with empty align?)
-largeimage
-title
-caption
-thumbsize
-imagesize
-suppresssourcelink
-<!-- need :
-image
-optional
----
-alt
-smallcaption
-position
-nofloat
-largeimage
-title
-caption
-thumbsize
-imagesize
-suppresssourcelink
-    <div class="col-md-4">
-      <div class="" data-toggle="modal" data-target="#myModal1">
-      [[bild:tobi.jpg|link=]]</div>
-      <div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg">
-          <div class="modal-content">
-            <div class="modal-header">
-              <div class="close" data-dismiss="modal" aria-hidden="true">×</div>
-              <h4 class="modal-title" id="myModalLabel">My Image Title</h4>
-            </div>
-            <div class="modal-body">
-              <div class="">[[bild:carousel-castle.jpg]]</div>
-              <p>Lots of scope here to write as much content as you like about your images, with the additional benefit of a close
-              button and the ability to direct the viewer to another page.</p>
-            </div>
-            <div class="modal-footer">
-              <div class="btn btn-default" data-dismiss="modal">Close</div>
-              <div class="btn btn-primary">Read More</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-<!-- end of {{#if:{{#var:error}}| .. else ...-->}}<!--Last line of your template code--><noinclude>
 {{documentation}}
 <!-- Add categories to the /doc subpage, not here! -->
 </noinclude>