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.
sectionTypes.image.options.copyright	Object	Siehe Bilder im SiteKit#Copyright

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

IES Datenstruktur

Name	Type	Beschreibung
sp_imageUpload	BinaryInformation	Hochgeladenes Bild
sp_image	ID	Verknüpfung zu einem Bild
sp_imageCopyright	String	Copyright für hochgeladenes Bild
sp_imageText	Boolean	Alternativtext des Bildes (Überschreibt den Wert, wenn das Bild eine Verknüpfung ist)
sp_imageLegend	String	Bildunterschrift
sp_imageAlign	String	Anordnung des Bildes (left-small, right-small, full)
sp_imageClick	String	Klickverhalten: Default = Vergrößerungsfuntion, link = Link, none = keine Aktion
sp_linkType	String	Linktype, wenn Klickverhalten = link: Default = interner Link, external = externer Link, download = Download
sp_linkNewWindow	Boolean	Gibt an, ob Link im neuen Fenster geöffnet werden soll
sp_link	ID	Interner Link, der bei einem Klick auf das Bild geöffnet werden soll
sp_url	String	Extene URL, die bei einem Klick auf das Bild geöffnet werden soll
sp_download	ID	Interner Link auf ein Medium, das bei einem Klick auf das Bild heruntergeladen werden soll

PHP Datenstruktur

Model

SP\SiteKit\Model\Content\Image