Sjabloon:Bannerbox: verschil tussen versies

Huidige versie van 1 aug 2024 om 15:06

This template creates an intro banner on a page. The banner should contain an image (optional), a title and 2-3 lines of text.

Geen beschrijving.

Sjabloonparameters
Parameter		Beschrijving	Type	Status
Banner image (optional)	`banner-image`	Image name, without the File: prefix, but with namespace prefix (if it exists) Voorbeeld myimage.png	Onbekend	voorgesteld
Alternative image description (for accessibility)	`banner-image-alt`	geen beschrijving	Onbekend	voorgesteld
Image width	`image-width`	Width in pixels. Default setting is 200 Voorbeeld e.g., 300 (default is 200)	Onbekend	voorgesteld
Image alignment	`imagealign`	Links oder rechts in der Box Standaard left Voorbeeld left, right	Onbekend	voorgesteld
Heading	`banner-title`	Box heading	Tekenreeks	voorgesteld
Mark title as h1 page heading	`title-h1`	Mark this as h1, if your page hides the title area Standaard 1 Voorbeeld 1=h1	Booleaans	voorgesteld
Heading size	`titlesize`	geen beschrijving Standaard 1.6rem Voorbeeld 2em, 2rem, 15px	Onbekend	voorgesteld
Heading color	`titlecolor`	Color of the heading. Voorbeeld #ffffff	Onbekend	voorgesteld
Text	`banner-text`	1-3 lines of text	Inhoud	voorgesteld
Text size	`textsize`	geen beschrijving Standaard 1.3rem Voorbeeld 12px, 1em	Onbekend	voorgesteld
Text color	`textcolor`	geen beschrijving Voorbeeld #000000	Onbekend	voorgesteld
Content padding (optional)	`contentpadding`	Padding around text. Default is 10px. Voorbeeld 20px	Getal	voorgesteld
Padding of the container box (optional)	`boxpadding`	Sets the padding for the box. Default is 0. Voorbeeld 10px (default is 0) Automatische waarde	Onbekend	voorgesteld
Background color (optional)	`boxbgcolor`	Default is grey (#f1f3f9). Replace with any hex value, (e.g. #ffffe6) Standaard #efefef	Tekenreeks	voorgesteld
Background icon	`boxbgicon`	geen beschrijving Voorbeeld bgicon1, bgicon2, bgicon3, swoosh	Onbekend	voorgesteld

@@ Regel 1: / Regel 1: @@
 <includeonly><templatestyles src="Bannerbox/styles.css" /><div class="bannerbox {{{boxbgicon|}}}" style="align-items:start;{{#ifeq:{{{imagealign|}}}|right|flex-direction:row-reverse;|flex-dirction:row;}}{{#if:{{{boxbgcolor|}}}|background:{{{boxbgcolor}}};|}}{{#if:{{{boxpadding|}}}|padding:{{{boxpadding|0px}}};}}">
-{{#if:{{{banner-image|}}}|<div class="banner-image">[[File:{{{banner-image}}}{{!}}{{#if:{{{image-width|}}}|{{{image-width}}}x{{{image-width}}}px|200x200px}}{{!}}link=]]</div>|}}<div class="banner-content" style="padding:{{#if:{{{contentpadding|}}}|{{{contentpadding}}}"|10px}}>{{#if:{{{banner-title|}}}|<div class="banner-title"><div class="bannerhd" style="margin-top:0; {{#if:{{{titlesize|}}}|font-size:{{{titlesize}}};|font-size:1.6em;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|}}">{{{banner-title}}}</div></div>|}}{{#if:{{{banner-text|}}}|<div class="banner-text" style="{{#if:{{{textcolor|}}}|color:{{{textcolor}}};|}}{{#if:{{{textsize|}}}|font-size:{{{textsize}}};|}}">{{{banner-text}}}</div>|}}</div></div></includeonly><noinclude>
+{{#if:{{{banner-image|}}}|<div class="banner-image">[[File:{{{banner-image}}}{{!}}{{#if:{{{image-width|}}}|{{{image-width}}}x{{{image-width}}}px|200x200px}}|alt={{{banner-image-alt|banner image}}}|{{!}}link=]]</div>|}}<div class="banner-content" style="padding:{{#if:{{{contentpadding|}}}|{{{contentpadding}}}"|10px}}>{{#if:{{{banner-title|}}}|{{#ifeq:{{{title-h1|1}}}|1|<h1 class="bannerhd" style="margin-top:0; {{#if:{{{titlesize|}}}|font-size:{{{titlesize}}};|font-size:1.6rem;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|}}">{{{banner-title}}}</h1>|<div class="banner-title"><div class="bannerhd" style="margin-top:0; {{#if:{{{titlesize|}}}|font-size:{{{titlesize}}};|font-size:1.6rem;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|}}">{{{banner-title}}}</div></div>}}|}}{{#if:{{{banner-text|}}}|<div class="banner-text" style="{{#if:{{{textcolor|}}}|color:{{{textcolor}}};|}}{{#if:{{{textsize|}}}|font-size:{{{textsize}}};|}}">{{{banner-text}}}</div>|}}</div></div></includeonly><noinclude>
 This template creates an intro banner on a page. The banner should contain an image (optional), a title and 2-3 lines of text.
 <templatedata>
@@ Regel 100: / Regel 100: @@
 			},
 			"suggested": true,
-			"description": "Links oder rechts in der Box"
+			"description": {
+				"en": "Links oder rechts in der Box",
+				"de": "Left or right in the box"
+			}
 		},
 		"banner-title": {
@@ Regel 117: / Regel 120: @@
 			},
 			"example": {
-				"en": "2em, 15px",
+				"en": "2em, 2rem, 15px",
-				"de": "2em,  15px"
+				"de": "2em, 2rem, 15px"
 			},
 			"default": {
-				"en": "1.6em",
+				"en": "1.6rem",
-				"de": "1.6em"
+				"de": "1.6rem"
 			},
 			"suggested": true
@@ Regel 171: / Regel 174: @@
 			},
 			"default": {
-				"en": "1.3em",
+				"en": "1.3rem",
-				"de": "1.3em"
+				"de": "1.3rem"
 			},
 			"suggested": true
@@ Regel 180: / Regel 183: @@
 				"en": "Background icon",
 				"de": "Hintergrundicon"
+			},
+			"suggested": true,
+			"example": "bgicon1, bgicon2, bgicon3, swoosh"
+		},
+		"banner-image-alt": {
+			"label": {
+				"en": "Alternative image description (for accessibility)",
+				"de": "Bild-Alternativtext (barrierefrei)"
 			},
 			"suggested": true
+		},
+		"title-h1": {
+			"label": {
+				"en": "Mark title as h1 page heading",
+				"de": "Als  h1-Überschrift markieren (bei verstecktem Titelbereich)"
+			},
+			"description": {
+				"en": "Mark this as h1, if your page hides the title area",
+				"de": "1=h1"
+			},
+			"type": "boolean",
+			"default": {
+				"en": "1",
+				"de": "1"
+			},
+			"suggested": true,
+			"example": "1=h1"
 		}
 	},
 	"paramOrder": [
 		"banner-image",
+		"banner-image-alt",
 		"image-width",
 		"imagealign",
 		"banner-title",
+		"title-h1",
 		"titlesize",
 		"titlecolor",