Abschnitt: Bild

Beschreibung

Mit dem Bild-Abschnitt können Bilder in den Content einer Seite eingebunden werden. Die Bilder können sowohl aus einem Medien-Pool stammen als auch direkt am Artikel hochgeladen werden. Neben einen Alternativtext, Copyright-Hinweis und einer Bildunterschrift kann eine Anordnung und das Klickverhalten konfiguriert werden.

Anordnung: Die Anordnung des Bildes innerhalb einer Seite. Zum Beispiel: "kleines Bild rechts".
Klickverhalten: Klickverhalten des Bildes.
Vergrößerungsfunktion: Das Bild wird im ImageViewer dargestellt. Der ImageViewer bietet die Möglichkeit über alle in der Seite eingebundenen Bilder (durch den Bild-Abschnitt) zu Browsen.
Link: Das Bild kann mit den Link-Typen "interner Link", "externer Link" oder "Download" verlinkt werden.
keine Aktion: Das Klicken auf das Bild hat keine Aktion zur Folge.

Konfiguration

IES Optionen

Name	Type	Beschreibung
`sectionTypes.image.options.alignments`	Array	Beinhaltet die Konfigurationen für die Anordnung des Bildes.
`sectionTypes.image.options.picture`	Array	Beinhaltet die Konfigurationen für die Skalierung des Bildes.

Anordnung

"alignments" : [
	{
		"label" : "links", // Label für die Redaktionelleoberfläche
		"value" : "left"   // CSS-Klasse des Bildes (ohne "SP-figure-")
	}
]

Skalierung

"picture": {
	"sizes" : [
		{ // Mobile-Bild für die kleinste Auflösung
			"width" : 25, // breite in Pixel
			"height" : 25, // höhe in Pixel
			"order" : 0.4 // Reihenfolge: in dieser Reihenfolge werden die skalierten Bilder im Picture-Tag ausgegeben. Dabei muss darauf geachtet werden, dass das größte Bild zu erst ausgegeben wird, sprich den index 0.0 hat.
		},
		{
			"mediaQry" : "(min-width: 10em)", // Media Query für das Picture-Tag
			"width" : 50,
			"height" : 50,
			"order" : 0.3
		},
		{
			"mediaQry" : "(min-width: 60em)",
			"width" : 500,
			"height" : 500,
			"static" : true, // Fallback Bild falls das Picture-Tag vom Browser nicht unterstützt wird.
			"order" : 0.0
		}
	],
	"padding" : "fit", // Padding für sp:scaleimage
	"background" : "" // Hintergrundfarbe des Bildes (nur bei eingeschlateten Padding relevant)
}

Beispiel

{
	"sectionTypes" : {
		...,
		"image": {
			"id" : "image",
			"name": "Bild",
			"order": 0.000001,
			"template": { "module" : "sitekit-module", "uri" : "/templates/sectionTypes/image.spml" },
			"aggregator" : { "module" : "sitekit-module", "uri" : "/aggregator/sectionTypes/image.spml" },
			"options" : {
				"alignments" : [
					{
						"label" : "links",
						"value" : "left"
					},
					{
						"label" : "rechts",
						"value" : "right"
					},
					{
						"label" : "groß",
						"value" : "big"
					},
					{
						"label" : "kleines Bild links",
						"value" : "small-left"
					},
					{
						"label" : "kleines Bild rechts",
						"value" : "small-right"
					}
				],
				"picture": {
					"sizes" : [
						{
							"width" : 25,
							"height" : 25,
							"order" : 0.4
						},
						{
							"mediaQry" : "(min-width: 10em)",
							"width" : 50,
							"height" : 50,
							"order" : 0.3
						},
						{
							"mediaQry" : "(min-width: 20em)",
							"width" : 100,
							"height" : 100,
							"order" : 0.2
						},
						{
							"mediaQry" : "(min-width: 30em)",
							"width" : 150,
							"height" : 150,
							"order" : 0.1
						},
						{
							"mediaQry" : "(min-width: 60em)",
							"width" : 500,
							"height" : 500,
							"static" : true,
							"order" : 0.0
						}
					],
					"padding" : "fit",	
					"background" : ""
				}
			}
		},
		...
	}
}

PHP Optionen

Mehrsprachigkeit

Unterstütz z.Z. keine Mehrsprachigkeit.

IES Mehrsprachigkeit

PHP Mehrsprachigkeit

Hat keine Mehrsprachigkeits-Definitionen in PHP

Datenstruktur

IES Datenstruktur

PHP Datenstruktur

Der Text-Abschnitt benutzt folgende Models:

SP\SiteKit\Model\Content\Text