Vorlage:ImageSwitch

From FloraWiki - das Wiki zur Schweizer Flora
Jump to: navigation, search
[Bearbeiten] [Aktualisieren] Template-info.svg Dokumentation der Vorlage

Usage

This template creates a gallery using image links to “click & go”. It is intended to use in main keys with clear intuitive images. It's parameters follow template: Lead.

{{ImageSwitch | caption lines=2
 | image 1        = File:Bufo_viridis_female_quadrat.jpg 
   |result text 1 = Frösche/Kröten/Unken
   |lead 1        = springend mit 4 Beinen 
   |result 1      = Froschlurche – Anura
 | image 2        = File:Amphibienlaich und Larven Schlüsseleinstieg.jpg 
   |result text 2 = Amphibien-<br />larven und -laich
   |lead 2        = Bestimmung von Kaulquappen und Froschlaich
   |result 2      = Bestimmungshilfe für Amphibienlaich und -larven (Philipp Meinecke)
 | image 3        = File:Caudata quadratic.png 
   |result text 3 = Salamander/Molche
   |lead 3        = an feuchten Orten oder im Wasser lebend
   |result 3      = Schwanzlurche – Caudata
 | image 4        = File:Reptilia.jpg 
   |result text 4 = Reptilien
   |lead 4        = Haut aus hornigen Schuppen oder Schilden
   |result 4      = Bestimmungsschlüssel für Reptilien in Deutschland
}}

gives…

springend mit 4 Beinen
springend mit 4 Beinen
Bestimmung von Kaulquappen und Froschlaich
Bestimmung von Kaulquappen und Froschlaich
an feuchten Orten oder im Wasser lebend
an feuchten Orten oder im Wasser lebend
Haut aus hornigen Schuppen oder Schilden
Haut aus hornigen Schuppen oder Schilden

The often used default parameters 1=, 2= are not allowed.

Ablage/Notiz Template for copying

{{ImageSwitch | caption lines=2
 | image 1        = File:
   |result text 1 = 
   |lead 1        = 
   |result 1      = 
}}

Parameters

The following parameters are mandatory and optional:

title= 
optional title (can contain multiple languages preceded by “@en:” or “@de:”)
id= 
optional another id (default=imageswitch)
creators= 
list of creators (SMW: dc:creator)
contributors= 
list of contribitors (SMW: dc:contributor)
rating= 
0..5 (SMW: xmp:Rating)
recommendation group= 
what recommendation is the image switch for (SMW: recommendation group)
image width= 
width of all images (default = 150)
caption lines= 
number of text lines (default = 1)
lead lines= 
number of text lines for the lead text (default = 2)
caption style= 
caption's style
style= 
CSS sttyle of the whole gallery
layout format= 
result text or link text at the bottom or the top. Possible fixed values are:
result link top result text bottom” (=default) or
result link bottom result text top
image 1= image 30
up to 30 images
lead 1= lead 30
up to 30 descriptions, lead texts (can contain multiple languages preceded by “@en:” or “@de:”)
result 1= result 30
up to 30 result links, page names
result text 1= result text 30
up to 30 result texts (can contain multiple languages preceded by “@en:” or “@de:”)
result id 1= result id 30
id for a result, e.g. if a species portrait follows afterwards (no output, just exported to the JSON)
scientific name 1= scientific name 30
up to 30 result scientific names (SMW: dwc:scientificName)
common names 1= common names 30
up to 30 result common names (comma separated list, SMW: dwc:vernacularName, can contain multiple languages preceded by “@en:” or “@de:”)

Technical depandencies

Dependencies

  • template: ImageSwitch/aux
  • form: ImageSwitch, template: ImageSwitch/FormPart imageSettings
    // for a container using the CSS class="use-jquery-ui-tabs" tabs can be produced
    // see https://jqueryui.com/tabs/
    function initUiTabsInForms() {
      console.log("initUiTabsInForms");
      var use_jquery_ui_tabs= $(".use-jquery-ui-tabs");
      var use_jquery_ui_tabs_vertical= $(".use-jquery-ui-tabs-vertical");
      if (use_jquery_ui_tabs.length || use_jquery_ui_tabs_vertical.length) {
        mw.loader.using( 'jquery.ui.tabs', function () {
          var use_jquery_ui_tabs= $(".use-jquery-ui-tabs");// Google Chrome Fix
          var use_jquery_ui_tabs_vertical= $(".use-jquery-ui-tabs-vertical");// Google Chrome Fix
          console.log("initUiTabsInForms mw.loader.using");
          if ($(".use-jquery-ui-tabs").length) {
            $(".use-jquery-ui-tabs").tabs({event: "mouseover"});
            console.log("initUiTabsInForms tabs");
          }
          if (use_jquery_ui_tabs_vertical.length) {
            use_jquery_ui_tabs_vertical.tabs({event: "mouseover"}).addClass( "ui-tabs-vertical ui-helper-clearfix" );
            use_jquery_ui_tabs_vertical.find( "li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
            console.log("initUiTabsInForms tabs_vertical");
          }
        });
      }
    }
    

Multiple languages

Multiple languages are supposed to be placed as free text in template parameters preceded by “@en:” or “@de:” etc.:

<!-- 
  originally Wiki parsed text of:
--><span class="render_AtLanguageCode2wgUserLanguage">@de: Deutscher Text @en: english Text</span><!-- 
  becomes wrapped by JavaScript dependend on wgUserLanguage (is not the wgContentLanguage) to:
--><span class="render_AtLanguageCode2wgUserLanguage">
  <span xml:lang="de">Deutscher Text</span>
  <span xml:lang="en" style="display:none">english Text</span>
</span>

The display can be set by using the CSS selector xml:lang

See MediaWiki:JKeyRenderLanguageTaggedText2wgUserLanguage.js

/* 
 * @description 
 * used for Template:ImageSwitch to render
 * <span class="render_AtLanguageCode2wgUserLanguage">@de: Deutscher Text @en: english Text</span>
 * to
 * <span class="render_AtLanguageCode2wgUserLanguage">
 *   <span xml:lang="de">Deutscher Text</span>
 *   <span xml:lang="en" style="display:none">english Text</span>
 * </span>
 * depending on wgUserLanguage (which is the URL parameter uselang or set by the user in its onwn preferences)
 */
$(".render_AtLanguageCode2wgUserLanguage").each(function(){
	var regexSingleWgUserLanguageMatch = new RegExp("@" + mw.config.get("wgUserLanguage")+ ":\\s*(.+)");
	// reset titles
	$(this).find("[title*='@" + mw.config.get("wgUserLanguage")+ ":']").each(function(){
		var jQthis=$(this), thisTitleWithLanguageArray = jQthis.attr('title').split(/(?=@[a-z]{2}:)/g);
		$.each(thisTitleWithLanguageArray, function(index, value){
			if (value.match(regexSingleWgUserLanguageMatch)) {
				jQthis.attr('title', value.replace(regexSingleWgUserLanguageMatch,"$1"));
				// console.log(jQthis);
			}
		});
	});
	// reset img[alt]
	$(this).find("img[alt*='@" + mw.config.get("wgUserLanguage")+ ":']").each(function(){
		var jQthis=$(this), thisTitleWithLanguageArray = jQthis.attr('alt').split(/(?=@[a-z]{2}:)/g);
		$.each(thisTitleWithLanguageArray, function(index, value){
			if (value.match(regexSingleWgUserLanguageMatch)) {
				jQthis.attr('alt', value.replace(regexSingleWgUserLanguageMatch,"$1"));
				// console.log(jQthis);
			}
		});
	});
	// Links or normal text
	if ($(this).text().match(/@[a-z]{2}:/)) {// match language codes @en: @de: etc.
		// Links
		if ($(this).find("a").html()) {// match only real text
			if (!$(this).find("a").html().match(/</)) {
				$(this).find("a").html(// wrap with <span lang=""></span>
					$(this).find("a").text().replace(/@([a-z]{2}):\s*/i,'<span lang="$1">')
					.replace(/\s*@([a-z]{2}):\s*/gi,'</span><span lang="$1">')
					.replace(/\s*$/,'</span>')
				).find("span[lang!=" + mw.config.get("wgUserLanguage")+ "]").css({"display":"none"})
			}
		} else if ($(this).html()) {// normal texts
			if (!$(this).html().match(/</)) {
				$(this).html(// wrap with <span lang=""></span>
					$(this).text().replace(/@([a-z]{2}):\s*/i,'<span lang="$1">')
					.replace(/\s*@([a-z]{2}):\s*/gi,'</span><span lang="$1">')
					.replace(/\s*$/,'</span>')
				).find("span[lang!=" + mw.config.get("wgUserLanguage")+ "]").css({"display":"none"})
			}
		}
	}
	// reset display none if only one span[lang] is present
	$(this).find("span[lang]").parent().each(function(){ 
		var thisSpanLang = $(this).find("span[lang]");
		if(thisSpanLang.length==1) {
			thisSpanLang.removeAttr('style');
		}
	});
});

See also

The german cunterpart of this template is template: Bildweiche Flag icon de.png. Template: Gallery creates also image galleries but with image zoom when clicked.