Abschnitt: Bild

Aus SiteparkWiki
Zur Navigation springen Zur Suche springen

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\Image
SP\SiteKit\Model\Content\Image\Item