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" : ""
				}
			}
		},
		...
	}
}

Mehrsprachigkeit

Unterstütz z.Z. keine Mehrsprachigkeit.

PHP Mehrsprachigkeit

Hat keine Mehrsprachigkeits-Definitionen in PHP

Datenstruktur

PHP Datenstruktur

Der Bild-Abschnitt benutzt folgende Models:

SP\SiteKit\Model\Content\Image
SP\SiteKit\Model\Content\Image\Item