Vorlage:Character images tabs

Aus Offene Naturführer
Wechseln zu: Navigation, Suche

Komplexe Piktogramm-Bilder-Darstellung für in verschiedene Merkmale gruppierte Bilderserien.

Nutzung

Die Vorlage besteht aus verschachtelten Tabs

  • Kopf-Tabs („header“, Merkmalspiktogramme) und
  • Bilder-Tabs

Die zu zeigenden Bilder müssen immer als ungeordnete Liste (beginnend mit einem Stern *) angegeben werden. Optionaler Bildertext wird durch // abgetrennt. Beispiel: 

{{Character images tabs
|character headers unordered list=
* File:Twemoji 1f33f.svg // Blätter
* File:Sunflower clip art.svg // Blüten
* File:Pear icon.png // Früchte
* File:Acer-pseudoplatanus-terminal-bud (Sten Porse, 2006.03.29) transparent.png // Knospen
* File:Albero (by emilie.rollandin 2011-11-01, openclipart.org).svg // Baum
|character 1 unordered list=
* File:Acer pseudoplatanus Blatt-SRothbauer.png // (Foto: Frank Vincentz)
* File:Acer pseudoplatanus 01 SiegfriedKehl.JPG
* File:Acer pseudoplatanus JuliaKruse 1.jpg  // (Foto: Julia Kruse)
|character 2 unordered list=* File:Acer pseudoplatanus JuliaKruse 2.jpg // (Foto: Julia Kruse)
|character 3 unordered list=* File:Acer pseudoplatanus single fruit modified commons image JR Press.jpg // Frucht (Foto: JR Press)
|character 5 unordered list=* File:Acer pseudoplatanus JuliaKruse 4.jpg // (Foto: Julia Kruse)
}}
  • Acer pseudoplatanus Blatt-SRothbauer.png
  • Acer pseudoplatanus 01 SiegfriedKehl.JPG
  • Acer pseudoplatanus JuliaKruse 1.jpg
(Foto: Frank Vincentz)
(Foto: Frank Vincentz)
(Foto: Julia Kruse)
(Foto: Julia Kruse)
  • Acer pseudoplatanus JuliaKruse 2.jpg
(Foto: Julia Kruse)
(Foto: Julia Kruse)
  • Acer pseudoplatanus single fruit modified commons image JR Press.jpg
Frucht (Foto: JR Press)
Frucht (Foto: JR Press)
Keine Bilder
  • Acer pseudoplatanus JuliaKruse 4.jpg
(Foto: Julia Kruse)
(Foto: Julia Kruse)
Blätter Blätter

  • (Foto: Frank Vincentz)

  • Acer pseudoplatanus 01 SiegfriedKehl.JPG

  • (Foto: Julia Kruse)

Blüten Blüten

  • (Foto: Julia Kruse)

Früchte Früchte

  • Frucht (Foto: JR Press)

Knospen Knospen
Keine Bilder
Baum Baum

  • (Foto: Julia Kruse)

Für das Ausdrucken werden die Tabs ausgeblendet und eine Standard Gallery mit 280px-breiten Bildern wird eingeblendet (siehe CSS). Leere Merkmale werden im Druck ausgeblendet.

Parameter

| character headers unordered list= 
Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 1 unordered list= 
für Merkmal-Tab 1 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 2 unordered list= 
für Merkmal-Tab 2 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 3 unordered list= 
für Merkmal-Tab 3 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 4 unordered list= 
für Merkmal-Tab 4 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 5 unordered list= 
für Merkmal-Tab 5 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 6 unordered list= 
für Merkmal-Tab 6 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 7 unordered list= 
für Merkmal-Tab 7 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 8 unordered list= 
für Merkmal-Tab 8 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 9 unordered list= 
für Merkmal-Tab 9 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
| character 10 unordered list= 
für Merkmal-Tab 10 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung

Um Bilder vollseitig auszudrucken kann dies umschalten mit den jeweiligen Parameter |character 1 print out as full page (usw.) geschehen:

| character 1 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 2 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 3 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 4 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 5 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 6 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 7 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 8 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 9 print out as full page=  
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen
| character 10 print out as full page= 
optional Bildausdruck als volle Seite; (ja) oder irgendein Wert, sonst Parameter weglassen

Und hierbei lassen sich auch zusätzliche CSS Angaben hinzufügen zur normalen Bilderliste, um entweder den Bild-Container oder auch noch die Bild-Beschriftung den Druckbedingungen anzupassen, dazu kann man für das CSS das 3. und/oder 4. Feld verwendet werden, wie folgt: 

 * Datei:Bild 1.jpg // Beschriftung 1 // CSS-Bild 1-Container // CSS-Beschriftung 1
 * Datei:Bild 2.jpg // Beschriftung 2 // CSS-Bild 2-Container
 * Datei:Bild 3.jpg // Beschriftung 3 // CSS-Bild 3-Container // CSS-Beschriftung 3


| character header 1 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 2 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 3 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 4 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 5 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 6 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 7 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 8 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 9 CSS=  
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen
| character header 10 CSS= 
wahlweise CSS Format für die Piktogramm-Boxen, z.B. page-break-before:always; um Seitenumbruch zu erzwingen


Technische Abhängigkeiten

JavaScript

Code für MediaWiki:Jquery.overflowtabs.js 

/**
 * Template:Character_images_tabs
 *********************
 * Overflow Tabs v1.10
 * Extends jQuery UI Tabs.
 * 
 * This plugin will automatically detect the available space in a tabs container
 * and then determine if all of the tabs will fit, any tab that cannot fit in the
 * container on a single row will be grouped together in an 'overflow' drop down.
 * 
 * The tabs are automatically updated when the page resizes and can be updated manually
 * by running:
 * 
 *       $("#tabs").tabs("refresh");
 * 
 * Initialising the overflow tabs can be done by simply adding an extra option
 * when loading the jQuery ui tabs:
 * 
 *       var tabs = $('#tabs').tabs({
 *         overflowTabs: true
 *       });
 * 
 * Released under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 */
/*
 * CSS
.ui-tabs .ui-tabs-nav-arrows {
    position: absolute;
    top: 1px;
    right: 1px;
    left: 1px;
    margin: .1em;
    padding: 0;
}

.ui-tabs .ui-tabs-nav-arrows .ui-tabs-arrow-next {
    float: right;
}

.ui-tabs .ui-tabs-nav-arrows li {
    list-style: none;
    position: relative;
    cursor: pointer;
    z-index: 1000;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.ui-tabs .ui-tabs-nav-arrows li a {
    display: block;
    padding: .7em .1em;
}

.ui-tabs .ui-tabs-nav-arrows .ui-tabs-arrow-previous {
    float: left;
}

.ui-tabs .ui-tabs-scroll-container {
    position: relative;
    height: 2.7em;
    overflow: hidden;
}

.ui-tabs .ui-tabs-nav-scrollable {
    position: absolute;
    left: 0;
    right: 0;
}

.ui-tabs .ui-tabs-nav-scrollable ul {
    position: relative;
    width: 10000px;
}

.ui-tabs-overflow {
    position: absolute;
    z-index: 100;
    list-style: none;
    display: block;
    width: 150px;
    right: 0;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    min-height: 50px;
    background: #ececec;
    padding: 5px!important;
}

.ui-tabs-overflow li, .ui-tabs-overflow .ui-state-default {
    border: 0;
    clear: both;
}

.ui-tabs-overflow li:before, .ui-tabs-overflow li:after {
    border: 0;
}

.ui-tabs-overflow.hide {
    visibility: hidden;
}

.overflow-selector {
    position: absolute;
    top: 12px;
    right: 10px;
    background: #ececec;
    width: 40px;
    height: 15px;
    border: 1px solid #d3d3d3;
    border-top-left-radius: 5px;
    text-align: center;
    line-height: 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.overflow-selector .total {
    font-weight: normal;
}
 */

$.widget("ui.tabs", $.ui.tabs, {
  options: {
    overflowTabs: false,
    tabPadding: 25,
    containerPadding: 0,
    dropdownSize: 50
  },
  
  _create: function() {
    this._super("_create");
    this.tabsWidth = 0;
    this.containerWidth = 0;
    
    if (!this.options.overflowTabs)
      return;
    
    // update the tabs
    this.updateOverflowTabs();
    
    // Detect a window resize and check the tabs again
    var that = this;
    $(window).resize(function() {
      // Add a slight delay after resize, to fix Maximise issue.
      setTimeout(function() {
        that.updateOverflowTabs();
      }, 150);
    });
    
    // Detect dropdown click
    $(this.element).on('click', '.overflow-selector', function() {
      that.toggleList();
    });
  },
  
  refresh: function() {
    this._super("refresh");
    this.updateOverflowTabs();
  },
  
  visible: function(tab, after) {
    if (after === undefined)
      $(this.element).find('ul:first').prepend($(tab));
    else
      $(this.element).find('.last-fixed-tab:first').after($(tab));
      
    this.toggleList();
  },
  
  toggleList: function() {
    if ($(this.element).find('.ui-tabs-overflow:first').hasClass('hide')) {
      $(this.element).find('.ui-tabs-overflow:first').removeClass('hide');
    } else {
      $(this.element).find('.ui-tabs-overflow:first').addClass('hide');
    }
  },
  
  updateOverflowTabs: function() {
    var failsafe = 0;
    this._calculateWidths();
    
    // Loop until tabsWidth is less than the containerWidth
    while (this.tabsWidth > this.containerWidth && failsafe < 30)
    {
      this._hideTab();
      this._calculateWidths();
      failsafe++;
    }
    
    // Finish now if there are no tabs in the overflow list
    if ($(this.element).find('.ui-tabs-overflow:first li').size() == 0)
      return;
      
    // Reset
    failsafe = 0;
    
    // Get the first tab in the overflow list
    var next = this._nextTab();

    // Loop until we cannot fit any more tabs
    while (next.totalSize < this.containerWidth && $(this.element).find('.ui-tabs-overflow:first li').size() > 0 && failsafe < 30)
    {
      next.tab.appendTo($(this.element).find('.ui-tabs-nav:first'));
      this._calculateWidths();
      
      next = this._nextTab();

      failsafe++;
    }
    
    // Check to see if overflow list is now empty
    if ($(this.element).find('.ui-tabs-overflow:first li').size() == 0)
    {
      $(this.element).find('.ui-tabs-overflow:first').remove();
      $(this.element).find('.overflow-selector:first').remove();
    }
  },
  
  _calculateWidths: function() {
    var width = 0;
    $(this.element).find('.ui-tabs-nav:first > li').each(function(){
      width += $(this).outerWidth(true);
    });
    
    this.tabsWidth = width;
    this.containerWidth = $(this.element).parent().width() - this.options.containerPadding - this.options.dropdownSize;
    
    $(this.element).find('.overflow-selector:first .total').html($(this.element).find('.ui-tabs-overflow:first li').size());
  },
  
  _hideTab: function() {
    if (!$(this.element).find('.ui-tabs-overflow').length)
    {
      $(this.element).find('.ui-tabs-nav:first').after('<ul class="ui-tabs-overflow hide"></ul>');
      $(this.element).find('.ui-tabs-overflow:first').after('<div class="overflow-selector">&#8595 <span class="total">0</span></div>');
    }

    var lastTab = $(this.element).find('.ui-tabs-nav:first li').last();
    lastTab.prependTo($(this.element).find('.ui-tabs-overflow:first'));
  },
  
  _nextTab: function() {
    var result = {};
    var firstTab = $(this.element).find('.ui-tabs-overflow:first li').first();
    
    result['tab'] = firstTab;
    result['totalSize'] = this.tabsWidth + this._textWidth(firstTab) + this.options.tabPadding;
    
    return result;
  },

  _textWidth: function(element) {
    var self = $(element),
      children = self.children(),
      calculator = $('<span style="display: inline-block;" />'),
      width;

    children.wrap(calculator);
    width = children.parent().width();
    children.unwrap();
    
    return width;
  }
});

JavaScript für die Vorlage selber: 

/**
 * @description: Get jQuery ui tabs loaded for characters displayed as nested ui tabs
 * @requires: jquery.ui.tabs
 * @requires: template:Character_images_tabs
 * @returns {undefined}
 */
window.init_character_ui_tabs = function () {
  var character_ui_tabs_nested=$('#character_ui_tabs_nested');
  if (character_ui_tabs_nested.length) {
    mw.loader.using('jquery.ui.tabs', function () {
      var ui_version =$.ui.version.split('.').map(function(x) { return parseInt(x, 10); })
       , first_tab_index =  character_ui_tabs_nested.find('li').index(
              character_ui_tabs_nested.find('li').not('.no-image-content').first()
            );
      $.getScript(
        mw.config.get('wgScript') + '?title=MediaWiki:Jquery.overflowtabs.js&action=raw&ctype=text/javascript',
        function() {
      if (ui_version[0] <= 1 
        && ui_version[1] < 10) {
        character_ui_tabs_nested.tabs({
          fx: [{opacity:'toggle', duration: 'slow'}, {opacity:'toggle', duration: 'slow'}],
          active: first_tab_index,
          overflowTabs: true
        });
        character_ui_tabs_nested.find('.inner-tabs-container').tabs({
          fx: [{opacity:'toggle', duration: 'slow'}, {opacity:'toggle', duration: 'slow'}]
        });
      } else {
        character_ui_tabs_nested.tabs({
          hide: {effect: 'fadeOut', duration: 'slow'},
          show: {effect: 'fadeIn', duration: 'slow'},
          heightStyle: 'auto',
          active: first_tab_index,
          overflowTabs: true
        });
        character_ui_tabs_nested.find('.inner-tabs-container').tabs({
          hide: {effect: 'fadeOut', duration: 'slow'},
          show: {effect: 'fadeIn', duration: 'slow'},
          heightStyle: 'auto', overflowTabs: true
        });
      }
        }
      );
    });
  }
};
$(document).ready(function() {
  switch(mw.config.get( 'wgAction' )) {
    case "edit":
    case "view":
    case "submit": /* does not work somehow in MW. 1.20.7 */
    init_character_ui_tabs();
  }
});

CSS

/* MediaWiki:Print.css */
.noprint { display:none}
/* MediaWiki:Common.css */
@media screen, handheld, projection{
 *.printonly {display:none;}
} 

/* START template:Character_images_tabs  */
.custom-ui-tabs-center span.plainlinks.opacity-05,
.custom-ui-tabs-center span.plainlinks.opacity-05 *{
  opacity:0.5;
}
.custom-ui-tabs-center span.plainlinks.opacity-07,
.custom-ui-tabs-center span.plainlinks.opacity-07 *{
  opacity:0.7;
}

.custom-ui-tabs-sober {
  background:white!important;
  border: none!important;
}
.custom-ui-tabs-sober > .ui-widget-header {
  background: white!important;
  border: none!important;
  border-bottom: 1px solid #c0c0c0!important;
  -moz-border-radius: 0px!important;
  -webkit-border-radius: 0px!important;
  border-radius: 0px!important;
}
.custom-ui-tabs-sober  > .ui-tabs-nav .ui-state-default {
  background: white!important;
  border: none!important;
}
.custom-ui-tabs-sober  > .ui-tabs-nav .ui-state-active {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR42mNgGAWjgAA4cODAfxAmWzMMkGwIsmaSDcGmmWhD8GkmaAgxmnEaQopmDEPI0YxsCABrFhMgEiBgxwAAAABJRU5ErkJggg==") no-repeat bottom center!important;
  border: none!important;
}
.custom-ui-tabs-sober > .ui-tabs-nav .ui-state-default a {
  color: #c0c0c0!important;
}
.custom-ui-tabs-sober > .ui-tabs-nav .ui-state-active a {
  color: #459e00!important;
}
 
 
.custom-ui-tabs-nohdr { 
  padding: 0px!important; 
  background: none!important; 
  border-width: 0px!important; 
} 
.custom-ui-tabs-nohdr > .ui-tabs-nav { 
  padding-left: 0px!important; 
  background: transparent!important; 
  border-width: 0px 0px 1px 0px!important; 
  -moz-border-radius: 0px!important; 
  -webkit-border-radius: 0px!important; 
  border-radius: 0px!important; 
} 
.custom-ui-tabs-nohdr > .ui-tabs-panel {
  background: #f5f3e5 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAANUlEQVQYld2PMQoAIBDDQv//XKcbjIN4PxDEJYSSpVQNA/AZlIDENpS4bbZJdJ64twcu3MIC3g8dk2ON1B0AAAAASUVORK5CYII=") repeat-x scroll 50% top !important; 
  border-width: 0px 1px 1px 1px!important; 
}
 
.custom-ui-tabs-center > .ui-tabs-nav { 
  height: 52px!important;
  text-align: center!important; 
  margin-bottom: 0px !important;
} 
.custom-ui-tabs-center > .ui-tabs-nav li { 
  display: inline-block!important; 
  float: none!important; 
/*  top: 0px!important; 
  margin: 0em!important; 
  padding-bottom: 0px!important; */
}
/* START Jquery.overflowtabs */
.ui-tabs .ui-tabs-nav-arrows {
    position: absolute;
    top: 1px;
    right: 1px;
    left: 1px;
    margin: .1em;
    padding: 0;
}

.ui-tabs .ui-tabs-nav-arrows .ui-tabs-arrow-next {
    float: right;
}

.ui-tabs .ui-tabs-nav-arrows li {
    list-style: none;
    position: relative;
    cursor: pointer;
    z-index: 1000;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.ui-tabs .ui-tabs-nav-arrows li a {
    display: block;
    padding: .7em .1em;
}

.ui-tabs .ui-tabs-nav-arrows .ui-tabs-arrow-previous {
    float: left;
}

.ui-tabs .ui-tabs-scroll-container {
    position: relative;
    height: 2.7em;
    overflow: hidden;
}

.ui-tabs .ui-tabs-nav-scrollable {
    position: absolute;
    left: 0;
    right: 0;
}

.ui-tabs .ui-tabs-nav-scrollable ul {
    position: relative;
    width: 10000px;
}

.ui-tabs-overflow {
    position: absolute;
    z-index: 100;
    list-style: none;
    display: block;
    width: 150px;
    right: 0;
    border: 1px solid #d3d3d3;
    border-radius: 5px;
    min-height: 50px;
    background: #ececec;
    padding: 5px!important;
}

.ui-tabs-overflow li, .ui-tabs-overflow .ui-state-default {
    border: 0;
    clear: both;
}

.ui-tabs-overflow li:before, .ui-tabs-overflow li:after {
    border: 0;
}

.ui-tabs-overflow.hide {
    visibility: hidden;
}

.overflow-selector {
    position: absolute;
    top: 12px;
    right: 10px;
    background: #ececec;
    width: 40px;
    height: 15px;
    border: 1px solid #d3d3d3;
    border-top-left-radius: 5px;
    text-align: center;
    line-height: 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.overflow-selector .total {
    font-weight: normal;
}
/* END Jquery.overflowtabs */

/* END template:Character_images_tabs */


CSS (Vollseitenausdruck)

  • <div class="force-max-a4"> (sollte DIN A4 maximal ausfüllen)
  div.force-max-a4,
  div.force-max-a4.margin-5mm {
    vertical-align: middle!important;
  }
  div.force-max-a4 {/* minus 0mm Rand */
    width: 210mm!important;  height:297mm!important;
  }
  div.force-max-a4.margin-5mm {/* minus 5mm Rand */
    width: 200mm!important;  height:287mm!important;
  }
div.force-max-a4.margin-5mm-5mm-25mm-5mm {/* minus 5mm Rand, unten: 25mm Rand (oben-rechts-unten-links) */
  width: 200mm!important;  height:267mm!important;
}
div.force-max-a4.margin-5mm-5mm-20mm-5mm {/* minus 5mm Rand, unten: 20mm Rand (oben-rechts-unten-links) */
  width: 200mm!important;  height:272mm!important;
}
div.force-max-a4.margin-5mm-5mm-15mm-5mm {/* minus 5mm Rand, unten: 15mm Rand (oben-rechts-unten-links) */
  width: 200mm!important;  height:277mm!important;
}
div.force-max-a4 { text-align: center; page-break-before: always; }
div.force-max-a4 img.wide {
    height: auto!important;
    width: 100%!important;
}
div.force-max-a4 img.tall {
    height: 100%!important;
    width: auto!important;
}
div.force-max-a4 ~ div.Fusszeile-Statussymbole {
  margin-top: 5px!important;
  clear: both;
  height: 50px;
  text-align: center;
  border-top: 1px solid black;
  padding-top: 5px;
}
div.force-max-a4 ~ div.Fusszeile-Statussymbole > div {
  margin-right:0.5em;
  display:inline-block;
}
div.force-max-a4 ~ div.Fusszeile-Statussymbole > div:last-child { margin-right:0; }

JavaScript (Vollseitenausdruck)

$('div.force-max-a4').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 });


Quelle: Offene Naturführer, Das Wiki zu Bestimmungsfragen: Vorlage:Character images tabs. Abgerufen am 23. Dezember 2024, 01:32 von https://offene-naturfuehrer.de/web/Vorlage:Character_images_tabs