Vorlagen Download/Bildkarten: Unterschied zwischen den Versionen

Version vom 21. November 2022, 07:59 Uhr

Download

This template creates a set of images that is useful for linking to wiki pages.

Import der Vorlage

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:

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

Die Vorlage ist nun in Ihrem Wiki verfügbar .

Enthaltene Importdateien

The xml import erstellt folgende Seiten:

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

Bildkarten darstellen

Allgemeines

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

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

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

Code zum Kopieren:

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

Große Bildkarten

Code zum Kopieren:

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

Icon-Karten

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.

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

Code zum Kopieren:

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

Einstellungen

Vorlage:Bildkarten/start

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.
justifycontent	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

	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.

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

@@ Zeile 8: / Zeile 8: @@
 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 /><br /></span>
 Führen Sie auf der Seite ''Spezial:Import'' in Ihrem Wiki folgende Schritte durch:
@@ 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.
-<span><span /><br /></span>
+<span><span /><span /><br /></span>
 [[Vorlagen Download/Bildkarten#Einstellungen|siehe unten: Liste aller Einstellungen]]
 ===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====
 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 /><br /></span>
-'''Code zumKopieren:'''<syntaxhighlight lang="text">
+'''Code zum Kopieren:'''<syntaxhighlight lang="text">
 {{Image cards/start|cardsize=}}
 {{Image cards|imgname=yourimage1.jpg|label=London|imglink=https://google.de|alt=office in London headquarters}}
@@ Zeile 57: / Zeile 57: @@
 </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]]
 <span><span /><br /></span>
-Code zumKopieren:
+Code zum Kopieren:
 <syntaxhighlight lang="text">
 {{Image cards/start|cardsize=large|flexwrap=wrap}}
@@ Zeile 73: / Zeile 73: @@
 [[File:Image cards bootstrap icons.png|thumb|Bootstrap icon name|verweis=Special:FilePath/Image_cards_bootstrap_icons.png]]
-===Icon cards===
+===Icon-Karten===
-For icon cards, you can use most current bootstrap icons.  (BlueSpice includes Bootstrap icons v.)
+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.<span /><br /><span /><span /><span /><span />
+*<span>Icon-Karten unterstützen die Kartengrößen ''medium''(Standard) und ''small,'' aber nicht die Größe ''large''.</span>
-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 />
-*<span>Icon cards support card sizes ''medium (standard)'' and ''small'', but '''not''' ''large''.</span>
+<span><span /><span /><span /><br /></span>
-<span><span /><span /><br /></span>
 [[File:Image cards icons.png|center|thumb|950x950px|Icon cards|verweis=Special:FilePath/Image_cards_icons.png]]
-<span><span /><span /><br /></span>
+<span><span /><span /><span /><br /></span>
-Code zumKopieren:<syntaxhighlight lang="text">
+Code zum Kopieren:<syntaxhighlight lang="text">
 {{Image cards/start|cardsize=}}
 {{Image cards|iconname=bi bi-gear|iconcolor=Tomato|label=Processes|imglink=Main Page|alt=}}
@@ Zeile 95: / Zeile 92: @@
 ==Einstellungen==
-===Template:Image_cards/start===
+===Vorlage:Bildkarten/start===
 {| 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
@@ Zeile 102: / Zeile 99: @@
 |- 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:180px;box-sizing:inherit;padding:0.2em 0.4em;border:1px solid rgb(162, 169, 177);" |
 *medium (can stay empty, it is the default)
 *small
 *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
 |
 *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.
 |-
 |
 *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
 |
 *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%;"
-! 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;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: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.:
 London
-|Label that is shown under the image/icon.
+|Beschriftung, die unter dem Bild/Symbol angezeigt wird.
 |-
 |imglink
 |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
 |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
-|e.g.:
+| e.g.:
 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
@@ Zeile 174: / Zeile 170: @@
 <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.
 |}