Vorlage:ImageSwitch

Aus Offene Naturführer
Wechseln zu: Navigation, Suche
[Bearbeiten] [Aktualisieren] Template-info.svg Dokumentation der Vorlage
Diese Dokumentation ist von Vorlage:ImageSwitch/doc transkludiert. (Bearbeiten | Versionen)

PROBLEM: a parameter for Parent key is missing, there is not way to go back with this key style!

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/Unkenc
   |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
Magnify-clip-tiny bottom-right-white-gradient.png
springend mit 4 Beinen
Frösche/Kröten/Unken 
Bestimmung von Kaulquappen und Froschlaich
Magnify-clip-tiny bottom-right-white-gradient.png
Bestimmung von Kaulquappen und Froschlaich
Amphibien-
larven und -laich 
an feuchten Orten oder im Wasser lebend
Magnify-clip-tiny bottom-right-white-gradient.png
an feuchten Orten oder im Wasser lebend
Salamander/Molche 
Haut aus hornigen Schuppen oder Schilden
Magnify-clip-tiny bottom-right-white-gradient.png
Haut aus hornigen Schuppen oder Schilden
Reptilien 

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:”)
title style= 
optional title CSS style
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) THIS SHOULD BE NAMED "result lines"!!!
lead lines= 
number of text lines for the lead text (default = 2)
caption style= 
caption's style THIS SHOULD BE RESULT 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 dependencies

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");
      }
    });
  }
}
  • MediaWiki:Print.css preventing default href link display at corner pictogram 
    .ImageSwitchGallery a.external.text::after {
  content:""!important;
}

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 counterpart of this template is template: Bildweiche Flag icon de.png. Template: Gallery creates also image galleries but with image zoom when clicked.

Quelle: Offene Naturführer, Das Wiki zu Bestimmungsfragen: Vorlage:ImageSwitch. Abgerufen am 12. Dezember 2024, 18:44 von https://offene-naturfuehrer.de/web/Vorlage:ImageSwitch