Vorlagen Download/Bildkarten: Unterschied zwischen den Versionen

VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Markierung: 2017-Quelltext-Bearbeitung
 
(9 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
<div class="downloadarea">
<div class="downloadarea">
<span class="getButton">[[Medium:HW-ImageCards.zip|Download]]</span>
<span class="getButton">[[Medium:HW-Bildkarten.zip|Download]]</span>


[[File:Image cards large.png|450x450px|verweis=Special:FilePath/Image_cards_large.png]]
[[File:Image cards large.png|450x450px|verweis=Special:FilePath/Image_cards_large.png]]
</div>This template creates a set of images that is useful for linking to wiki pages.
</div>Diese Vorlage erstellt eine Reihe von Bildern, die für die Verlinkung von Wiki-Seiten vorgesehen sind.


== <span class="mw-headline">Import der Vorlage</span> ==
== <span class="mw-headline">Import der Vorlage</span> ==
Die benötigte Import-Datei befindet sich im Archiv HW-Bildkarten.zip. Sie enthält die Datei HW-Bildkarten.xml.
Die benötigte Import-Datei befindet sich im Archiv HW-Bildkarten.zip. Sie enthält die Datei HW-Bildkarten.xml.


<span><br /></span>
<span><span /><span /><span /><span /><span /><span /><span /><span /><br /></span>
Führen Sie auf der Seite ''Spezial:Import'' in Ihrem Wiki folgende Schritte durch:
Führen Sie auf der Seite ''Spezial:Import'' in Ihrem Wiki folgende Schritte durch:


Zeile 22: Zeile 22:
The xml import erstellt folgende Seiten:
The xml import erstellt folgende Seiten:


*Vorlage:Image_cards
*Vorlage:Bildkarten
*Vorlage:Image_cards/start
*Vorlage:Bildkarten/start
*Vorlage:Image_cards/end
*Vorlage:Bildkarten/end
*Vorlage:Image_cards/styles.css
*Vorlage:Bildkarten/styles.css


==Bildkarten darstellen==
==Bildkarten darstellen==
Zeile 35: Zeile 35:
*'''Bilder oder Icons:''' Sie können wählen, ob Sie Bildkarten oder Icon-lkarten erstellen möchten. Icon-karten sind nur in den Größen ''klein'' und ''mittel'' darstellbar. Wenn Sie Bilder verwenden möchten, müssen Sie diese zuerst in Ihr Wiki hochladen.
*'''Bilder oder Icons:''' Sie können wählen, ob Sie Bildkarten oder Icon-lkarten erstellen möchten. Icon-karten sind nur in den Größen ''klein'' und ''mittel'' darstellbar. Wenn Sie Bilder verwenden möchten, müssen Sie diese zuerst in Ihr Wiki hochladen.


<span><span /><br /></span>
<span><span /><span /><span /><span /><span /><span /><span /><span /><span /><br /></span>
[[Vorlagen Download/Bildkarten#Einstellungen|siehe unten: Liste aller Einstellungen]]
[[Vorlagen Download/Bildkarten#Einstellungen|siehe unten: Liste aller Einstellungen]]


===Bildkarten===
===Bildkarten===
The easiest way to add card is to choose a starting layout from the examples provided on this page. Simply copy and paste the example code in source-editing mode into your page.
Wählen Sie ein Startlayout aus den Beispielen auf dieser Seite. Kopieren Sie einfach den Beispielcode und fügen Sie ihn im Quellbearbeitungsmodus auf einer Wikiseite ein.


{{Messagebox|boxtype=important|icon=|Note text=Always paste any code using plaintext - '''<code>Ctrl+Shift+v</code>''' - in your wiki in source editing mode to avoid creating unnecessary tags which will break the view.|bgcolor=}}
{{Hinweisbox|boxtype=important|icon=|Note text=Kopierte Inhalte immer über  '''<code>Strg+Umschalt+v</code>''' in den Quelltexteinfügen. Ansonsten können zusätzliche Formattierungs-Anweisungen erzeugt werden, die das Funktionieren der Vorlage verhindern.|bgcolor=}}


====Bildkarten einfügen====
====Bildkarten einfügen====
Standardmäßig werden die Bildkarten in mittlerer Größe angezeigt.[[File:Image cards standard.png|center|thumb|950x950px|Standard-sized cards|verweis=Special:FilePath/Image_cards_standard.png]]
Standardmäßig werden die Bildkarten in mittlerer Größe angezeigt.[[File:Image cards standard.png|center|thumb|950x950px|Standard-sized cards|verweis=Special:FilePath/Image_cards_standard.png]]


<span><span /><span /><span /><span /><br /></span>
<span><span /><span /><span /><span /><span /><span /><span /><span /><span /><span /><span /><span /><br /></span>


'''Code zumKopieren:'''<syntaxhighlight lang="text">
'''Code zum Kopieren:'''
{{Image cards/start|cardsize=}}
 
{{Image cards|imgname=yourimage1.jpg|label=London|imglink=https://google.de|alt=office in London headquarters}}
(Setzen Sie anschließend die gewünschten Dateinamen für i''magname='' aus Ihrem Wiki ein)<syntaxhighlight lang="text">
{{Image cards|imgname=yourimage2.jpg|label=Helsinki|imglink=http://google.de|alt=}}
{{Bildkarten/start|cardsize=}}
{{Image cards|imgname=yourimage3.jpg|label=Madrid|imglink=Main Page|alt=}}
{{Bildkarten|imgname=yourimage1.jpg|label=London|imglink=https://google.de|alt=office in London headquarters}}
{{Image cards|imgname=yourimage4.jpg|label=Hamburg|imglink=Main Page|alt=}}
{{Bildkarten|imgname=yourimage2.jpg|label=Helsinki|imglink=http://google.de|alt=}}
{{Image cards|imgname=yourimage5.jpg|label=Regensburg|imglink=|alt=}}{{Image cards/end}}
{{Bildkarten|imgname=yourimage3.jpg|label=Madrid|imglink=Main Page|alt=}}
{{Bildkarten|imgname=yourimage4.jpg|label=Hamburg|imglink=Main Page|alt=}}
{{Bildkarten|imgname=yourimage5.jpg|label=Regensburg|imglink=|alt=}}{{Bildkarten/end}}
</syntaxhighlight>
</syntaxhighlight>


====Large image cards====
====Große Bildkarten====
[[File:Image cards large.png|center|thumb|850x850px|Large image cards|verweis=Special:FilePath/Image_cards_large.png]]
[[File:Image cards large.png|center|thumb|850x850px|Large Bildkarten|verweis=Special:FilePath/Image_cards_large.png]]
 
<span><span /><span /><span /><span /><span /><span /><br /></span>
Code zum Kopieren:


<span><span /><br /></span>
(Setzen Sie anschließend die gewünschten Dateinamen für i''magname='' aus Ihrem Wiki ein)
Code zumKopieren:
<syntaxhighlight lang="text">
<syntaxhighlight lang="text">
{{Image cards/start|cardsize=large|flexwrap=wrap}}
{{Bildkarten/start|cardsize=large|flexwrap=wrap}}
{{Image cards|imgname=yourimage1.jpg|label=Sales & Marketing|imglink=Main Page}}
{{Bildkarten|imgname=yourimage1.jpg|label=Sales & Marketing|imglink=Main Page}}
{{Image cards|imgname=yourimage2.jpg|label=IT Admin|imglink=Main Page}}
{{Bildkarten|imgname=yourimage2.jpg|label=IT Admin|imglink=Main Page}}
{{Image cards|imgname=yourimage3.jpg|label=Development|imglink=Main Page}}
{{Bildkarten|imgname=yourimage3.jpg|label=Development|imglink=Main Page}}
{{Image cards|imgname=yourimage4.jpg|label=Tech Support|imglink=Main Page}}
{{Bildkarten|imgname=yourimage4.jpg|label=Tech Support|imglink=Main Page}}
{{Image cards|imgname=yourimage5.jpg|label=Accounting|imglink=Main Page}}
{{Bildkarten|imgname=yourimage5.jpg|label=Accounting|imglink=Main Page}}
{{Image cards|imgname=yourimage6.jpg|label=Management|imglink=Main Page}}{{Image cards/end}}
{{Bildkarten|imgname=yourimage6.jpg|label=Management|imglink=Main Page}}{{Bildkarten/end}}
</syntaxhighlight>
</syntaxhighlight>
[[File:Image cards bootstrap icons.png|thumb|Bootstrap icon name|verweis=Special:FilePath/Image_cards_bootstrap_icons.png]]
[[File:Image cards bootstrap icons.png|thumb|Bootstrap icon name]]
 
===Icon cards===
For icon cards, you can use most current bootstrap icons.  (BlueSpice includes Bootstrap icons v.)


On the bootstrap icons website, select an icon by clicking on it. Copy the name of the icon font into your template.<span /><span /><span /><span /><br />
===Icon-Karten===
Für Icon-karten können Sie die meisten aktuellen Bootstrap-Symbole verwenden. Wählen Sie auf [https://icons.getbootstrap.com/ der Bootstrap-Icons-Website] ein Icon aus, indem Sie darauf klicken. Kopieren Sie den Namen des Icons in Ihre Vorlage.<span /><span /><span /><span />
{{Hinweisbox|boxtype=Wichtig|icon=|Note text=BlueSpice beinhaltet nicht immer die aktuellste Version der Bootstrap-Icons.[https://de.wiki.bluespice.com/w/skins/BlueSpiceDiscovery/resources/bootstrap/icons/index.html Hier ist eine Liste der aktuell unterstützten Icons.]|bgcolor=}}
<br />
*<span>Icon-Karten unterstützen die Kartengrößen ''medium''(Standard) und ''small,'' aber nicht die Größe ''large''.</span>


*<span>Icon cards support card sizes ''medium (standard)'' and ''small'', but '''not''' ''large''.</span>
<span><span /><span /><span /><span /><span /><span /><span /><span /><span /><span /><br /></span>


<span><span /><span /><br /></span>
[[File:Image cards icons.png|center|thumb|950x950px|Icon cards]]


[[File:Image cards icons.png|center|thumb|950x950px|Icon cards|verweis=Special:FilePath/Image_cards_icons.png]]
<span><span /><span /><span /><span /><span /><span /><span /><span /><span /><span /><br /></span>
Code zum Kopieren:


<span><span /><span /><br /></span>
(Setzen Sie anschließend die gewünschten Dateinamen für i''magname='' aus Ihrem Wiki ein)<syntaxhighlight lang="text">
Code zumKopieren:<syntaxhighlight lang="text">
{{Bildkarten/start|cardsize=}}
{{Image cards/start|cardsize=}}
{{Bildkarten|iconname=bi bi-gear|iconcolor=Tomato|label=Processes|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-gear|iconcolor=Tomato|label=Processes|imglink=Main Page|alt=}}
{{Bildkarten|iconname=bi bi-lightbulb|label=How-to's|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-lightbulb|label=How-to's|imglink=Main Page|alt=}}
{{Bildkarten|iconname=bi bi-eyeglasses|label=Knowledge base|imglink=https://google.de|alt=}}
{{Image cards|iconname=bi bi-eyeglasses|label=Knowledge base|imglink=https://google.de|alt=}}
{{Bildkarten|iconname=bi bi-signpost|label=Directories|imglink=Main Page|alt=}}
{{Image cards|iconname=bi bi-signpost|label=Directories|imglink=Main Page|alt=}}
{{Bildkarten|iconname=bi bi-geo-alt|label=Locations|imglink=|alt=}}{{Bildkarten/end}}
{{Image cards|iconname=bi bi-geo-alt|label=Locations|imglink=|alt=}}{{Image cards/end}}
</syntaxhighlight>
</syntaxhighlight>
==Einstellungen==
==Einstellungen==


===Template:Image_cards/start===
===Vorlage:Bildkarten/start===
{| class="wikitable" style="width:100%;"
{| class="wikitable" style="width:100%;"
! style="background-color:rgb(234, 236, 240);text-align:center;width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Parameter
! style="background-color:rgb(234, 236, 240);text-align:center;width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Parameter
Zeile 102: Zeile 107:
|- style="box-sizing: inherit;"
|- style="box-sizing: inherit;"
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |cardsize
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |cardsize
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |  
*medium (can stay empty, it is the default)
*medium (can stay empty, it is the default)
*small
*small
*large
*large
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Sets the size of the individual cards
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Setzt die Größe der einzelnen Karten.
|-
|-
| rowspan="2" |justifycontent
| rowspan="2" |justifycontent
|
|
*space-between (default)
*space-between (default)
|Spreads the cards out evenly in the available space
| Verteilt die Karten gleichmäßig auf dem verfügbaren Platz in einer Zeile.
 
<span><br /></span>
Wenn die Anzahl der Karten hier einen Zeilenumbruch verursacht, und Sie nicht von "space-between" auf "flex-start" umstellen möchten, können Sie hier zusätzliche leere Platzhalterkarten einfügen, die die Bildkarten in der zweiten Reihe nach links "schieben". Die Anzahl der nötigen Platzhalter müssen Sie austesten. Hier würden 2 Platzhalter generiert werden:<syntaxhighlight lang="text">
{{Bildkarten|class=placeholder}}
{{Bildkarten|class=placeholder}}
</syntaxhighlight>
|-
|-
|
|  
*flex-start
*flex-start
|If there is a wrap to another line, the cards are left-aligned
| Wenn es einen Umbruch zu einer anderen Zeile gibt (z.B. über die Einstellung flexwrap=wrap), werden die Karten linksbündig ausgerichtet.
|-
|-
|flexwrap
| flexwrap
|
|
*nowrap (default)
* nowrap (default)
|Cards get smaller if many images are added to avoid wrapping
|Karten werden kleiner, wenn neue Bilder hinzugefügt werden. Es erfolgt kein Zeilenumbruch.
|-
|-
|flexwrap
|flexwrap
|
|
*wrap
*wrap
|Cards keep their original size. Images that don't fit on the first row will move to the next row.  
|Die Karten behalten ihre Originalgröße. Bilder, die nicht in die erste Reihe passen, werden in die nächste Reihe verschoben.
This setting should be used with cardsize=large.
Diese Einstellung sollte vor allem mit ''cardsize=large'' verwendet werden.
|}
|}


===Template:Image_cards===
===Vorlage:Bildkarten===
{| class="wikitable" style="width:100%;"
{| class="wikitable" style="width:100%;"
! style="background-color:rgb(234, 236, 240);text-align:center;width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Parameter
! style="background-color:rgb(234, 236, 240);text-align:center;width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
! style="background-color:rgb(234, 236, 240);text-align:center;width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Value
! style="background-color:rgb(234, 236, 240);text-align:center;width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Value
! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Description
! style="background-color:rgb(234, 236, 240);text-align:center;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Description
|-
|-
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |imgname
| style="width:200px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |imgname
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |e.g.:   
| style="width:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" | e.g.:   


myimage.jpg, myimage.png
meinbild.jpg, meinbild.png
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Name of the image without a namespace prefix.
| style="box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |Name des Bildes ohne Namensraum-Präfix.
 
Es darf kein Wert angegeben sein, wenn Icons anstelle von Bildern verwendet werden.
It needs to be blank or not present if icons are used instead of images.
|-
|-
|label
| label
|e.g.:  
|e.g.:  
London
London
|Label that is shown under the image/icon.
|Beschriftung, die unter dem Bild/Symbol angezeigt wird.
|-
|-
|imglink
|imglink
|e.g.:
|e.g.:
Main_Page
Hauptseite


Help:Main_Page
Hilfe:Hauptseite


<nowiki>https://google.com</nowiki>
https://google.de
|Link to a wiki page or a website.
|Link zu einer Wiki-Seite oder einer Website.
The link is optional.
Der Link ist optional.
|-
|-
|alt
|alt
|e.g.:
|e.g.:
office in London headquarters
Büro am Standort London
|Provided for assistive technologies of users who cannot see the image.
| Bereitgestellt zur Unterstützung von Benutzern mit Bildschirmlesegeräten.
This is not necessary when using icons, since icons are loaded as background images only.
Bei Verwendung von Icons ist diese Angabe nicht notwendig, da Icons nur als Hintergrundbilder geladen werden.
|-
|-
|iconname
|iconname
|e.g.:
| e.g.:
bi bi-lightbulb
bi bi-lightbulb
|Used instead of imgname if icons are used as a visual.
|Wird anstelle von ''imgname'' verwendet, wenn Icons als Bild verwendet werden.
|-
|-
|iconcolor
|iconcolor
Zeile 174: Zeile 184:


<nowiki>#</nowiki>607d8b
<nowiki>#</nowiki>607d8b
|HTML-color value. This includes [https://www.w3schools.com/colors/colors_names.asp color names] or generally [https://www.w3schools.com/colors/colors_schemes.asp HEX-values].
|HTML-Farbwert. Es sind  [https://www.w3schools.com/colors/colors_names.asp gültige Farbbezeichnungen] oder (meistens) [https://www.w3schools.com/colors/colors_schemes.asp HEX-]Werte möglich.
|}
|}

Aktuelle Version vom 23. Februar 2023, 09:50 Uhr

Download

Image cards large.png

Diese Vorlage erstellt eine Reihe von Bildern, die für die Verlinkung von Wiki-Seiten vorgesehen sind.

Import der Vorlage[Bearbeiten | Quelltext bearbeiten]

Die benötigte Import-Datei befindet sich im Archiv HW-Bildkarten.zip. Sie enthält die Datei HW-Bildkarten.xml.


Führen Sie auf der Seite Spezial:Import in Ihrem Wiki folgende Schritte durch:

  1. Entpacken Sie die zip-Datei.
  2. Klicken Sie Browse... und wählen Sie die Datei HW-Bildkarten.xml.
  3. Geben Sie ein Interwiki-Präfix an. Da dieses Feld erforderlich ist, geben Sie hier einfach hw (für hallowelt) ein.
  4. Belassen Sie die Vorauswahl Zu den Standard-Speicherorten importieren.
  5. Klicken Sie Datei hochladen... .

Die Vorlage ist nun in Ihrem Wiki verfügbar .

Enthaltene Importdateien[Bearbeiten | Quelltext bearbeiten]

The xml import erstellt folgende Seiten:

  • Vorlage:Bildkarten
  • Vorlage:Bildkarten/start
  • Vorlage:Bildkarten/end
  • Vorlage:Bildkarten/styles.css

Bildkarten darstellen[Bearbeiten | Quelltext bearbeiten]

Allgemeines[Bearbeiten | Quelltext bearbeiten]

  • Start- und Endvorlagen: Jedes Kartenset benötigt die Startvorlage (Bildkarten/start) und die Endvorlage (Bildkarten/end). Stellen Sie sicher, dass Sie die Endvorlage direkt nach der letzten Bildkarte ohne Zeilenumbruch hinzufügen. Wenn Sie einen Zeilenumbruch haben, sehen Sie nach der letzten Karte ein unnötiges Leerzeichen.
  • Kartengrößen: Sie können zwischen mittleren (Standard), kleinen und großen Bildkarten wählen. Standardmäßig wird die mittlere Größe angezeigt.
  • Bilder oder Icons: Sie können wählen, ob Sie Bildkarten oder Icon-lkarten erstellen möchten. Icon-karten sind nur in den Größen klein und mittel darstellbar. Wenn Sie Bilder verwenden möchten, müssen Sie diese zuerst in Ihr Wiki hochladen.


 siehe unten: Liste aller Einstellungen

Bildkarten[Bearbeiten | Quelltext bearbeiten]

Wählen Sie ein Startlayout aus den Beispielen auf dieser Seite. Kopieren Sie einfach den Beispielcode und fügen Sie ihn im Quellbearbeitungsmodus auf einer Wikiseite ein.

Wichtig!Kopierte Inhalte immer über Strg+Umschalt+v in den Quelltexteinfügen. Ansonsten können zusätzliche Formattierungs-Anweisungen erzeugt werden, die das Funktionieren der Vorlage verhindern.


Bildkarten einfügen[Bearbeiten | Quelltext bearbeiten]

Standardmäßig werden die Bildkarten in mittlerer Größe angezeigt.

Standard-sized cards

Code zum Kopieren:

(Setzen Sie anschließend die gewünschten Dateinamen für imagname= aus Ihrem Wiki ein)

{{Bildkarten/start|cardsize=}}
{{Bildkarten|imgname=yourimage1.jpg|label=London|imglink=https://google.de|alt=office in London headquarters}}
{{Bildkarten|imgname=yourimage2.jpg|label=Helsinki|imglink=http://google.de|alt=}}
{{Bildkarten|imgname=yourimage3.jpg|label=Madrid|imglink=Main Page|alt=}}
{{Bildkarten|imgname=yourimage4.jpg|label=Hamburg|imglink=Main Page|alt=}}
{{Bildkarten|imgname=yourimage5.jpg|label=Regensburg|imglink=|alt=}}{{Bildkarten/end}}

Große Bildkarten[Bearbeiten | Quelltext bearbeiten]

Large Bildkarten


 Code zum Kopieren:

(Setzen Sie anschließend die gewünschten Dateinamen für imagname= aus Ihrem Wiki ein) 

{{Bildkarten/start|cardsize=large|flexwrap=wrap}}
{{Bildkarten|imgname=yourimage1.jpg|label=Sales & Marketing|imglink=Main Page}}
{{Bildkarten|imgname=yourimage2.jpg|label=IT Admin|imglink=Main Page}}
{{Bildkarten|imgname=yourimage3.jpg|label=Development|imglink=Main Page}}
{{Bildkarten|imgname=yourimage4.jpg|label=Tech Support|imglink=Main Page}}
{{Bildkarten|imgname=yourimage5.jpg|label=Accounting|imglink=Main Page}}
{{Bildkarten|imgname=yourimage6.jpg|label=Management|imglink=Main Page}}{{Bildkarten/end}}
Bootstrap icon name

Icon-Karten[Bearbeiten | Quelltext bearbeiten]

Für Icon-karten können Sie die meisten aktuellen Bootstrap-Symbole verwenden. Wählen Sie auf der Bootstrap-Icons-Website ein Icon aus, indem Sie darauf klicken. Kopieren Sie den Namen des Icons in Ihre Vorlage.

Wichtig!BlueSpice beinhaltet nicht immer die aktuellste Version der Bootstrap-Icons.Hier ist eine Liste der aktuell unterstützten Icons.


  • Icon-Karten unterstützen die Kartengrößen medium(Standard) und small, aber nicht die Größe large.

Icon cards


 Code zum Kopieren:

(Setzen Sie anschließend die gewünschten Dateinamen für imagname= aus Ihrem Wiki ein)

{{Bildkarten/start|cardsize=}}
{{Bildkarten|iconname=bi bi-gear|iconcolor=Tomato|label=Processes|imglink=Main Page|alt=}}
{{Bildkarten|iconname=bi bi-lightbulb|label=How-to's|imglink=Main Page|alt=}}
{{Bildkarten|iconname=bi bi-eyeglasses|label=Knowledge base|imglink=https://google.de|alt=}}
{{Bildkarten|iconname=bi bi-signpost|label=Directories|imglink=Main Page|alt=}}
{{Bildkarten|iconname=bi bi-geo-alt|label=Locations|imglink=|alt=}}{{Bildkarten/end}}

Einstellungen[Bearbeiten | Quelltext bearbeiten]

Vorlage:Bildkarten/start[Bearbeiten | Quelltext bearbeiten]

Parameter Value Description
cardsize
  • medium (can stay empty, it is the default)
  • small
  • large
 Setzt die Größe der einzelnen Karten.
justifycontent
  • space-between (default)
 Verteilt die Karten gleichmäßig auf dem verfügbaren Platz in einer Zeile.


Wenn die Anzahl der Karten hier einen Zeilenumbruch verursacht, und Sie nicht von "space-between" auf "flex-start" umstellen möchten, können Sie hier zusätzliche leere Platzhalterkarten einfügen, die die Bildkarten in der zweiten Reihe nach links "schieben". Die Anzahl der nötigen Platzhalter müssen Sie austesten. Hier würden 2 Platzhalter generiert werden:
{{Bildkarten|class=placeholder}}
{{Bildkarten|class=placeholder}}
  • flex-start
 Wenn es einen Umbruch zu einer anderen Zeile gibt (z.B. über die Einstellung flexwrap=wrap), werden die Karten linksbündig ausgerichtet.
flexwrap
  • nowrap (default)
 Karten werden kleiner, wenn neue Bilder hinzugefügt werden. Es erfolgt kein Zeilenumbruch.
flexwrap
  • wrap
 Die Karten behalten ihre Originalgröße. Bilder, die nicht in die erste Reihe passen, werden in die nächste Reihe verschoben.

Diese Einstellung sollte vor allem mit cardsize=large verwendet werden.

Vorlage:Bildkarten[Bearbeiten | Quelltext bearbeiten]

Value Description
imgname e.g.:

meinbild.jpg, meinbild.png

Name des Bildes ohne Namensraum-Präfix.

Es darf kein Wert angegeben sein, wenn Icons anstelle von Bildern verwendet werden.

label e.g.:

London

Beschriftung, die unter dem Bild/Symbol angezeigt wird.
imglink e.g.:

Hauptseite

Hilfe:Hauptseite

https://google.de

Link zu einer Wiki-Seite oder einer Website.

Der Link ist optional.

alt e.g.:

Büro am Standort London

Bereitgestellt zur Unterstützung von Benutzern mit Bildschirmlesegeräten.

Bei Verwendung von Icons ist diese Angabe nicht notwendig, da Icons nur als Hintergrundbilder geladen werden.

iconname e.g.:

bi bi-lightbulb

Wird anstelle von imgname verwendet, wenn Icons als Bild verwendet werden.
iconcolor e.g.:

Tomato,

#607d8b

HTML-Farbwert. Es sind gültige Farbbezeichnungen oder (meistens) HEX-Werte möglich.

Protokoll zur Verschlüsselung und Authentifizierung der Kommunikation zwischen Webserver und Browser im World Wide Web.

Im Wiki abgetrennter Bereich, dessen Inhalte über spezielle Berechtigungen gelesen und bearbeitet werden können. Einen Namensraum erkennt man an einem Präfix vor dem Artikeltitel.


Feedback zur Dokumentation ist im Community-Forum möglich.

Abgerufen von „https://de.wiki.bluespice.com/w/index.php?title=Vorlagen_Download/Bildkarten&oldid=6965“